{% extends "scitex_app/app_shell.html" %}
{% load static i18n scitex_i18n scitex_panes scitex_static %}
{% comment %}
Host chrome comes from scitex_app/app_shell.html: the hub maps it to its own
base page (site header + dock), standalone falls back to scitex-ui's shell.
{% endcomment %}
{% block extra_css %}
    <meta name="stx-mount" content="{{ stx_mount }}">
    <meta name="csrf-token" content="{{ csrf_token }}">
    <link rel="stylesheet" href="{% app_static 'scitex_ui/css/app/form-controls.css' %}">
    <link rel="stylesheet" href="{% app_static 'stats/css/stats.css' %}">
    <link rel="stylesheet" href="{% app_static 'stats/css/recommend.css' %}">
{% endblock %}

{% block scitex_app_content %}
<div class="stats-app" data-stats-app>
{% translate "1. Data Input" as label_data %}{% translate "2. Test Selection" as label_test %}{% translate "3. Results" as label_results %}
{% scitex_panes "stats" columns="minmax(0,1.1fr) minmax(0,0.9fr) minmax(0,1.2fr)" active="data" %}
  {% scitex_pane "data" label=label_data order=1 css_class="stats-pane" %}
    <header class="stats-pane__header" data-stx-pane-header>
      <h2 class="stats-pane__title">{% translate "1. Data Input" %}</h2>
      <div class="stats-pane__actions">
        <button type="button" class="stats-btn stats-btn--ghost" id="statsSample">{% translate "or Load Sample Data" %}</button>
        <input type="file" id="statsCsv" accept=".csv,.tsv,.txt,text/csv" hidden>
      </div>
    </header>
    <div class="stats-pane__body stats-dropzone" id="statsDataDrop">
      <p class="stats-hint">{% translate "One group per box. Paste numbers separated by spaces, commas or new lines." %}</p>
      <label class="stats-hint stats-dropzone__hint" for="statsCsv">{% translate "Drop a CSV or TSV file here, or click to choose." %}</label>
      <div class="stats-options">
        <label class="stats-field"><span>{% translate "Design" %}</span>
          <select class="stx-select" id="statsDesign">
            <option value="independent" selected>{% translate "Independent groups" %}</option>
            <option value="paired">{% translate "Paired / repeated measures" %}</option>
          </select>
        </label>
        <label class="stats-field"><span>{% translate "Measurement scale" %}</span>
          <select class="stx-select" id="statsScale">
            <option value="continuous" selected>{% translate "Continuous" %}</option>
            <option value="ordinal">{% translate "Ordinal" %}</option>
            <option value="categorical">{% translate "Categorical (one row of counts per box)" %}</option>
          </select>
        </label>
      </div>
      <div id="statsGroups" class="stats-groups"></div>
      <div class="stats-row">
        <button type="button" class="stats-btn stats-btn--ghost" id="statsAddGroup">+ {% translate "Add group" %}</button>
        <button type="button" class="stats-btn stats-btn--ghost" id="statsClear">{% translate "Clear" %}</button>
      </div>
    </div>
  {% endscitex_pane %}

  {% scitex_pane "test" label=label_test order=2 css_class="stats-pane" %}
    <header class="stats-pane__header" data-stx-pane-header>
      <h2 class="stats-pane__title">{% translate "2. Test Selection" %}</h2>
      <div class="stats-pane__actions">
        <button type="button" class="stats-btn" id="statsRecommend">{% translate "Select recommended test" %}</button>
        <button type="button" class="stats-btn stats-btn--primary" id="statsCalculate">{% translate "Calculate" %}</button>
      </div>
    </header>
    <div class="stats-pane__body">
      <p id="statsError" class="stats-error" role="alert" hidden></p>
      <div id="statsTests" class="stats-tests" role="radiogroup" aria-label="{% translate 'Statistical test' %}"></div>
      <div class="stats-options">
        <label class="stats-field"><span>{% translate "Alternative hypothesis" %}</span>
          <select class="stx-select" id="statsAlt">
            <option value="two-sided" selected>{% translate "two-sided" %}</option>
            <option value="greater">{% translate "greater" %}</option>
            <option value="less">{% translate "less" %}</option>
          </select>
        </label>
        <label class="stats-field" id="statsPopmeanWrap" hidden><span>{% translate "Population mean" %}</span>
          <input type="number" id="statsPopmean" value="0" step="any">
        </label>
      </div>
    </div>
  {% endscitex_pane %}

  {% scitex_pane "results" label=label_results order=3 css_class="stats-pane" %}
    <header class="stats-pane__header" data-stx-pane-header>
      <h2 class="stats-pane__title">{% translate "3. Results" %}</h2>
      <div class="stats-pane__actions">
        <button type="button" class="stats-btn stats-btn--ghost stats-copy" id="statsCopy" hidden><span class="stats-copy__icon" aria-hidden="true"></span><span class="stats-copy__label">{% translate "Copy" %}</span></button>
        <span id="statsCopyStatus" class="stats-visually-hidden" role="status" aria-live="polite"></span>
      </div>
    </header>
    <div class="stats-pane__body">
      <section id="statsSummary" class="stats-summary" aria-live="polite" hidden>
        <h3 class="stats-summary__title">{% translate "Applicable tests" %}</h3>
        <ul id="statsRecNotes" class="stats-notes" hidden></ul>
        <div class="stats-applic-wrap">
          <table class="stats-applic">
            <thead><tr><th scope="col"><span class="stats-visually-hidden">{% translate "Applicable" %}</span></th><th scope="col">{% translate "Test" %}</th><th scope="col">{% translate "Reasons" %}</th></tr></thead>
            <tbody id="statsApplicRows"></tbody>
          </table>
        </div>
        <div id="statsRecCard" class="stats-rec"></div>
        <div id="statsAssumptions" class="stats-assumptions"></div>
        <figure id="statsPlotSlot" class="stats-plot-slot" data-stats-plot-slot hidden></figure>
        <div class="stats-row stats-row--actions">
          <button type="button" class="stats-btn" id="statsRunAll">{% translate "Run all applicable (sensitivity)" %}</button>
        </div>
        <div id="statsRunAllOut" class="stats-runall" hidden></div>
      </section>
      <div id="statsEmpty" class="stats-empty">
        <div class="stats-empty__icon" aria-hidden="true">&sigma;</div>
        <p>{% translate "Enter data, pick a test, then press Calculate." %}</p>
      </div>
      <div id="statsResult" class="stats-result" hidden>
        <p id="statsResultTitle" class="stats-result__title"></p>
        <p id="statsFormatted" class="stats-result__formatted"></p>
        <table class="stats-table stats-table--desc" id="statsDescTable" hidden><thead id="statsDescHead"></thead><tbody id="statsDescRows"></tbody></table>
        <table class="stats-table"><tbody id="statsResultRows"></tbody></table>
        <section class="stats-plot" id="statsPlot" aria-labelledby="statsPlotTitle" hidden>
          <div class="stats-plot__head">
            <h3 class="stats-plot__title" id="statsPlotTitle">{% translate "Plot" %}</h3>
            <div class="stats-plot__actions">
              <a class="stats-btn stats-btn--ghost" id="statsPlotSvg" download="stats-plot.svg" hidden>SVG</a>
              <a class="stats-btn stats-btn--ghost" id="statsPlotPng" download="stats-plot.png" hidden>PNG</a>
              <button type="button" class="stats-btn" id="statsOpenFigrecipe" hidden>{% translate "Open in FigRecipe" %}</button>
            </div>
          </div>
          <div class="stats-plot__frame"><img id="statsPlotImg" class="stats-plot__img" alt="{% translate 'Plot of the test result' %}" hidden></div>
          <p id="statsPlotStatus" class="stats-hint" role="status" aria-live="polite"></p>
        </section>
        <details class="stx-acc stats-acc">
          <summary>{% translate "Raw result" %}</summary>
          <div class="stx-acc__body"><pre id="statsJson" class="stats-pre"></pre></div>
        </details>
      </div>

      <details class="stx-acc stats-acc">
        <summary>{% translate "Multiple-comparison correction" %}</summary>
        <div class="stx-acc__body">
          <label class="stats-field"><span>{% translate "Method" %}</span>
            <select class="stx-select" id="statsCorrMethod">
              <option value="fdr_bh" selected>FDR (Benjamini–Hochberg)</option>
              <option value="bonferroni">Bonferroni</option>
              <option value="holm">Holm</option>
              <option value="sidak">Šidák</option>
            </select>
          </label>
          <label class="stats-field"><span>{% translate "P-values" %}</span>
            <textarea id="statsCorrP" rows="2" placeholder="0.01 0.02 0.03 0.5"></textarea>
          </label>
          <button type="button" class="stats-btn" id="statsCorrect">{% translate "Correct" %}</button>
          <table class="stats-table"><tbody id="statsCorrOut"></tbody></table>
        </div>
      </details>

      <details class="stx-acc stats-acc">
        <summary>{% translate "Post-hoc comparisons" %}</summary>
        <div class="stx-acc__body">
          <p class="stats-hint">{% translate "Uses the groups in Data." %}</p>
          <label class="stats-field"><span>{% translate "Method" %}</span>
            <select class="stx-select" id="statsPhMethod">
              <option value="tukey" selected>Tukey HSD</option>
              <option value="games_howell">Games–Howell</option>
              <option value="dunnett">Dunnett</option>
            </select>
          </label>
          <button type="button" class="stats-btn" id="statsPosthoc">{% translate "Compare groups" %}</button>
          <table class="stats-table"><tbody id="statsPhOut"></tbody></table>
        </div>
      </details>
    </div>
  {% endscitex_pane %}
{% endscitex_panes %}
</div>
{% endblock %}

{% block extra_js %}
    {% scitex_js_catalog "scitex_stats._django" %}
    <script src="{% app_static 'stats/js/stx-mount.js' %}"></script>
    <script src="{% app_static 'stats/js/plot.js' %}"></script>
    <script src="{% app_static 'stats/js/app.js' %}"></script>
    <script src="{% app_static 'stats/js/recommend.js' %}"></script>
{% endblock %}