{% extends "base.html" %}

{% block title %}
  {% if current_lang == 'de' %}{{ page.metadata.title_de }}{% else %}{{ page.metadata.title_en }}{% endif %}
{% endblock %}

{% set active_slug = page.slug %}

{% block header_meta %}{% endblock %}

{% block content %}
  <article class="card">
    {% if breadcrumbs %}
      <nav class="breadcrumbs" style="display: flex; gap: 8px; align-items: center; margin-bottom: 16px; font-size: 0.9rem; color: var(--text-muted); flex-wrap: wrap;">
        <a href="/" style="color: var(--text-muted); font-weight: 500;">Home</a>
        <span style="user-select: none;">&rsaquo;</span>
        {% for bc in breadcrumbs %}
          <a href="/page/{{ bc.slug }}" style="color: var(--text-muted); font-weight: 500;">{{ bc.title }}</a>
          <span style="user-select: none;">&rsaquo;</span>
        {% endfor %}
      </nav>
    {% endif %}

    {% if page.metadata.title_image and page.metadata.title_image_pos == 'above' %}
      <div class="title-banner" style="width: 100%; height: 180px; overflow: hidden; border-radius: 12px; margin-bottom: 20px; border: 1px solid var(--card-border);">
        <img src="{{ page.metadata.title_image }}" alt="Title Banner" style="width: 100%; height: 100%; object-fit: cover;">
      </div>
    {% endif %}

    <div class="page-header-container">
      <div class="page-header-title-wrapper">
        <h1 class="page-header-title" style="display: flex; align-items: center; gap: 12px; flex-wrap: wrap;">
          {% if page.metadata.title_image and (page.metadata.title_image_pos == 'left' or not page.metadata.title_image_pos) %}
            <img src="{{ page.metadata.title_image }}" alt="Title Image" style="height: 44px; width: auto; object-fit: contain; border-radius: 4px;">
          {% endif %}
          
          <span>{% if current_lang == 'de' %}{{ page.metadata.title_de }}{% else %}{{ page.metadata.title_en }}{% endif %}</span>
          
          {% if page.metadata.title_image and page.metadata.title_image_pos == 'right' %}
            <img src="{{ page.metadata.title_image }}" alt="Title Image" style="height: 44px; width: auto; object-fit: contain; border-radius: 4px;">
          {% endif %}
        </h1>
      </div>
      
      {% if logged_in %}
        <div class="page-header-actions">
          <!-- Access level indicator left of Edit button -->
          <span class="badge {% if page.metadata.access == 'internal' %}badge-internal{% else %}badge-external{% endif %}" style="padding: 8px 14px; font-size: 0.85rem; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 8px; font-weight: 600;">
            {% if page.metadata.access == 'internal' %}
              <svg style="width: 16px; height: 16px; flex-shrink: 0;" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
              </svg>
              {% if current_lang == 'de' %}Intern{% else %}Internal{% endif %}
            {% else %}
              <svg style="width: 16px; height: 16px; flex-shrink: 0;" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"></path>
              </svg>
              {% if current_lang == 'de' %}Extern{% else %}External{% endif %}
            {% endif %}
          </span>
          

          <a href="/history/{{ page.slug }}" class="btn btn-secondary">
            <svg style="width: 16px; height: 16px;" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            {% if current_lang == 'de' %}Verlauf{% else %}History{% endif %}
          </a>

          <a href="/edit/{{ page.slug }}" class="btn btn-secondary">
            <svg style="width: 16px; height: 16px;" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>
            </svg>
            {% if current_lang == 'de' %}Bearbeiten{% else %}Edit{% endif %}
          </a>
          
          {% if page.slug != 'home' and page.slug != 'impressum' %}
            <form action="/delete/{{ page.slug }}" method="POST" onsubmit="return confirm('{% if current_lang == 'de' %}Möchten Sie diese Seite wirklich löschen?{% else %}Are you sure you want to delete this page?{% endif %}');">
              <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
              <button type="submit" class="btn btn-danger">
                <svg style="width: 16px; height: 16px;" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                </svg>
                {% if current_lang == 'de' %}Löschen{% else %}Delete{% endif %}
              </button>
            </form>
          {% endif %}
        </div>
      {% endif %}
    </div>

    <!-- Draft notice: only editors ever get to see this page at all -->
    {% if page.metadata.draft %}
      <div style="font-size: 0.9rem; color: #854d0e; background-color: #faf0d8; border: 1px solid #e2d1a7; padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-weight: 600; line-height: 1.4;">
        {% if current_lang == 'de' %}<strong>Entwurf</strong> — diese Seite ist gespeichert, aber nicht veröffentlicht. Leser sehen sie weder in der Navigation noch in der Suche.{% else %}<strong>Draft</strong> — this page is saved, but not published. Readers see it neither in the navigation nor in the search.{% endif %}
      </div>
    {% endif %}

    <!-- Wiki rendered content -->
    <div class="wiki-content">
      {{ html_content|safe }}
    </div>

    <!-- Page Metadata info -->
    <div class="meta-info-grid">
      <div class="meta-info-item">
        <span class="meta-info-label">{% if current_lang == 'de' %}Seite{% else %}Page{% endif %}</span>
        <span class="meta-info-val"><code>{{ page.slug }}</code></span>
      </div>
      <div class="meta-info-item">
        <span class="meta-info-label">{% if current_lang == 'de' %}Erstellt{% else %}Created{% endif %}</span>
        <span class="meta-info-val" id="created-date">{{ page.metadata.created_at }}</span>
      </div>
      <div class="meta-info-item">
        <span class="meta-info-label">{% if current_lang == 'de' %}Zuletzt geändert{% else %}Last Updated{% endif %}</span>
        <span class="meta-info-val" id="updated-date">{{ page.metadata.updated_at }}</span>
      </div>
      {% if page.metadata.updated_by %}
      <div class="meta-info-item">
        <span class="meta-info-label">{% if current_lang == 'de' %}Bearbeitet von{% else %}Updated By{% endif %}</span>
        <span class="meta-info-val"><code>{{ page.metadata.updated_by }}</code></span>
      </div>
      {% endif %}
    </div>
  </article>
{% endblock %}

{% block scripts %}
<script>
  // Clean dates to local string format
  const formatDates = () => {
    const createdEl = document.getElementById('created-date');
    const updatedEl = document.getElementById('updated-date');
    
    if (createdEl && createdEl.textContent) {
      try {
        const d = new Date(createdEl.textContent);
        createdEl.textContent = d.toLocaleString('{{ current_lang }}');
      } catch(e) {}
    }
    if (updatedEl && updatedEl.textContent) {
      try {
        const d = new Date(updatedEl.textContent);
        updatedEl.textContent = d.toLocaleString('{{ current_lang }}');
      } catch(e) {}
    }
  };
  formatDates();

  // Open all external links in a new tab, and internal links in the same tab
  const processLinks = () => {
    document.querySelectorAll('.wiki-content a').forEach(link => {
      const href = link.getAttribute('href');
      const isExternal = href && (href.startsWith('http://') || href.startsWith('https://')) && !href.includes(window.location.hostname);
      if (isExternal) {
        link.setAttribute('target', '_blank');
        link.setAttribute('rel', 'noopener noreferrer');
      } else {
        link.removeAttribute('target');
        link.removeAttribute('rel');
      }
    });
  };
  processLinks();


</script>
{% endblock %}