{% extends "base.html" %}
{% from "macros/ui.html" import course_switcher %}

{% set title = 'Tutorial Materials' %}

{% block head_extra %}
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.1/socket.io.min.js"></script>
  <script src="https://unpkg.com/htmx.org@1.9.10"></script>
{% endblock %}

{% block body %}

  {# ── Header ────────────────────────────────────────────────────── #}
  <header class="w-full px-4 pt-4 pb-2 md:px-6 md:py-3">

    {# ── Desktop: single row ───────────────────────────── #}
    <div class="hidden md:grid md:grid-cols-3 items-center gap-4">

      {# Col 1: user + logout (left-aligned) #}
      <div class="flex items-center gap-2">
        <span class="text-gray-700 dark:text-gray-200 text-sm font-medium">{{ user_name }}</span>
        <form method="POST" action="/logout">
          <button type="submit"
                  class="text-xs text-white bg-red-600 px-2.5 py-1 rounded-md hover:bg-red-700 transition">
            Logout
          </button>
        </form>
      </div>

      {# Desktop header, Col 2 #}
      <div class="flex justify-center">
        {{ course_switcher(courses, active_course_name, '/switch_course', '-desktop') }}
      </div>

      {# Col 3: social + admin (right-aligned) #}
      <div class="flex items-center justify-end gap-3">
        <a href="https://discordapp.com/users/306086176585154560" target="_blank">
          <img src="{{ url_for('static', filename='discord_icon.svg') }}" class="h-7 w-7">
        </a>
        <a href="{{ url_for('admin.admin') }}">
          <button class="bg-primary hover:bg-blue-700 text-white text-sm px-3 py-1 rounded-md transition">
            Admin
          </button>
        </a>
      </div>

    </div>

    {# ── Mobile: single row only ──────────────────────── #}
    <div class="flex flex-col gap-3 md:hidden">
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-2">
          <span class="text-gray-700 dark:text-gray-200 text-sm font-medium">{{ user_name }}</span>
          <form method="POST" action="/logout">
            <button type="submit"
                    class="text-xs text-white bg-red-600 px-2.5 py-1 rounded-md hover:bg-red-700 transition">
              Logout
            </button>
          </form>
        </div>
        <div class="flex items-center gap-3">
          <a href="https://discordapp.com/users/306086176585154560" target="_blank">
            <img src="{{ url_for('static', filename='discord_icon.svg') }}" class="h-7 w-7">
          </a>
          <a href="{{ url_for('admin.admin') }}">
            <button class="bg-primary hover:bg-blue-700 text-white text-sm px-3 py-1 rounded-md transition">
              Admin
            </button>
          </a>
        </div>
      </div>
    </div>

  </header>

  {# ── Main Content ──────────────────────────────────────────────── #}
  <main class="max-w-5xl mx-auto px-6 py-10 space-y-12">

    {% if active_banner %}
      <section class="flex justify-center">
        <div class="p-4 text-sm text-yellow-800 rounded-lg bg-yellow-50 dark:bg-gray-800 dark:text-yellow-300" role="alert">
          <span class="font-bold">{{ active_banner.content }}</span>
        </div>
      </section>
    {% endif %}

    
    {# Mobile, below the banner #}
    <div class="flex justify-center md:hidden">
      {{ course_switcher(courses, active_course_name, '/switch_course', '-mobile') }}
    </div>


    {# ── Password Form ─────────────────────────────────────────── #}
    <section class="flex justify-center">
      <div class="w-full max-w-md">
        <div class="bg-surface border border-border rounded-lg shadow-md p-6">
          <h2 class="text-xl font-semibold text-center mb-4">Enter Access Password</h2>
          <form method="POST" action="/access" class="space-y-4">
            <input
              type="password"
              name="password"
              placeholder="Enter password"
              required
              autofocus
              class="w-full px-4 py-3 rounded-md bg-background border border-border text-text placeholder-muted focus:outline-none focus:ring-2 focus:ring-primary"
            />
            <button type="submit"
                    class="w-full bg-primary hover:bg-blue-700 text-white py-2 rounded-md transition">
              Unlock
            </button>
          </form>
          {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
              <div class="flashed-messages mt-3 space-y-2">
                {% for category, message in messages %}
                  {% if category == 'error' %}
                    <p class="text-red-500 text-center">{{ message }}</p>
                  {% elif category == 'expired' %}
                    <p class="text-orange-500 text-center">{{ message }}</p>
                  {% else %}
                    <p class="text-gray-500 text-center">{{ message }}</p>
                  {% endif %}
                {% endfor %}
              </div>
            {% endif %}
          {% endwith %}
        </div>
      </div>
    </section>

    {# ── Deck Cards ────────────────────────────────────────────── #}
    {% if decks %}
    <section>
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        {% for deck in decks %}
        <div class="bg-surface border border-border rounded-xl shadow-sm transition hover:shadow-lg flex flex-col">
          <div class="flex items-stretch p-5 gap-4">

            <a href="/slides/{{ deck.course.folder }}/{{ deck.deck }}/{{ deck.index_file }}"
               class="flex-grow block hover:text-primary transition">
              <h3 class="text-lg font-semibold mb-1">{{ deck.name }}</h3>
              <div class="prose prose-sm dark:prose-invert prose-p:text-muted prose-li:text-muted">
                {{ deck.description | md }}
              </div>
            </a>

            {% if deck.export_file %}
            <div class="w-px bg-border self-stretch"></div>

            <a href="/slides/{{ deck.course.folder }}/{{ deck.deck }}/export"
               class="inline-flex items-center justify-center flex-shrink-0 w-10 text-muted hover:text-primary transition"
               download title="Download Presentation">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                   stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round"
                      d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
              </svg>
            </a>
            {% endif %}

          </div>
        </div>
        {% endfor %}
      </div>
    </section>
    {% else %}
      <p class="text-center text-muted">No decks unlocked yet.</p>
    {% endif %}

  </main>
{% endblock body %}