{% extends "base.html" %}
{% block title %}{% if lesson %}{{ lesson.title }}{% else %}Grammar{% endif %} – Auf Deutsch{% endblock %}

{% block content %}
{% if lesson %}
<div class="page-grammar fade-in">
  <a href="/grammar" class="back-link">← Back to grammar</a>

  <header class="grammar-lesson-header">
    <div class="grammar-kicker">{{ lesson.level }} · {{ lesson.category }}</div>
    <h1 class="page-title">{{ lesson.title }}</h1>
    <p class="grammar-lead">{{ lesson.summary }}</p>
    <div class="grammar-pill-row">
      <span class="home-level-pill">{{ lesson.track_title }}</span>
      <span class="home-goal-pill">{{ lesson.estimated_minutes }} min</span>
    </div>
  </header>

  <section class="grammar-hero-band">
    <div class="card grammar-hero-card grammar-hero-card-pattern">
      <div class="dashboard-kicker">Pattern first</div>
      <div class="grammar-pattern-box">{{ lesson.pattern }}</div>
      {% if lesson.memory_hook %}
      <p class="grammar-memory"><strong>Memory hook:</strong> {{ lesson.memory_hook }}</p>
      {% endif %}
    </div>

    <div class="card grammar-hero-card">
      <div class="dashboard-kicker">Why you need it</div>
      <p class="grammar-why">{{ lesson.why_it_matters }}</p>
    </div>

    {% if lesson.real_life_mission %}
    <div class="card grammar-hero-card">
      <div class="dashboard-kicker">Tiny mission</div>
      <p class="grammar-why">{{ lesson.real_life_mission }}</p>
    </div>
    {% endif %}
  </section>

  <section class="grammar-lesson-grid">
    <div class="card grammar-focus-card">
      <div class="dashboard-kicker">Core rules</div>
      <div class="grammar-rule-list">
        {% for rule in lesson.core_rules %}
        <div class="grammar-rule-item">{{ rule }}</div>
        {% endfor %}
      </div>
    </div>

    <div class="card grammar-side-card">
      {% if lesson.quick_frames %}
      <div class="grammar-mini-section">
        <div class="dashboard-kicker">Quick frames</div>
        <div class="grammar-chip-list">
          {% for frame in lesson.quick_frames %}
          <span class="grammar-chip">{{ frame }}</span>
          {% endfor %}
        </div>
      </div>
      {% endif %}

      {% if lesson.important_verbs %}
      <div class="grammar-mini-section">
        <div class="dashboard-kicker">Important verbs</div>
        <div class="grammar-mini-list">
          {% for verb in lesson.important_verbs %}
          <div class="grammar-mini-row">
            <strong>{{ verb.de }}</strong>
            <span>{{ verb.en }}</span>
            <small>{{ verb.pattern }}</small>
          </div>
          {% endfor %}
        </div>
      </div>
      {% endif %}

      {% if lesson.connector_map %}
      <div class="grammar-mini-section">
        <div class="dashboard-kicker">Connectors</div>
        <div class="grammar-mini-list">
          {% for item in lesson.connector_map %}
          <div class="grammar-mini-row">
            <strong>{{ item.form }}</strong>
            <span>{{ item.meaning }}</span>
            <small>{{ item.word_order }}</small>
          </div>
          {% endfor %}
        </div>
      </div>
      {% endif %}

      {% if lesson.preposition_map %}
      <div class="grammar-mini-section">
        <div class="dashboard-kicker">Prepositions</div>
        <div class="grammar-mini-list">
          {% for item in lesson.preposition_map %}
          <div class="grammar-mini-row">
            <strong>{{ item.form }}</strong>
            <span>{{ item.use }}</span>
            <small>{{ item.case }}</small>
          </div>
          {% endfor %}
        </div>
      </div>
      {% endif %}
    </div>
  </section>

  {% if lesson.examples %}
  <section class="card">
    <h2 class="card-title">Examples that actually sound natural</h2>
    <div class="grammar-example-list">
      {% for ex in lesson.examples %}
      <div class="grammar-example-card">
        <div class="grammar-example-de">{{ ex.de }}</div>
        <div class="grammar-example-en">{{ ex.en }}</div>
        {% if ex.tip %}<div class="grammar-example-tip">{{ ex.tip }}</div>{% endif %}
      </div>
      {% endfor %}
    </div>
  </section>
  {% endif %}

  {% if lesson.common_mistakes %}
  <section class="card">
    <h2 class="card-title">Common traps</h2>
    <div class="grammar-mistake-list">
      {% for item in lesson.common_mistakes %}
      <div class="grammar-mistake-card">
        <div class="grammar-mistake-wrong">Not this: {{ item.wrong }}</div>
        <div class="grammar-mistake-right">Use this: {{ item.right }}</div>
        <div class="grammar-mistake-why">{{ item.why }}</div>
      </div>
      {% endfor %}
    </div>
  </section>
  {% endif %}

  {% if lesson.micro_drills %}
  <section class="card">
    <h2 class="card-title">Mini drills</h2>
    <div class="grammar-drill-list">
      {% for drill in lesson.micro_drills %}
      <div class="grammar-drill-card">
        <div class="grammar-drill-prompt">{{ drill.prompt }}</div>
        <div class="grammar-drill-hint">{{ drill.hint }}</div>
        <button type="button" class="btn btn-secondary btn-drill-toggle" data-target="drill-{{ loop.index0 }}">Show answer</button>
        <div class="grammar-drill-answer" id="drill-{{ loop.index0 }}" hidden>{{ drill.answer }}</div>
      </div>
      {% endfor %}
    </div>
  </section>
  {% endif %}

  {% if related_packs %}
  <section class="card">
    <h2 class="card-title">Practice with lessons</h2>
    <div class="grammar-related-grid">
      {% for pack in related_packs %}
      <a href="/packs/{{ pack.pack_id }}" class="grammar-related-card">
        <span class="pack-emoji">{{ pack.cover_emoji }}</span>
        <span>
          <strong>{{ pack.pack_name }}</strong>
          <small>{{ pack.can_do }}</small>
        </span>
      </a>
      {% endfor %}
    </div>
  </section>
  {% endif %}

  {% if related_lessons %}
  <section class="card">
    <h2 class="card-title">Related grammar next</h2>
    <div class="grammar-related-grid">
      {% for item in related_lessons %}
      <a href="/grammar/{{ item.lesson_id }}" class="grammar-related-card">
        <span>
          <strong>{{ item.title }}</strong>
          <small>{{ item.summary }}</small>
        </span>
      </a>
      {% endfor %}
    </div>
  </section>
  {% endif %}
</div>
{% else %}
<div class="page-grammar fade-in">
  <header class="grammar-index-header">
    <div class="grammar-kicker">Grammar that stays usable</div>
    <h1 class="page-title">A1 and A2 grammar, taught as patterns not walls of theory</h1>
    <p class="grammar-lead">
      The goal here is simple: learn one pattern, see it in real German, notice the trap, then use it immediately.
      This covers the main grammar ground for A1 and A2 without turning into a textbook dump.
    </p>
  </header>

  <section class="grammar-start-grid">
    <div class="card grammar-start-card">
      <div class="dashboard-kicker">Start here</div>
      <h2 class="card-title">1. Get the sentence frame right</h2>
      <p class="grammar-overview-copy">Verb early, one clear chunk first, then the rest. This fixes more beginner mistakes than any long rule list.</p>
    </div>
    <div class="card grammar-start-card">
      <div class="dashboard-kicker">Then add</div>
      <h2 class="card-title">2. Build a small verb engine</h2>
      <p class="grammar-overview-copy">Learn the verbs and frames you actually say every day: sein, haben, modals, common actions, and fixed patterns.</p>
    </div>
    <div class="card grammar-start-card">
      <div class="dashboard-kicker">After that</div>
      <h2 class="card-title">3. Learn chunks, not isolated grammar</h2>
      <p class="grammar-overview-copy">am Montag, um acht Uhr, nach Hause, mit dem Bus. These chunks make grammar usable faster.</p>
    </div>
  </section>

  {% if verb_groups %}
  <section class="grammar-track-section">
    <div class="grammar-track-head">
      <div>
        <div class="grammar-kicker">Verb section</div>
        <h2 class="section-title">Detailed verb lessons first</h2>
        <p class="section-subtitle">If you want the highest-return grammar area, start here. These lessons focus on the verbs and frames you will reuse every day.</p>
      </div>
    </div>
    <div class="grammar-overview-grid">
      {% for group in verb_groups %}
        {% for item in group.lessons %}
        <a href="/grammar/{{ item.lesson_id }}" class="grammar-overview-card grammar-verb-card">
          <div class="grammar-overview-top">
            <span class="register-badge">{{ group.level }} verbs</span>
            <span class="section-note">{{ item.estimated_minutes }} min</span>
          </div>
          <div class="grammar-overview-title">{{ item.title }}</div>
          <p class="grammar-overview-copy">{{ item.summary }}</p>
          {% if item.memory_hook %}
          <div class="grammar-overview-hook">{{ item.memory_hook }}</div>
          {% endif %}
        </a>
        {% endfor %}
      {% endfor %}
    </div>
  </section>
  {% endif %}

  {% for group in level_groups %}
  <section class="grammar-track-section">
    <div class="grammar-track-head">
      <div>
        <div class="grammar-kicker">{{ group.level }} track</div>
        <h2 class="section-title">{{ group.level }} grammar roadmap</h2>
        <p class="section-subtitle">{{ group.intro }}</p>
      </div>
      <div class="grammar-pill-row">
        {% for outcome in group.outcomes %}
        <span class="grammar-chip">{{ outcome }}</span>
        {% endfor %}
      </div>
    </div>

    <div class="grammar-overview-grid">
      {% for item in group.lessons %}
      <a href="/grammar/{{ item.lesson_id }}" class="grammar-overview-card">
        <div class="grammar-overview-top">
          <span class="register-badge">{{ item.category }}</span>
          <span class="section-note">{{ item.estimated_minutes }} min</span>
        </div>
        <div class="grammar-overview-title">{{ item.title }}</div>
        <p class="grammar-overview-copy">{{ item.summary }}</p>
        {% if item.memory_hook %}
        <div class="grammar-overview-hook">{{ item.memory_hook }}</div>
        {% endif %}
      </a>
      {% endfor %}
    </div>
  </section>
  {% endfor %}
</div>
{% endif %}
{% endblock %}

{% block scripts %}
{% if lesson and lesson.micro_drills %}
<script>
  document.querySelectorAll(".btn-drill-toggle").forEach((button) => {
    button.addEventListener("click", () => {
      const answer = document.getElementById(button.dataset.target);
      if (!answer) return;
      const shouldShow = answer.hidden;
      answer.hidden = !shouldShow;
      button.textContent = shouldShow ? "Hide answer" : "Show answer";
    });
  });
</script>
{% endif %}
{% endblock %}