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

{% block content %}
<div class="page-home">
  {% if show_reminder_banner %}
  <div class="reminder-banner" id="reminder-banner">
    <span class="reminder-banner-text">Your {{ reminder_time }} reminder is ready.</span>
    <a href="/session" class="reminder-banner-link">Start now</a>
    <button class="reminder-banner-close" onclick="this.closest('.reminder-banner').remove()" aria-label="Dismiss">×</button>
  </div>
  {% endif %}

  {% if not has_content %}
  <div class="card setup-card fade-in">
    <div class="setup-emoji">📂</div>
    <h2 class="setup-title">Keine Inhalte gefunden</h2>
    <p class="setup-body">
      No phrase packs found in <code>content/packs/</code>.<br>
      Check the project README for setup instructions.
    </p>
  </div>
  {% else %}

  <section class="home-hero fade-in">
    <div class="home-hero-copy">
      <div class="home-kicker">{{ greeting_de }}</div>
      <h1 class="home-title">Learn German without getting overwhelmed.</h1>
      <p class="home-subtitle">
        {% if all_done %}
        You finished today’s core session. Keep it light from here.
        {% else %}
        Today is just one short session: {{ due_count }} review, {{ new_count }} new, about {{ estimated_minutes }} minutes.
        {% endif %}
      </p>
      <div class="home-level-line">
        <span class="home-level-pill">Level {{ selected_level }}</span>
        <span class="home-goal-pill">{{ daily_goal }} min goal</span>
        <span class="home-goal-pill">{{ weekly_snapshot.active_days }}/{{ weekly_snapshot.target_days }} days this week</span>
      </div>
    </div>

    <div class="home-focus-card">
      <div class="home-focus-label">Today</div>
      <div class="home-focus-title">{% if all_done %}You are done for today{% else %}Start today’s session{% endif %}</div>
      <p class="home-focus-copy">
        {% if all_done %}
        If you want a little more, read a short story or do one extra review round.
        {% elif recommended_pack %}
        Focus lesson: <strong>{{ recommended_pack.pack_name }}</strong>. {{ recommended_pack.can_do }}
        {% else %}
        A short focused session is enough. You do not need to do everything today.
        {% endif %}
      </p>
      <div class="home-focus-actions">
        <a href="/session" class="btn btn-primary btn-large">Start session</a>
        {% if all_done and next_story %}
        <a href="/stories/{{ next_story.story_id }}" class="btn btn-secondary">Read story</a>
        {% elif recommended_pack %}
        <a href="/packs/{{ recommended_pack.pack_id }}" class="btn btn-secondary">Open lesson</a>
        {% endif %}
      </div>
    </div>
  </section>

  <section class="home-secondary-grid fade-in">
    {% if recommended_pack %}
    <a href="/packs/{{ recommended_pack.pack_id }}" class="home-secondary-card">
      <div class="home-secondary-label">Next lesson</div>
      <div class="home-secondary-title">{{ recommended_pack.cover_emoji }} {{ recommended_pack.pack_name }}</div>
      <p class="home-secondary-copy">{{ recommended_pack.can_do }}</p>
      <span class="home-secondary-link">Open lesson</span>
    </a>
    {% endif %}

    {% if next_story %}
    <a href="/stories/{{ next_story.story_id }}" class="home-secondary-card">
      <div class="home-secondary-label">Short reading</div>
      <div class="home-secondary-title">{{ next_story.cover_emoji }} {{ next_story.title_de }}</div>
      <p class="home-secondary-copy">{{ next_story.read_time }} minute story for easy context practice.</p>
      <span class="home-secondary-link">Read story</span>
    </a>
    {% elif weak_phrases %}
    <a href="/phrase/{{ weak_phrases[0].id }}" class="home-secondary-card">
      <div class="home-secondary-label">Quick review</div>
      <div class="home-secondary-title">{{ weak_phrases[0].de }}</div>
      <p class="home-secondary-copy">{{ weak_phrases[0].en }}</p>
      <span class="home-secondary-link">Review phrase</span>
    </a>
    {% endif %}
  </section>

  <div class="home-footer-strip card fade-in">
    <div>
      <div class="home-footer-label">Consistency</div>
      <div class="home-footer-title">{{ weekly_snapshot.status }}</div>
      <p class="home-footer-copy">{{ habit_hint }}</p>
    </div>
    <div class="home-footer-links">
      <a href="/packs" class="text-link">All lessons</a>
      <a href="/stories" class="text-link">Stories</a>
      <a href="/progress" class="text-link">Progress</a>
    </div>
  </div>

  {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script>
  const _notifEnabled = {{ notifications_enabled | tojson }} === "true";
  const _reminderTime = {{ reminder_time | tojson }};
  const _sessionDone  = {{ session_done_today | tojson }};
  if (_notifEnabled && "Notification" in window) {
    Notification.requestPermission();
  }
</script>
{% endblock %}