{% extends "base.html" %}
{% block title %}Vocabulary – Auf Deutsch{% endblock %}

{% block content %}
<div class="page-vocabulary fade-in">
  <header class="vocabulary-header">
    <div class="grammar-kicker">Vocabulary and verbs</div>
    <h1 class="page-title">A real word bank for everyday German</h1>
    <p class="grammar-lead">Use this page as the missing vocabulary and verb section: articles-first nouns, core verbs, practical chunks, and descriptive adjectives with examples you can actually say.</p>
  </header>

  <section class="vocabulary-summary-grid">
    <div class="card vocabulary-summary-card">
      <div class="dashboard-kicker">Visible now</div>
      <div class="vocabulary-summary-number">{{ counts.all }}</div>
      <p class="muted">A1/A2 phrases and words in your current level path.</p>
    </div>
    <div class="card vocabulary-summary-card">
      <div class="dashboard-kicker">Verb bank</div>
      <div class="vocabulary-summary-number">{{ counts.verbs }}</div>
      <p class="muted">Core verbs, modal verbs, fixed frames, and separable verbs.</p>
    </div>
    <div class="card vocabulary-summary-card">
      <div class="dashboard-kicker">Nouns with articles</div>
      <div class="vocabulary-summary-number">{{ counts.nouns }}</div>
      <p class="muted">Shown with articles so users stop memorizing bare nouns.</p>
    </div>
    <div class="card vocabulary-summary-card">
      <div class="dashboard-kicker">Useful chunks</div>
      <div class="vocabulary-summary-number">{{ counts.chunks }}</div>
      <p class="muted">Real phrases for daily conversation, not just isolated dictionary entries.</p>
    </div>
  </section>

  <section class="card vocabulary-controls-card">
    <div class="vocabulary-controls-top">
      <div>
        <div class="dashboard-kicker">Find fast</div>
        <h2 class="card-title">Search the whole bank</h2>
      </div>
      <div class="vocabulary-filter-row">
        <button type="button" class="vocabulary-filter-btn is-active" data-filter="all">All</button>
        <button type="button" class="vocabulary-filter-btn" data-filter="verbs">Verbs</button>
        <button type="button" class="vocabulary-filter-btn" data-filter="nouns">Nouns</button>
        <button type="button" class="vocabulary-filter-btn" data-filter="adjectives">Adjectives</button>
        <button type="button" class="vocabulary-filter-btn" data-filter="chunks">Chunks</button>
      </div>
    </div>
    <input type="search" id="vocabulary-search" class="form-input" placeholder="Search German, English, pack name, or tag">
  </section>

  {% if core_cards %}
  <section class="vocabulary-section">
    <div class="vocabulary-section-head">
      <div>
        <div class="dashboard-kicker">Start here</div>
        <h2 class="section-title">Core everyday vocabulary</h2>
        <p class="section-subtitle">These are the words and phrases a new learner should see again and again until they feel automatic.</p>
      </div>
    </div>
    <div class="vocabulary-grid">
      {% for item in core_cards %}
      <article class="vocabulary-card" data-category="{{ item.category }}" data-search="{{ item.search_text }}">
        <div class="vocabulary-card-top">
          <span class="pack-emoji">{{ item.pack_emoji }}</span>
          <span class="level-badge">{{ item.level }}</span>
        </div>
        <div class="vocabulary-word">{{ item.de }}</div>
        <div class="vocabulary-meaning">{{ item.en }}</div>
        <div class="vocabulary-pack">{{ item.pack_name }}</div>
        {% if item.examples %}
        <p class="vocabulary-example">{{ item.examples[0].de }}</p>
        <p class="muted">{{ item.examples[0].en }}</p>
        {% endif %}
      </article>
      {% endfor %}
    </div>
  </section>
  {% endif %}

  <section class="vocabulary-section">
    <div class="vocabulary-section-head">
      <div>
        <div class="dashboard-kicker">Full library</div>
        <h2 class="section-title">All visible vocabulary</h2>
        <p class="section-subtitle">Filter by verbs, nouns, adjectives, or chunks. Every card keeps its pack context and one natural example.</p>
      </div>
    </div>
    <div class="vocabulary-grid" id="vocabulary-grid">
      {% for item in phrase_cards %}
      <article class="vocabulary-card" data-category="{{ item.category }}" data-search="{{ item.search_text }}">
        <div class="vocabulary-card-top">
          <span class="register-badge">{{ item.category }}</span>
          <span class="level-badge">{{ item.level }}</span>
        </div>
        <div class="vocabulary-word">{{ item.de }}</div>
        <div class="vocabulary-meaning">{{ item.en }}</div>
        <div class="vocabulary-pack">{{ item.pack_emoji }} {{ item.pack_name }}</div>
        {% if item.usage %}
        <p class="vocabulary-note">{{ item.usage }}</p>
        {% endif %}
        {% if item.examples %}
        <p class="vocabulary-example">{{ item.examples[0].de }}</p>
        <p class="muted">{{ item.examples[0].en }}</p>
        {% endif %}
        {% if item.grammar_note %}
        <p class="vocabulary-mini-grammar">{{ item.grammar_note }}</p>
        {% endif %}
        <a href="/phrase/{{ item.id }}" class="vocabulary-link">Open phrase →</a>
      </article>
      {% endfor %}
    </div>
  </section>
</div>
{% endblock %}

{% block scripts %}
<script>
  (function() {
    const search = document.getElementById("vocabulary-search");
    const buttons = Array.from(document.querySelectorAll(".vocabulary-filter-btn"));
    const cards = Array.from(document.querySelectorAll(".vocabulary-card"));
    if (!search || !buttons.length || !cards.length) return;

    let activeFilter = "all";

    function applyFilters() {
      const query = search.value.trim().toLowerCase();
      cards.forEach((card) => {
        const category = card.dataset.category || "";
        const haystack = card.dataset.search || "";
        const filterMatch = activeFilter === "all" || category === activeFilter;
        const searchMatch = !query || haystack.includes(query);
        card.hidden = !(filterMatch && searchMatch);
      });
    }

    buttons.forEach((button) => {
      button.addEventListener("click", () => {
        activeFilter = button.dataset.filter || "all";
        buttons.forEach((item) => item.classList.toggle("is-active", item === button));
        applyFilters();
      });
    });

    search.addEventListener("input", applyFilters);
  })();
</script>
{% endblock %}