{{-- BA/PO Issues → Export picker. Scopes follow the page's two halves: the roll-up panels, the
     bug list, or both. Plain GET to /ba-po-issues/export so the browser handles the download.
     Params: $bxQuarter (the selected quarter). --}}
@once
<style>
  .bx-modal-foot { display:flex; justify-content:flex-end; gap:.5rem; padding:.8rem 1.1rem;
    border-top:1px solid var(--line); }
  .bx-opts { display:flex; flex-direction:column; gap:.4rem; margin-top:.35rem; }
  .bx-opts-row { flex-direction:row; }
  .bx-opts-row .bx-opt { flex:1 1 0; min-width:0; }
  .bx-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); }
  .bx-opt:hover { border-color:var(--primary); }
  .bx-opt.on { border-color:var(--primary); background:var(--primary-soft); }
  .bx-opt input { margin-top:.15rem; flex:none; }
  .bx-opt b { display:block; font-size:.88rem; }
  .bx-opt small { display:block; color:var(--muted); font-size:.74rem; line-height:1.35; }
  .bx-label { display:block; font-size:.82rem; font-weight:600; color:var(--ink); margin-bottom:.3rem; }
  body.is-export .bx-export { display:none; }
</style>
@endonce

<span class="bx-export"
      x-data="{
        open: false, scope: 'overall', format: 'excel',
        url() {
          return '/ba-po-issues/export?format=' + this.format + '&scope=' + this.scope
               + '&gq={{ urlencode($bxQuarter) }}';
        },
        go() { window.location = this.url(); this.open = false; }
      }">
  <button type="button" class="wk-scope-btn" @click="open = true"
          title="Download this page as Excel or PDF, laid out as it is 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(560px,94vw)">
      <div class="wk-modal-head">
        <strong>Export BA/PO Issues <span class="muted" style="font-weight:400">· {{ $bxQuarter }}</span></strong>
        <button type="button" class="wk-modal-close" @click="open = false">✕</button>
      </div>
      <div class="wk-modal-body" style="display:block">
        <span class="bx-label">What to export</span>
        <div class="bx-opts">
          <label class="bx-opt" :class="{ on: scope === 'summary' }">
            <input type="radio" value="summary" x-model="scope">
            <span><b>Summary only</b><small>Resolution, QA effectiveness (caught vs escaped, escape
              rate and tier), By reporter and the category spread — no bug list.</small></span>
          </label>
          <label class="bx-opt" :class="{ on: scope === 'bugs' }">
            <input type="radio" value="bugs" x-model="scope">
            <span><b>Bug list only</b><small>Every bug grouped under its target story, with its date
              created, parent story, QA category and remarks.</small></span>
          </label>
          <label class="bx-opt" :class="{ on: scope === 'overall' }">
            <input type="radio" value="overall" x-model="scope">
            <span><b>Overall</b><small>The summary panels <em>and</em> the full bug list — the whole
              page as shown.</small></span>
          </label>
        </div>

        <div style="margin-top:.9rem">
          <span class="bx-label">Format</span>
          <div class="bx-opts bx-opts-row">
            <label class="bx-opt" :class="{ on: format === 'excel' }">
              <input type="radio" value="excel" x-model="format">
              <span><b>Excel</b><small>Summary + Bugs sheets.</small></span>
            </label>
            <label class="bx-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.</small></span>
            </label>
          </div>
        </div>

        <p class="muted" style="font-size:.75rem;margin:.8rem 0 0">
          Covers the same window as the page — {{ $bxQuarter }} targets, bugs filed while UAT ran.
          Saved categories and remarks come along, and every Jira key stays a clickable link.
        </p>
      </div>
      <div class="bx-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>