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

{% block content %}
<div class="page-stories fade-in">

  <div class="stories-header">
    <h1 class="page-title">Stories</h1>
    <p class="stories-subtitle">Read short German stories. Tap highlighted phrases for instant explanations.</p>
  </div>

  {% set a1_stories = story_cards | selectattr("level", "equalto", "A1") | list %}
  {% set a2_stories = story_cards | selectattr("level", "equalto", "A2") | list %}

  {% if a1_stories %}
  <section class="stories-section">
    <h2 class="section-title">A1 — Beginner</h2>
    <div class="stories-grid">
      {% for s in a1_stories %}
      <a href="/stories/{{ s.story_id }}" class="story-card {% if s.is_read %}story-card-read{% endif %}">
        <div class="story-card-emoji">{{ s.cover_emoji }}</div>
        <div class="story-card-body">
          <div class="story-card-title">{{ s.title_de }}</div>
          <div class="story-card-subtitle">{{ s.title_en }}</div>
          <div class="story-card-meta">
            <span class="level-badge">{{ s.level }}</span>
            <span class="story-read-time">{{ s.read_time }} min</span>
            {% if s.is_read %}<span class="story-read-badge">✓ Read</span>{% endif %}
          </div>
          <p class="story-card-situation">{{ s.situation }}</p>
        </div>
      </a>
      {% endfor %}
    </div>
  </section>
  {% endif %}

  {% if a2_stories %}
  <section class="stories-section">
    <h2 class="section-title">A2 — Elementary</h2>
    <div class="stories-grid">
      {% for s in a2_stories %}
      <a href="/stories/{{ s.story_id }}" class="story-card {% if s.is_read %}story-card-read{% endif %}">
        <div class="story-card-emoji">{{ s.cover_emoji }}</div>
        <div class="story-card-body">
          <div class="story-card-title">{{ s.title_de }}</div>
          <div class="story-card-subtitle">{{ s.title_en }}</div>
          <div class="story-card-meta">
            <span class="level-badge level-badge-a2">{{ s.level }}</span>
            <span class="story-read-time">{{ s.read_time }} min</span>
            {% if s.is_read %}<span class="story-read-badge">✓ Read</span>{% endif %}
          </div>
          <p class="story-card-situation">{{ s.situation }}</p>
        </div>
      </a>
      {% endfor %}
    </div>
  </section>
  {% endif %}

  {% if not story_cards %}
  <p class="muted">No stories yet.</p>
  {% endif %}

</div>
{% endblock %}