{{-- Test Cases → Export picker. Scopes follow the page's own layers: the roll-up panels, the
     file list, each file's test-case rows, or all three. Plain GET to /test-cases/export so the
     browser handles the download. Params: $txQuarter (the selected quarter), $txFiles (file count). --}}
@once
<style>
  .tx-modal-foot { display:flex; justify-content:flex-end; gap:.5rem; padding:.8rem 1.1rem;
    border-top:1px solid var(--line); }
  .tx-opts { display:flex; flex-direction:column; gap:.4rem; margin-top:.35rem; }
  .tx-opts-row { flex-direction:row; }
  .tx-opts-row .tx-opt { flex:1 1 0; min-width:0; }
  .tx-opt { display:flex; align-items:flex-start; gap:.5rem; cursor:pointer; padding:.5rem .6rem;
    border:1px solid var(--line); border-radius:var(--r-sm); background:var(--card); }
  .tx-opt:hover { border-color:var(--primary); }
  .tx-opt.on { border-color:var(--primary); background:var(--primary-soft); }
  .tx-opt input { margin-top:.15rem; flex:none; }
  .tx-opt b { display:block; font-size:.88rem; }
  .tx-opt small { display:block; color:var(--muted); font-size:.74rem; line-height:1.35; }
  .tx-label { display:block; font-size:.82rem; font-weight:600; color:var(--ink); margin-bottom:.3rem; }
  body.is-export .tx-export { display:none; }
</style>
@endonce

<span class="tx-export"
      x-data="{
        open: false, scope: 'overall', format: 'excel',
        url() {
          return '/test-cases/export?format=' + this.format + '&scope=' + this.scope
               + '&quarter={{ urlencode($txQuarter) }}';
        },
        go() { window.location = this.url(); this.open = false; }
      }">
  <button type="button" class="wk-scope-btn" @click="open = true"
          title="Download these test cases as Excel or PDF, laid out as they are here">⬇ Export</button>

  <div class="wk-modal" x-show="open" x-cloak style="display:flex"
       @click.self="open = false" @keydown.escape.window="open = false">
    <div class="wk-modal-card" style="width:min(580px,94vw)">
      <div class="wk-modal-head">
        <strong>Export Test Cases <span class="muted" style="font-weight:400">· {{ $txQuarter }}
          · {{ $txFiles }} file{{ $txFiles === 1 ? '' : 's' }}</span></strong>
        <button type="button" class="wk-modal-close" @click="open = false">✕</button>
      </div>
      <div class="wk-modal-body" style="display:block">
        <span class="tx-label">What to export</span>
        <div class="tx-opts">
          <label class="tx-opt" :class="{ on: scope === 'summary' }">
            <input type="radio" value="summary" x-model="scope">
            <span><b>Summary only</b><small>The quarter's estimated effort, coverage, the manual
              execution roll-up (executed / pass / failed) and the per-project split — no lists.</small></span>
          </label>
          <label class="tx-opt" :class="{ on: scope === 'files' }">
            <input type="radio" value="files" x-model="scope">
            <span><b>Test-case list only</b><small>Every file as this page nests it — project,
              folder, estimate, execution and its linked stories.</small></span>
          </label>
          <label class="tx-opt" :class="{ on: scope === 'cases' }">
            <input type="radio" value="cases" x-model="scope">
            <span><b>Test-case rows only</b><small>Each file's own test cases — the breakdown grid
              with scenario, steps, expected result, status and the bugs linked to a failed row.
              Reads every file, so it takes a moment.</small></span>
          </label>
          <label class="tx-opt" :class="{ on: scope === 'overall' }">
            <input type="radio" value="overall" x-model="scope">
            <span><b>Overall</b><small>The summary, the list <em>and</em> every file's rows — the
              whole module as shown.</small></span>
          </label>
        </div>

        <div style="margin-top:.9rem">
          <span class="tx-label">Format</span>
          <div class="tx-opts tx-opts-row">
            <label class="tx-opt" :class="{ on: format === 'excel' }">
              <input type="radio" value="excel" x-model="format">
              <span><b>Excel</b><small>Summary, Test Cases and Rows sheets.</small></span>
            </label>
            <label class="tx-opt" :class="{ on: format === 'pdf' }">
              <input type="radio" value="pdf" x-model="format">
              <span><b>PDF</b><small>This page's layout on paper, landscape. A big rows export
                opens as a print view — choose <em>Save as PDF</em> there.</small></span>
            </label>
          </div>
        </div>

        <p class="muted" style="font-size:.75rem;margin:.8rem 0 0">
          Covers the same quarter as the page — {{ $txQuarter }}. Uploaded results come along per
          row, and every Jira key (a linked story, or a bug linked to a failed test case) stays a
          clickable link.
        </p>
      </div>
      <div class="tx-modal-foot">
        <button type="button" class="wk-scope-btn all-year" @click="open = false">Cancel</button>
        <button type="button" class="wk-scope-btn" @click="go()">⬇ Export</button>
      </div>
    </div>
  </div>
</span>