{% extends "admin_base.html" %}
{% from "macros/ui.html" import course_switcher, delete_button, styled_field %}

{% set active_page = 'admin' %}
{% set title = 'Deck Admin' %}

{# Override left nav to include course switcher #}
{% block nav_left_extra %}
  {{ course_switcher(courses, active_course_name, '/admin/switch_course', '-admin') }}
{% endblock %}

{% block admin_content %}
<div class="container mx-auto px-6 py-10 space-y-12">
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-10">

    {# ── Deck Form + Decks ─────────────────────────────────────── #}
    <div class="bg-surface rounded-xl p-6 shadow-lg space-y-6">
      <h2 class="text-2xl font-semibold">Add New Deck</h2>
      <form method="POST" class="space-y-4">
        {{ deck_form.hidden_tag() }}
        {{ styled_field(deck_form.name) }}
        {{ styled_field(deck_form.deck, {'multiple': true}) }}
        {{ styled_field(deck_form.description) }}
        <div>
          {{ deck_form.submit_deck(class="w-full bg-primary hover:bg-blue-700 text-white py-2 px-4 rounded-lg") }}
        </div>
      </form>

      <h2 class="text-2xl font-semibold pt-6">Existing Decks</h2>
      {% if decks %}
      <div class="overflow-x-auto">
        <table class="w-full table-auto text-left text-sm">
          <thead class="text-muted border-b border-border">
            <tr>
              <th class="px-4 py-2">Name</th>
              <th class="px-4 py-2">Passwords</th>
              <th class="px-4 py-2">Action</th>
            </tr>
          </thead>
          <tbody>
            {% for deck in decks %}
            <tr class="border-b border-border hover:bg-background/30">
              <td class="px-4 py-2 font-medium">{{ deck.name }}</td>
              <td class="px-4 py-2">
                {% if deck.passwords %}
                <ul class="list-disc list-inside text-muted">
                  {% for password in deck.passwords %}
                  <li>{{ password.value }}</li>
                  {% endfor %}
                </ul>
                {% else %}
                <em class="text-muted">None</em>
                {% endif %}
              </td>
              <td class="px-4 py-2">
                {{ delete_button(url_for('admin.delete_deck', deck_id=deck.id)) }}
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      {% else %}
      <p class="text-center text-muted">No decks available.</p>
      {% endif %}
    </div>

    {# ── Password Form + Passwords ──────────────────────────────── #}
    <div class="bg-surface rounded-xl p-6 shadow-lg space-y-6">
      <h2 class="text-2xl font-semibold">Add New Password</h2>
      <form method="POST" class="space-y-4">
        {{ password_form.hidden_tag() }}
        {{ styled_field(password_form.value) }}
        {{ styled_field(password_form.expires_at, {'type': 'datetime-local'}) }}
        {{ styled_field(password_form.decks) }}
        <div>
          {{ password_form.submit_password(class="w-full bg-primary hover:bg-blue-700 text-white py-2 px-4 rounded-lg") }}
        </div>
      </form>

      <h2 class="text-2xl font-semibold pt-6">Existing Passwords</h2>
      {% if passwords %}
      <div class="overflow-x-auto">
        <table class="w-full table-auto text-left text-sm">
          <thead class="text-muted border-b border-border">
            <tr>
              <th class="px-4 py-2">Password</th>
              <th class="px-4 py-2">Expires</th>
              <th class="px-4 py-2">Decks</th>
              <th class="px-4 py-2">Action</th>
            </tr>
          </thead>
          <tbody>
            {% for password in passwords %}
            <tr class="border-b border-border hover:bg-background/30">
              <td class="px-4 py-2 font-medium">{{ password.value }}</td>
              <td class="px-4 py-2 local-time"
                  data-utc="{{ password.expires_at.strftime('%Y-%m-%dT%H:%M:%SZ') if password.expires_at }}">
                {{ password.expires_at }}
              </td>
              <td class="px-4 py-2">
                {% if password.decks %}
                <ul class="list-disc list-inside text-muted">
                  {% for deck in password.decks %}
                  <li>{{ deck.name }}</li>
                  {% endfor %}
                </ul>
                {% else %}
                <em class="text-muted">None</em>
                {% endif %}
              </td>
              <td class="px-4 py-2">
                {{ delete_button(url_for('admin.delete_password', password_id=password.id)) }}
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      {% else %}
      <p class="text-center text-muted">No passwords available.</p>
      {% endif %}
    </div>

  </div>
</div>
{% endblock admin_content %}

{% block scripts_extra %}
<script>
  document.querySelectorAll('.local-time').forEach(el => {
    const utcStr = el.getAttribute('data-utc');
    if (utcStr) {
      const date = new Date(utcStr);
      if (!isNaN(date)) {
        el.textContent = date.toLocaleString('de-DE', {
          day: '2-digit', month: '2-digit', year: 'numeric',
          hour: '2-digit', minute: '2-digit'
        });
      }
    }
  });
</script>
{% endblock %}