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

{% block content %}
<div class="page-session">

  <!-- Progress bar -->
  <div class="session-progress-bar">
    <div class="session-progress-fill" style="width: {{ (step_num / total * 100) | int }}%"></div>
  </div>
  <div class="session-progress-label">
    <span class="step-tag step-tag-{{ step.type }}">
      {{ copy.steps.get(step.type, copy.steps.complete) }}
    </span>
    <span class="step-counter">{{ step_num }} / {{ total }}</span>
  </div>

  <!-- REVIEW STEP -->
  {% if step.type == "review" %}
  <div class="card fade-in">
    <p class="card-prompt">{{ copy.review_prompt }}</p>
    <p class="card-english">{{ phrase.en }}</p>

    {% if not reveal %}
    <form method="post" action="/session/next" class="answer-form">
      <input type="hidden" name="action" value="reveal">
      <input type="text" name="answer" placeholder="{{ copy.input_placeholder }}" class="answer-input" autocomplete="off" autofocus>
      <button type="submit" class="btn btn-primary">{{ copy.reveal }}</button>
    </form>
    {% else %}
    <div class="reveal-section">
      {% if last_answer %}
      <p class="your-answer">{{ copy.your_answer }}: <em>{{ last_answer }}</em></p>
      {% endif %}
      <p class="correct-answer">{{ phrase.de }}</p>
      <button class="btn btn-audio" onclick='playAudio({{ audio_url|default("", true)|tojson }}, {{ phrase.de|tojson }})'>▶ {{ copy.play }}</button>
      {% if phrase.usage %}
      <p class="usage-note">{{ phrase.usage }}</p>
      {% endif %}
      <div class="session-nav">
        <form method="post" action="/session/next">
          <input type="hidden" name="action" value="previous">
          <button type="submit" class="btn btn-secondary">← {{ copy.previous }}</button>
        </form>
        <div class="rating-row">
          <form method="post" action="/session/next">
            <input type="hidden" name="action" value="again">
            <button type="submit" class="btn btn-rating btn-again">{{ rating_labels.again }}</button>
          </form>
          <form method="post" action="/session/next">
            <input type="hidden" name="action" value="hard">
            <button type="submit" class="btn btn-rating btn-hard">{{ rating_labels.hard }}</button>
          </form>
          <form method="post" action="/session/next">
            <input type="hidden" name="action" value="good">
            <button type="submit" class="btn btn-rating btn-good">{{ rating_labels.good }}</button>
          </form>
          <form method="post" action="/session/next">
            <input type="hidden" name="action" value="easy">
            <button type="submit" class="btn btn-rating btn-easy">{{ rating_labels.easy }}</button>
          </form>
        </div>
      </div>
    </div>
    {% endif %}
  </div>
  {% endif %}

  <!-- LEARN STEP -->
  {% if step.type == "learn" %}
  <div class="card card-learn fade-in">
    <p class="learn-de">{{ phrase.de }}</p>
    <p class="learn-en">{{ phrase.en }}</p>
    {% if phrase.literal %}
    <p class="learn-literal">Literal: "{{ phrase.literal }}"</p>
    {% endif %}
    <button class="btn btn-audio" onclick='playAudio({{ audio_url|default("", true)|tojson }}, {{ phrase.de|tojson }})'>▶ {{ copy.play }}</button>
    <div class="session-autoplay-audio" data-url='{{ audio_url|default("", true) }}' data-text='{{ phrase.de }}'></div>
    {% if phrase.usage %}
    <div class="info-block">
      <strong>{{ copy.usage }}</strong>
      <p>{{ phrase.usage }}</p>
    </div>
    {% endif %}
    {% if phrase.examples %}
    <div class="info-block">
      <strong>{{ copy.examples }}</strong>
      {% for ex in phrase.examples %}
      <p class="example-de">{{ ex.de }}</p>
      <p class="example-en muted">{{ ex.en }}</p>
      {% endfor %}
    </div>
    {% endif %}
    {% if phrase.variations %}
    <div class="info-block">
      <strong>{{ copy.variation }}</strong>
      {% for v in phrase.variations %}
      <p class="example-de">{{ v.de }} <span class="muted">– {{ v.en }}</span></p>
      {% endfor %}
    </div>
    {% endif %}
    {% if phrase.grammar_note %}
    <div class="grammar-note">
      <strong>{{ copy.grammar }}</strong>
      <p>{{ phrase.grammar_note }}</p>
    </div>
    {% endif %}
    <div class="session-nav">
      <form method="post" action="/session/next">
        <input type="hidden" name="action" value="previous">
        <button type="submit" class="btn btn-secondary">← {{ copy.previous }}</button>
      </form>
      <form method="post" action="/session/next">
        <input type="hidden" name="action" value="next">
        <button type="submit" class="btn btn-primary btn-full">{{ copy.learned }} →</button>
      </form>
    </div>
  </div>
  {% endif %}

  {% if step.type == "listening" or step.type == "multiple_choice" or step.type == "drill" %}
  <div class="card fade-in">
    <p class="card-prompt">
      {% if step.type == "listening" %}{{ copy.listening_prompt }}
      {% elif step.type == "multiple_choice" %}{{ copy.choice_prompt }}
      {% else %}{{ exercise.prompt }}{% endif %}
    </p>

    {% if step.type == "listening" %}
    <button class="btn btn-audio" onclick='playAudio({{ audio_url|default("", true)|tojson }}, {{ (phrase.de if phrase else "")|tojson }})'>▶ {{ copy.play }}</button>
    <div class="session-autoplay-audio" data-url='{{ audio_url|default("", true) }}' data-text='{{ phrase.de if phrase else "" }}'></div>
    {% elif step.type == "multiple_choice" %}
    <p class="card-english">{{ exercise.prompt }}</p>
    {% endif %}

    {% if not reveal %}
    <form method="post" action="/session/next" class="answer-form">
      <input type="hidden" name="action" value="check">
      <div class="choice-list">
        {% for choice in exercise.choices %}
        <label class="choice-card">
          <input type="radio" name="answer" value="{{ choice }}" required>
          <span>{{ choice }}</span>
        </label>
        {% endfor %}
      </div>
      <button type="submit" class="btn btn-primary">{{ copy.check }}</button>
    </form>
    {% else %}
    <div class="reveal-section">
      {% if last_answer %}
      <p class="your-answer">{{ copy.your_answer }}: <em>{{ last_answer }}</em></p>
      {% endif %}
      <p class="result-pill {% if last_correct %}result-pill-correct{% else %}result-pill-wrong{% endif %}">
        {% if last_correct %}{{ copy.correct }}{% else %}{{ copy.try_again }}{% endif %}
      </p>
      <p class="correct-answer">{{ exercise.correct_choice }}</p>
      {% if phrase %}
      <p class="usage-note">{{ phrase.de }} — {{ phrase.en }}</p>
      {% endif %}
      {% if exercise.explanation %}
      <p class="usage-note">{{ exercise.explanation }}</p>
      {% endif %}
      <div class="session-nav">
        <form method="post" action="/session/next">
          <input type="hidden" name="action" value="previous">
          <button type="submit" class="btn btn-secondary">← {{ copy.previous }}</button>
        </form>
        <form method="post" action="/session/next">
          <input type="hidden" name="action" value="next">
          <button type="submit" class="btn btn-primary btn-full">{{ copy.continue }} →</button>
        </form>
      </div>
    </div>
    {% endif %}
  </div>
  {% endif %}

  {% if step.type == "dictation" %}
  <div class="card fade-in">
    <p class="card-prompt">{{ copy.dictation_prompt }}</p>
    <button class="btn btn-audio" onclick='playAudio({{ audio_url|default("", true)|tojson }}, {{ phrase.de|tojson }})'>▶ {{ copy.play }}</button>
    <div class="session-autoplay-audio" data-url='{{ audio_url|default("", true) }}' data-text='{{ phrase.de }}'></div>

    {% if not reveal %}
    <form method="post" action="/session/next" class="answer-form">
      <input type="hidden" name="action" value="reveal">
      <input type="text" name="answer" placeholder="{{ copy.input_placeholder }}" class="answer-input" autocomplete="off" autofocus>
      <button type="submit" class="btn btn-primary">{{ copy.submit_answer }}</button>
    </form>
    {% else %}
    <div class="reveal-section">
      {% if last_answer %}
      <p class="your-answer">{{ copy.your_answer }}: <em>{{ last_answer }}</em></p>
      {% endif %}
      <p class="result-pill {% if last_correct %}result-pill-correct{% else %}result-pill-wrong{% endif %}">
        {% if last_correct %}{{ copy.correct }}{% else %}{{ copy.try_again }}{% endif %}
      </p>
      <p class="correct-answer">{{ phrase.de }}</p>
      <p class="usage-note">{{ phrase.en }}</p>
      <div class="session-nav">
        <form method="post" action="/session/next">
          <input type="hidden" name="action" value="previous">
          <button type="submit" class="btn btn-secondary">← {{ copy.previous }}</button>
        </form>
        <form method="post" action="/session/next">
          <input type="hidden" name="action" value="next">
          <button type="submit" class="btn btn-primary btn-full">{{ copy.continue }} →</button>
        </form>
      </div>
    </div>
    {% endif %}
  </div>
  {% endif %}

  <!-- DIALOGUE STEP -->
  {% if step.type == "dialogue" %}
  <div class="card card-dialogue fade-in">
    {% if dialogue %}
    <p class="dialogue-situation">{{ dialogue.situation }}</p>
    <div class="dialogue-chat">
      {% for i, line in dialogue.lines | enumerate %}
      <div class="bubble-row {% if line.speaker == 'Du' %}bubble-right{% else %}bubble-left{% endif %}">
        <span class="bubble-speaker">{{ line.speaker }}</span>
        <div class="bubble">
          <p class="bubble-de">{{ line.de }}</p>
          <p class="bubble-en">{{ line.en }}</p>
          <button class="btn-bubble-audio" onclick='playAudio({{ line_audios[i]|default("", true)|tojson }}, {{ line.de|tojson }})'>▶</button>
        </div>
      </div>
      {% endfor %}
    </div>
    {% else %}
    <p>{{ copy.dialogue_empty }}</p>
    {% endif %}
    <div class="session-nav">
      <form method="post" action="/session/next">
        <input type="hidden" name="action" value="previous">
        <button type="submit" class="btn btn-secondary">← {{ copy.previous }}</button>
      </form>
      <form method="post" action="/session/next">
        <input type="hidden" name="action" value="next">
        <button type="submit" class="btn btn-primary btn-full">{{ copy.continue }} →</button>
      </form>
    </div>
  </div>
  {% endif %}

  <!-- PRODUCE STEP -->
  {% if step.type == "produce" %}
  <div class="card fade-in">
    <p class="card-prompt">{{ copy.produce_prompt }}</p>
    <p class="card-english produce-prompt">{{ phrase.en }}</p>

    {% if not reveal %}
    <form method="post" action="/session/next" class="answer-form">
      <input type="hidden" name="action" value="reveal">
      <input type="text" name="answer" placeholder="{{ copy.input_placeholder }}" class="answer-input" autocomplete="off" autofocus>
      <button type="submit" class="btn btn-primary">{{ copy.check }}</button>
    </form>
    {% else %}
    <div class="reveal-section">
      {% if last_answer %}
      <p class="your-answer">{{ copy.your_answer }}: <em>{{ last_answer }}</em></p>
      {% endif %}
      <p class="correct-answer">{{ phrase.de }}</p>
      <button class="btn btn-audio" onclick='playAudio({{ audio_url|default("", true)|tojson }}, {{ phrase.de|tojson }})'>▶ {{ copy.play }}</button>
      <div class="session-nav">
        <form method="post" action="/session/next">
          <input type="hidden" name="action" value="previous">
          <button type="submit" class="btn btn-secondary">← {{ copy.previous }}</button>
        </form>
        <form method="post" action="/session/next">
          <input type="hidden" name="action" value="next">
          <button type="submit" class="btn btn-primary btn-full">{{ copy.continue }} →</button>
        </form>
      </div>
    </div>
    {% endif %}
  </div>
  {% endif %}

</div>
{% endblock %}

{% block scripts %}
<script>
  // Auto-play audio on audio-first exercises
  document.addEventListener("DOMContentLoaded", () => {
    const autoplayTarget = document.querySelector(".session-autoplay-audio");
    if (autoplayTarget && (document.querySelector(".card-learn") || document.querySelector(".page-session"))) {
      playAudio(autoplayTarget.dataset.url || "", autoplayTarget.dataset.text || "");
    }
  });
</script>
{% endblock %}