{% extends "base.html" %}
{% load mptt_tags %}
{% block title %}Referenz: {{ referenz.Path }}{% endblock %}
{% block breadcrumb_items %}
<li class="breadcrumb-item"><a href="/referenzen/">Referenzen</a></li>
<li class="breadcrumb-item active" aria-current="page">{{ referenz.Path }}</li>
{% endblock %}

{% block content %}
<div class="row">
  <div class="col-lg-8">
    <!-- Referenz Header -->
    <div class="card mb-4">
      <div class="card-header bg-primary text-white">
        <div class="d-flex justify-content-between align-items-start">
          <div>
            <h1 class="h3 mb-2">🔗 {{ referenz.Path }}</h1>
            {% if referenz.ParentID %}
              <small class="opacity-75">
                <a href="/referenzen/{{ referenz.ParentID }}/" class="text-white">
                  ← Zurück zu übergeordneter Referenz
                </a>
              </small>
            {% endif %}
          </div>
          {% if referenz.url %}
            <a href="{{ referenz.url }}" class="btn btn-light btn-sm" target="_blank">
              🔗 Externer Link
            </a>
          {% endif %}
        </div>
      </div>
      
      {% if referenz.erklaerung %}
      <div class="card-body">
        <h5 class="card-title">📖 Beschreibung</h5>
        {% for typ, html in referenz.erklaerung %}
          {% if html %}
            <div class="content-section">{{ html|safe }}</div>
          {% endif %}
        {% endfor %}
      </div>
      {% endif %}
    </div>

    <!-- Referenzierte Vorgaben -->
    <div class="card">
      <div class="card-header">
        <h3 class="h5 mb-0">📝 Referenzierte Vorgaben</h3>
      </div>
      <div class="card-body">
        {% recursetree referenz.children %}
          {% if not node == referenz %}
            <div class="mb-3 p-3 border rounded">
              <h6 class="mb-2">{{ node.Path }}</h6>
              {% if node.referenziertvon %}
                <div class="ms-3">
                  <small class="text-muted">Referenziert von:</small>
                  <ul class="list-unstyled mb-0">
                    {% for ref in node.referenziertvon %}
                      <li class="mb-1">
                        <a href="/dokumente/{{ ref.dokument.nummer }}/#{{ref.Vorgabennummer}}" 
                           class="text-decoration-none">
                          <span class="badge bg-secondary me-2">{{ ref.Vorgabennummer }}</span>
                          {{ ref.titel }}
                        </a>
                      </li>
                    {% endfor %}
                  </ul>
                </div>
              {% endif %}
            </div>
          {% endif %}
          
          {% if node.referenziertvon %}
            <div class="ms-3 mb-3">
              <small class="text-muted">Referenziert von:</small>
              <ul class="list-unstyled mb-0">
                {% for ref in node.referenziertvon %}
                  <li class="mb-1">
                    <a href="/dokumente/{{ ref.dokument.nummer }}/#{{ref.Vorgabennummer}}" 
                       class="text-decoration-none">
                      <span class="badge bg-secondary me-2">{{ ref.Vorgabennummer }}</span>
                      {{ ref.titel }}
                    </a>
                  </li>
                {% endfor %}
              </ul>
            </div>
          {% endif %}
          
          {% if not node.is_leaf_node %}
            <div class="ms-3">
              {{ children }}
            </div>
          {% endif %}
        {% endrecursetree %}
      </div>
    </div>
  </div>

  <!-- Sidebar -->
  <div class="col-lg-4">
    <!-- Quick Actions -->
    <div class="card mb-4 sticky-top" style="top: 1rem;">
      <div class="card-header">
        <h5 class="mb-0">⚡ Aktionen</h5>
      </div>
      <div class="card-body">
        <div class="d-grid gap-2">
          {% if referenz.ParentID %}
            <a href="/referenzen/{{ referenz.ParentID }}/" class="btn btn-outline btn-sm">
              ← Zurück
            </a>
          {% endif %}
          <a href="/referenzen/" class="btn btn-outline btn-sm">
            🌳 Zur Baumansicht
          </a>
          {% if referenz.url %}
            <a href="{{ referenz.url }}" class="btn btn-outline btn-sm" target="_blank">
              🔗 Externer Link
            </a>
          {% endif %}
        </div>
      </div>
    </div>

    <!-- Statistics -->
    <div class="card mb-4">
      <div class="card-header">
        <h5 class="mb-0">📊 Informationen</h5>
      </div>
      <div class="card-body">
        <div class="mb-3">
          <small class="text-muted">Referenz-ID</small>
          <p class="mb-0 fw-bold">{{ referenz.id }}</p>
        </div>
        {% if referenz.ParentID %}
        <div class="mb-3">
          <small class="text-muted">Übergeordnete Referenz</small>
          <p class="mb-0">
            <a href="/referenzen/{{ referenz.ParentID }}/" class="text-decoration-none">
              ID: {{ referenz.ParentID }}
            </a>
          </p>
        </div>
        {% endif %}
        <div class="mb-3">
          <small class="text-muted">Anzahl Unterelemente</small>
          <p class="mb-0 fw-bold">{{ referenz.get_children.count }}</p>
        </div>
      </div>
    </div>

    <!-- Navigation Help -->
    <div class="card">
      <div class="card-header">
        <h5 class="mb-0">💡 Hinweise</h5>
      </div>
      <div class="card-body">
        <ul class="small mb-0">
          <li>Diese Seite zeigt Details zur ausgewählten Referenz</li>
          <li>Verknüpfte Vorgaben sind direkt verlinkt</li>
          <li>Nutzen Sie die Baumansicht für die Übersicht</li>
        </ul>
      </div>
    </div>
  </div>
</div>

<style>
.content-section {
  line-height: 1.6;
  margin-bottom: 1rem;
}

.content-section h1, .content-section h2, .content-section h3 {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

.border {
  border-color: var(--border-color) !important;
}

.badge {
  font-size: 0.75rem;
}
</style>
{% endblock %}