{% extends "base.html" %}
{% block title %}Stichwort: {{ stichwort.stichwort }}{% endblock %}
{% block breadcrumb_items %}
<li class="breadcrumb-item"><a href="/stichworte/">Stichworte</a></li>
<li class="breadcrumb-item active" aria-current="page">{{ stichwort.stichwort }}</li>
{% endblock %}

{% block content %}
<div class="row">
  <div class="col-lg-8">
    <!-- Stichwort Header -->
    <div class="card mb-4">
      <div class="card-header bg-primary text-white">
        <h1 class="h3 mb-0">🏷️ {{ stichwort.stichwort }}</h1>
      </div>
      
      {% if stichwort.erklaerung %}
      <div class="card-body">
        <h5 class="card-title">📖 Beschreibung</h5>
        {% for typ, html in stichwort.erklaerung %}
          {% if html %}
            <div class="content-section">{{ html|safe }}</div>
          {% endif %}
        {% endfor %}
      </div>
      {% endif %}
    </div>

    <!-- Relevante Vorgaben -->
    <div class="card">
      <div class="card-header">
        <div class="d-flex justify-content-between align-items-center">
          <h3 class="h5 mb-0">📝 Relevante Vorgaben</h3>
          <span class="badge bg-success">
            {% for vorgabe in stichwort.vorgaben %}
              {% if vorgabe.get_status == "active" %}
                {% if forloop.first %}1{% else %}{{ forloop.counter }}{% endif %}
              {% endif %}
            {% endfor %}
            Aktiv
          </span>
        </div>
      </div>
      <div class="card-body">
        {% if stichwort.vorgaben %}
          <div class="list-group">
            {% for vorgabe in stichwort.vorgaben %}
              {% if vorgabe.get_status == "active" %}
                <div class="list-group-item">
                  <div class="d-flex align-items-start">
                    <span class="badge bg-secondary me-3">{{ vorgabe.Vorgabennummer }}</span>
                    <div class="flex-grow-1">
                      <h6 class="mb-1">
                        <a href="/dokumente/{{ vorgabe.dokument.nummer }}/#{{vorgabe.Vorgabennummer}}" 
                           class="text-decoration-none">
                          {{ vorgabe.titel }}
                        </a>
                      </h6>
                      <small class="text-muted">
                        Standard: {{ vorgabe.dokument.nummer }} – {{ vorgabe.dokument.name }}
                      </small>
                    </div>
                  </div>
                </div>
              {% endif %}
            {% endfor %}
          </div>
        {% else %}
          <div class="text-center py-4">
            <p class="text-muted mb-0">
              Keine aktiven Vorgaben für dieses Stichwort gefunden.
            </p>
          </div>
        {% endif %}
      </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">
          <a href="/stichworte/" class="btn btn-outline btn-sm">
            ← Zurück zur Liste
          </a>
          <a href="/search/?q={{ stichwort.stichwort }}" class="btn btn-outline btn-sm">
            🔍 Nach "{{ stichwort.stichwort }}" suchen
          </a>
        </div>
      </div>
    </div>

    <!-- Statistics -->
    <div class="card mb-4">
      <div class="card-header">
        <h5 class="mb-0">📊 Statistiken</h5>
      </div>
      <div class="card-body">
        <div class="row text-center">
          <div class="col-6">
            <h4 class="text-primary mb-1">
              {% for vorgabe in stichwort.vorgaben %}
                {% if vorgabe.get_status == "active" %}
                  {% if forloop.first %}1{% else %}{{ forloop.counter }}{% endif %}
                {% endif %}
              {% endfor %}
            </h4>
            <small class="text-muted">Aktive Vorgaben</small>
          </div>
          <div class="col-6">
            <h4 class="text-info mb-1">
              {{ stichwort.vorgaben|length }}
            </h4>
            <small class="text-muted">Gesamt</small>
          </div>
        </div>
      </div>
    </div>

    <!-- Related Stichworte -->
    {% if related_stichworte %}
    <div class="card">
      <div class="card-header">
        <h5 class="mb-0">🔗 Verwandte Stichworte</h5>
      </div>
      <div class="card-body">
        <div class="d-flex flex-wrap gap-2">
          {% for related in related_stichworte %}
            <a href="/stichworte/{{ related.stichwort }}/" 
               class="badge bg-light text-dark text-decoration-none">
              {{ related.stichwort }}
            </a>
          {% endfor %}
        </div>
      </div>
    </div>
    {% endif %}
  </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;
}

.list-group-item {
  border: none;
  border-bottom: 1px solid var(--border-color);
  transition: all var(--transition-fast);
}

.list-group-item:hover {
  background-color: var(--bg-secondary);
}

.list-group-item:last-child {
  border-bottom: none;
}

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