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

{% block content %}
<div class="page-phrase fade-in">
  <a href="javascript:history.back()" class="back-link">← Back</a>

  <div class="card card-phrase-detail">
    <div class="phrase-detail-top">
      <p class="phrase-detail-de">{{ phrase.de }}</p>
      <p class="phrase-detail-en">{{ phrase.en }}</p>
      {% if phrase.literal %}
      <p class="phrase-detail-literal">Literal: "{{ phrase.literal }}"</p>
      {% endif %}
      <div class="phrase-detail-actions">
        <button class="btn btn-audio" onclick='playAudio({{ audio_url|default("", true)|tojson }}, {{ phrase.de|tojson }})'>▶ Play</button>
        {% if phrase.register %}
        <span class="register-badge">{{ phrase.register }}</span>
        {% endif %}
        {% if phrase.level %}
        <span class="level-badge">{{ phrase.level }}</span>
        {% endif %}
      </div>
    </div>

    {% if phrase.usage %}
    <div class="info-block">
      <strong>When to use</strong>
      <p>{{ phrase.usage }}</p>
    </div>
    {% endif %}

    {% if phrase.grammar_note %}
    <div class="grammar-note">
      <strong>Grammar</strong>
      <p>{{ phrase.grammar_note }}</p>
    </div>
    {% endif %}

    {% if phrase.examples %}
    <div class="info-block">
      <strong>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>Variations</strong>
      {% for v in phrase.variations %}
      <p class="example-de">{{ v.de }}</p>
      <p class="example-en muted">{{ v.en }}</p>
      {% endfor %}
    </div>
    {% endif %}

    {% if phrase.tags %}
    <div class="phrase-tags">
      {% for tag in phrase.tags %}
      <span class="tag">{{ tag }}</span>
      {% endfor %}
    </div>
    {% endif %}

    {% if related_phrases %}
    <div class="info-block">
      <strong>Related phrases</strong>
      <div class="phrase-list">
        {% for related in related_phrases %}
        <a href="/phrase/{{ related.id }}" class="phrase-row">
          <div class="phrase-row-main">
            <span class="phrase-row-de">{{ related.de }}</span>
            <span class="phrase-row-en">{{ related.en }}</span>
          </div>
        </a>
        {% endfor %}
      </div>
    </div>
    {% endif %}

    {% if progress %}
    <div class="info-block progress-info">
      <strong>Your Progress</strong>
      <p>Status: <span class="status-{{ progress.status }}">{{ progress.status }}</span></p>
      <p>Reviews: {{ progress.review_count }}</p>
      {% if progress.due_date %}
      <p>Next due: {{ progress.due_date }}</p>
      {% endif %}
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}