{% extends "admin_base.html" %}
{% block admin_content %}
<main id="discussion-cards-app" data-plugin="discussion-cards"
      data-minutes-per-card="{{ minutes_per_card | default(value='5') | escape }}"
      data-meeting-title-default="{{ meeting_title_default | default(value='') | escape }}"
      data-meeting-place-default="{{ meeting_place_default | default(value='') | escape }}"
      data-print-cover="{{ print_cover | default(value=true) }}"
      data-print-index="{{ print_index | default(value=true) }}"
      data-ink-saver="{{ ink_saver | default(value=false) }}"
      class="mx-auto w-full max-w-screen-2xl space-y-5 px-4 py-6 sm:px-6">
  <header class="flex flex-col gap-4 border-b border-divider pb-5 sm:flex-row sm:items-center sm:justify-between">
    <div>
      <h1 class="text-2xl font-bold sm:text-3xl">Discussion card printer</h1>
      <p class="mt-1 text-sm text-muted">Organize an agenda, assign speakers and print ready-to-cut discussion cards.</p>
    </div>
    <div class="flex flex-wrap gap-2">
      <button id="btn-new-session" class="blocks-button blocks-button-secondary" type="button">New session</button>
      <button id="btn-save-session" class="blocks-button blocks-button-primary" type="button">Save session</button>
      <button id="btn-generate-pdf" class="blocks-button blocks-button-secondary" type="button">Download PDF</button>
    </div>
  </header>

  <p id="discussion-feedback" class="text-sm text-muted" role="status" aria-live="polite"></p>

  <div class="grid min-w-0 gap-5 lg:grid-cols-[17rem_minmax(0,1fr)]">
    <aside class="min-w-0 rounded-2xl border border-divider bg-surface p-4 shadow-sm lg:sticky lg:top-4 lg:max-h-[calc(100vh-2rem)] lg:overflow-y-auto">
      <div class="flex items-center justify-between gap-3">
        <h2 class="text-lg font-semibold">Sessions</h2>
        <span class="text-xs text-muted">Saved meetings</span>
      </div>
      <label class="mt-4 block text-sm font-medium" for="session-search">Find a session</label>
      <input id="session-search" class="blocks-input mt-1" type="search" placeholder="Search meetings…" autocomplete="off">
      <div id="sessions-list" class="mt-3 flex flex-col gap-2" aria-label="Saved sessions"></div>
      <nav id="sessions-pagination" class="mt-3 flex items-center justify-between gap-2 border-t border-divider pt-3" aria-label="Session pages"></nav>
    </aside>

    <section class="min-w-0 space-y-5" aria-label="Discussion card editor">
      <section class="rounded-2xl border border-divider bg-surface p-4 shadow-sm sm:p-5" aria-labelledby="meeting-details-title">
        <h2 id="meeting-details-title" class="mb-4 text-lg font-semibold">Meeting details</h2>
        <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-5">
          <div class="sm:col-span-2 xl:col-span-2"><label class="mb-1 block text-sm font-medium" for="meta-title">Meeting title</label><input id="meta-title" class="blocks-input" maxlength="200" autocomplete="off" required></div>
          <div><label class="mb-1 block text-sm font-medium" for="meta-date">Date</label><input id="meta-date" class="blocks-input" type="date"></div>
          <div><label class="mb-1 block text-sm font-medium" for="meta-place">Place</label><input id="meta-place" class="blocks-input" maxlength="160" autocomplete="off"></div>
          <div class="grid grid-cols-2 gap-3"><div><label class="mb-1 block text-sm font-medium" for="meta-start">Starts</label><input id="meta-start" class="blocks-input" type="time"></div><div><label class="mb-1 block text-sm font-medium" for="meta-minutes">Min/card</label><input id="meta-minutes" class="blocks-input" type="number" min="1" max="1440" step="1" inputmode="numeric"></div></div>
        </div>
      </section>

      <div class="grid min-w-0 gap-5 xl:grid-cols-[minmax(15rem,0.8fr)_minmax(22rem,1.3fr)_minmax(15rem,0.9fr)]">
        <section class="min-w-0 overflow-hidden rounded-2xl border border-divider bg-surface shadow-sm" aria-labelledby="speakers-title">
          <header class="flex items-center justify-between gap-3 border-b border-divider px-4 py-3"><h2 id="speakers-title" class="font-semibold">Speakers</h2><button id="btn-add-speaker" class="blocks-button blocks-button-secondary blocks-button-sm" type="button">Add speaker</button></header>
          <div id="speakers-list" class="flex max-h-[65vh] flex-col gap-2 overflow-auto p-3" aria-live="polite"></div>
        </section>

        <section class="min-w-0 overflow-hidden rounded-2xl border border-divider bg-surface shadow-sm" aria-labelledby="agenda-title">
          <header class="flex items-center justify-between gap-3 border-b border-divider px-4 py-3"><h2 id="agenda-title" class="font-semibold">Agenda and points</h2><button id="btn-add-title" class="blocks-button blocks-button-secondary blocks-button-sm" type="button">Add topic</button></header>
          <div id="titles-list" class="flex max-h-[65vh] flex-col gap-3 overflow-auto p-3" aria-live="polite"></div>
        </section>

        <section class="min-w-0 overflow-hidden rounded-2xl border border-divider bg-surface shadow-sm" aria-labelledby="preview-title">
          <header class="border-b border-divider px-4 py-3"><h2 id="preview-title" class="font-semibold">Card preview</h2><p class="mt-1 text-xs text-muted">Updates as you edit. PDF uses the configured paper layout.</p></header>
          <div id="card-preview" class="flex max-h-[65vh] flex-col gap-2 overflow-auto p-3" aria-live="polite"></div>
        </section>
      </div>
    </section>
  </div>
</main>
{% endblock %}
{% block scripts %}
{% include "partials/admin_vendor_sortable.html" %}
<script src="/plugins/discussion-cards/assets/js/discussion-editor.js" defer></script>
{% endblock %}