{% extends "base.html" %}

{% block title %}
  {% if current_lang == 'de' %}Verlauf: {{ page.metadata.title_de }}{% else %}History: {{ page.metadata.title_en }}{% endif %}
{% endblock %}{% block wrapper_class %}wrapper-edit-mode{% endblock %}

{% block content %}
<div class="card settings-card">
  <h2 style="font-family: var(--font-title); font-size: 1.8rem; font-weight: 700; margin: 0 0 8px 0;">
    {% if current_lang == 'de' %}Verlauf{% else %}History{% endif %}
  </h2>
  <p style="color: var(--text-muted); font-size: 0.9rem; margin: 0;">
    <code>{{ page.slug }}</code> &mdash; {% if current_lang == 'de' %}{{ page.metadata.title_de }}{% else %}{{ page.metadata.title_en }}{% endif %}
  </p>

  {% if preview %}
    <div class="settings-section">
      <h3 class="settings-section-title">
        {% if current_lang == 'de' %}Vorschau einer älteren Version{% else %}Preview of an Older Version{% endif %}
      </h3>
      <div class="settings-section-desc">
        {% if current_lang == 'de' %}Gespeichert am{% else %}Saved on{% endif %}
        <span class="history-date">{{ preview.metadata.updated_at }}</span>
        {% if preview.metadata.updated_by %}
          {% if current_lang == 'de' %}von{% else %}by{% endif %} <code>{{ preview.metadata.updated_by }}</code>
        {% endif %}
      </div>

      <div style="display: flex; gap: 8px; margin: 12px 0;">
        <button type="button" class="btn btn-secondary btn-sm active" id="preview-tab-de" onclick="showPreviewLang('de')">Deutsch 🇩🇪</button>
        <button type="button" class="btn btn-secondary btn-sm" id="preview-tab-en" onclick="showPreviewLang('en')">English 🇬🇧</button>
      </div>

      <div id="preview-pane-de" class="wiki-content" style="border: 1px solid var(--card-border); border-radius: 8px; padding: 16px; margin-bottom: 16px; background-color: var(--bg-secondary);">
        {{ preview.content_de|safe }}
      </div>
      <div id="preview-pane-en" class="wiki-content" style="display: none; border: 1px solid var(--card-border); border-radius: 8px; padding: 16px; margin-bottom: 16px; background-color: var(--bg-secondary);">
        {{ preview.content_en|safe }}
      </div>

      <form action="/history/restore" method="POST" onsubmit="return confirm('{% if current_lang == 'de' %}Diese Version wirklich wiederherstellen? Die aktuelle Version wird zuvor ebenfalls gesichert.{% else %}Really restore this version? The current version will be saved first.{% endif %}')">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
        <input type="hidden" name="slug" value="{{ page.slug }}">
        <input type="hidden" name="timestamp" value="{{ preview_timestamp }}">
        <button type="submit" class="btn btn-primary">
          {% if current_lang == 'de' %}Diese Version wiederherstellen{% else %}Restore This Version{% endif %}
        </button>
      </form>
    </div>
  {% endif %}

  <div class="settings-section" style="margin-bottom: 0;">
    <h3 class="settings-section-title">
      {% if current_lang == 'de' %}Frühere Versionen{% else %}Previous Versions{% endif %}
    </h3>

    {% if history_entries %}
      <div style="display: flex; flex-direction: column; gap: 8px;">
        {% for entry in history_entries %}
          <div style="display: flex; align-items: center; justify-content: space-between; padding: 12px; background-color: var(--bg-secondary); border: 1px solid var(--card-border); border-radius: 6px; {% if entry.timestamp == preview_timestamp %}outline: 2px solid var(--accent-color);{% endif %}">
            <div>
              <span class="history-date" style="font-weight: 600;">{{ entry.updated_at }}</span>
              {% if entry.updated_by %}
                <span style="color: var(--text-muted); font-size: 0.85rem;"> &mdash; <code>{{ entry.updated_by }}</code></span>
              {% endif %}
            </div>
            <div style="display: flex; gap: 8px;">
              <a href="/history/{{ page.slug }}?version={{ entry.timestamp }}" class="btn btn-secondary btn-sm">
                {% if current_lang == 'de' %}Vorschau{% else %}Preview{% endif %}
              </a>
              <form action="/history/restore" method="POST" onsubmit="return confirm('{% if current_lang == 'de' %}Diese Version wirklich wiederherstellen?{% else %}Really restore this version?{% endif %}')" style="margin: 0;">
                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                <input type="hidden" name="slug" value="{{ page.slug }}">
                <input type="hidden" name="timestamp" value="{{ entry.timestamp }}">
                <button type="submit" class="btn btn-danger btn-sm">
                  {% if current_lang == 'de' %}Wiederherstellen{% else %}Restore{% endif %}
                </button>
              </form>
            </div>
          </div>
        {% endfor %}
      </div>
    {% else %}
      <p style="color: var(--text-muted);">
        {% if current_lang == 'de' %}Für diese Seite gibt es noch keine gespeicherten Versionen &ndash; sie entstehen ab der nächsten Änderung.{% else %}No saved versions of this page yet &ndash; they start appearing after the next edit.{% endif %}
      </p>
    {% endif %}
  </div>

  <div style="display: flex; justify-content: flex-end; border-top: 1px solid var(--card-border); padding-top: 16px; margin-top: 20px;">
    <a href="/page/{{ page.slug }}" class="btn btn-secondary">
      {% if current_lang == 'de' %}Zurück zur Seite{% else %}Back to Page{% endif %}
    </a>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  document.querySelectorAll('.history-date').forEach(el => {
    if (!el.textContent) return;
    try {
      const d = new Date(el.textContent);
      el.textContent = d.toLocaleString('{{ current_lang }}');
    } catch (e) {}
  });

  function showPreviewLang(lang) {
    document.getElementById('preview-pane-de').style.display = (lang === 'de') ? '' : 'none';
    document.getElementById('preview-pane-en').style.display = (lang === 'en') ? '' : 'none';
    document.getElementById('preview-tab-de').classList.toggle('active', lang === 'de');
    document.getElementById('preview-tab-en').classList.toggle('active', lang === 'en');
  }
</script>
{% endblock %}