{% extends "base.html" %}
{% block title %}
  {% if pack %}{{ pack.pack_name }}{% else %}Packs{% endif %} – Auf Deutsch
{% endblock %}

{% block content %}

{% if pack %}
<!-- Pack Detail View -->
<div class="page-packs fade-in">
  <div class="pack-detail-header">
    <a href="/packs" class="back-link">← All packs</a>
    <div class="pack-detail-title">
      <span class="pack-emoji-large">{{ pack.cover_emoji }}</span>
      <div>
        <h1>{{ pack.pack_name }}</h1>
        <p class="muted">{{ pack.focus }}</p>
        <span class="level-badge">{{ pack.level }}</span>
        {% if pack.unlocked %}
        <span class="register-badge">Unlocked</span>
        {% else %}
        <span class="register-badge">Locked</span>
        {% endif %}
      </div>
    </div>
  </div>

  <div class="card">
    <div class="dashboard-kicker">Practical outcome</div>
    <p class="pack-can-do">{{ pack.can_do }}</p>
    <p class="muted">{{ pack.situation }}</p>
  </div>

  <div class="card">
    <h2 class="card-title">Pack Progress</h2>
    <div class="progress-bar">
      <div class="progress-fill" style="width: {{ pack.pct }}%"></div>
    </div>
    <p class="muted">{{ pack.learned }}/{{ pack.total }} learned</p>
    {% if pack.blocked_by %}
    <p class="pack-blocked-note">
      Unlock by reaching 70% in:
      {% for prereq in pack.blocked_by %}
      <a href="/packs/{{ prereq.pack_id }}">{{ prereq.pack_name }}</a>{% if not loop.last %}, {% endif %}
      {% endfor %}
    </p>
    {% endif %}

    <div class="pack-detail-actions">
      <a href="/session" class="btn btn-primary">Start session</a>
      {% if pack.quiz_available %}
      <a href="/packs/{{ pack.pack_id }}/quiz" class="btn btn-secondary">Mini-quiz</a>
      {% endif %}
    </div>
    {% if latest_quiz %}
    <p class="muted">Latest quiz: {{ latest_quiz.score }}/{{ latest_quiz.total }} on {{ latest_quiz.date_taken }}</p>
    {% endif %}
  </div>

  {% if next_packs %}
  <div class="card">
    <h2 class="card-title">After this</h2>
    <div class="next-pack-list">
      {% for item in next_packs %}
      <a href="/packs/{{ item.pack_id }}" class="next-pack-row">
        <span class="next-pack-emoji">{{ item.cover_emoji }}</span>
        <span class="next-pack-main">
          <strong>{{ item.pack_name }}</strong>
          <span class="muted">{{ item.can_do }}</span>
        </span>
      </a>
      {% endfor %}
    </div>
  </div>
  {% endif %}

  <div class="phrase-list">
    {% for ph in phrases %}
    <a href="/phrase/{{ ph.id }}" class="phrase-row">
      <div class="phrase-row-main">
        <span class="phrase-row-de">{{ ph.de }}</span>
        <span class="phrase-row-en">{{ ph.en }}</span>
      </div>
      <span class="status-dot status-{{ ph.status }}" title="{{ ph.status }}"></span>
    </a>
    {% endfor %}
  </div>
</div>

{% else %}
<!-- Packs Grid View -->
<div class="page-packs fade-in">
  <h1 class="page-title">Phrase Packs</h1>
  {% if recommended_pack %}
  <div class="card recommended-pack-card">
    <h2 class="card-title">Next Recommended Lesson</h2>
    <p><strong>{{ recommended_pack.pack_name }}</strong></p>
    <p class="muted">{{ recommended_pack.can_do }}</p>
    <a href="/packs/{{ recommended_pack.pack_id }}" class="btn btn-primary">Open pack</a>
  </div>
  {% endif %}
  {% if next_packs %}
  <div class="card">
    <h2 class="card-title">Practical sequence</h2>
    <div class="next-pack-list">
      {% for item in next_packs %}
      <a href="/packs/{{ item.pack_id }}" class="next-pack-row">
        <span class="next-pack-emoji">{{ item.cover_emoji }}</span>
        <span class="next-pack-main">
          <strong>{{ item.pack_name }}</strong>
          <span class="muted">{{ item.can_do }}</span>
        </span>
      </a>
      {% endfor %}
    </div>
  </div>
  {% endif %}
  {% for group in pack_groups %}
  <section class="pack-group-section">
    <div class="pack-group-head">
      <div>
        <div class="dashboard-kicker">{{ group.level_title }}</div>
        <h2 class="section-title">{{ group.title }}</h2>
        {% if group.summary %}
        <p class="section-subtitle">{{ group.summary }}</p>
        {% endif %}
      </div>
    </div>
    <div class="packs-grid">
      {% for pack in group.pack_cards %}
      <a href="/packs/{{ pack.pack_id }}" class="pack-card">
        <div class="pack-emoji">{{ pack.cover_emoji }}</div>
        <div class="pack-info">
          <div class="pack-name">{{ pack.pack_name }}</div>
          <div class="pack-meta">
            <span class="level-badge">{{ pack.level }}</span>
            <span class="pack-count">{{ pack.learned }}/{{ pack.total }}</span>
          </div>
          <div class="pack-lock-copy">{{ pack.can_do }}</div>
          {% if pack.blocked_by %}
          <div class="pack-stage-line">
            <span class="starter-badge starter-badge-muted">Locked</span>
            <span class="pack-stage-detail">Earlier lessons need 70%</span>
          </div>
          {% elif pack.latest_quiz %}
          <div class="pack-stage-line">
            <span class="starter-badge starter-badge-muted">{{ pack.stage_label }}</span>
            <span class="pack-stage-detail">Quiz: {{ pack.latest_quiz.score }}/{{ pack.latest_quiz.total }}</span>
          </div>
          {% else %}
          <div class="pack-stage-line">
            <span class="starter-badge starter-badge-muted">{{ pack.stage_label }}</span>
            <span class="pack-stage-detail">{{ pack.focus }}</span>
          </div>
          {% endif %}
          <div class="progress-bar">
            <div class="progress-fill" style="width: {{ pack.pct }}%"></div>
          </div>
        </div>
      </a>
      {% endfor %}
    </div>
  </section>
  {% endfor %}

  {% if ungrouped_packs %}
  <section class="pack-group-section">
    <div class="pack-group-head">
      <div>
        <div class="dashboard-kicker">Extra packs</div>
        <h2 class="section-title">More practice</h2>
        <p class="section-subtitle">Useful lessons that are loaded but not yet placed in a structured path.</p>
      </div>
    </div>
    <div class="packs-grid">
      {% for pack in ungrouped_packs %}
      <a href="/packs/{{ pack.pack_id }}" class="pack-card">
        <div class="pack-emoji">{{ pack.cover_emoji }}</div>
        <div class="pack-info">
          <div class="pack-name">{{ pack.pack_name }}</div>
          <div class="pack-meta">
            <span class="level-badge">{{ pack.level }}</span>
            <span class="pack-count">{{ pack.learned }}/{{ pack.total }}</span>
          </div>
          <div class="pack-lock-copy">{{ pack.can_do }}</div>
          <div class="pack-stage-line">
            <span class="starter-badge starter-badge-muted">{{ pack.stage_label }}</span>
            <span class="pack-stage-detail">{{ pack.focus }}</span>
          </div>
          <div class="progress-bar">
            <div class="progress-fill" style="width: {{ pack.pct }}%"></div>
          </div>
        </div>
      </a>
      {% endfor %}
    </div>
  </section>
  {% endif %}
</div>
{% endif %}

{% endblock %}