{% extends "base.html" %}
{% block title %}{{ standard.nummer }} – {{ standard.name }}{% endblock %}
{% block breadcrumb_items %}
<li class="breadcrumb-item"><a href="{% url 'standard_list' %}">Standards</a></li>
<li class="breadcrumb-item active" aria-current="page">{{ standard.nummer }}</li>
{% endblock %}

{% block content %}
<div class="row">
  <!-- Main Content -->
  <div class="col-lg-8">
    <!-- Standard 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="h2 mb-2">{{ standard.nummer }} – {{ standard.name }}</h1>
            {% if standard.history == True %}
            <p class="mb-0 opacity-75">Version vom {{ standard.check_date|date:"d.m.Y" }}</p>
            {% endif %}
          </div>
          <div class="d-flex gap-2">
            {% if not standard.aktiv %}
              <span class="badge bg-danger">Inaktiv</span>
            {% else %}
              <span class="badge bg-success">Aktiv</span>
            {% endif %}
          </div>
        </div>
      </div>
      <div class="card-body">
        <div class="row">
          <div class="col-md-6">
            <h6 class="text-muted mb-2">📅 Gültigkeit</h6>
            <p class="mb-3">
              <strong>Von:</strong> {{ standard.gueltigkeit_von|default_if_none:"-" }}<br>
              <strong>Bis:</strong> {{ standard.gueltigkeit_bis|default_if_none:"Auf weiteres" }}
            </p>
          </div>
          <div class="col-md-6">
            <h6 class="text-muted mb-2">👥 Verantwortlich</h6>
            {% if standard.autoren.all %}
            <p class="mb-1"><strong>Autoren:</strong><br>
              {% for autor in standard.autoren.all %}
                <span class="badge bg-light text-dark me-1">{{ autor }}</span>
              {% endfor %}
            </p>
            {% endif %}
            {% if standard.pruefende.all %}
            <p class="mb-3"><strong>Prüfende:</strong><br>
              {% for pruefender in standard.pruefende.all %}
                <span class="badge bg-light text-dark me-1">{{ pruefender }}</span>
              {% endfor %}
            </p>
            {% endif %}
          </div>
        </div>
        
        <div class="d-flex gap-2">
          <a href="{% url 'standard_json' standard.nummer %}" class="btn btn-outline btn-sm" download="{{ standard.nummer }}.json">
            📄 JSON herunterladen
          </a>
          <button class="btn btn-outline btn-sm" onclick="window.print()">
            🖨️ Drucken
          </button>
        </div>
      </div>
    </div>

    <!-- Table of Contents -->
    <div class="toc mb-4" id="table-of-contents">
      <h3>📋 Inhaltsverzeichnis</h3>
      <ul class="list-unstyled">
        {% if standard.einleitung_html %}
        <li><a href="#einleitung">Einleitung</a></li>
        {% endif %}
        {% if standard.geltungsbereich_html %}
        <li><a href="#geltungsbereich">Geltungsbereich</a></li>
        {% endif %}
        <li><a href="#vorgaben">Vorgaben ({{ vorgaben|length }})</a>
          <ul class="ms-3 mt-1">
            {% for vorgabe in vorgaben %}
              {% if standard.history == True or vorgabe.long_status == "active" %}
                <li><a href="#{{ vorgabe.Vorgabennummer }}">{{ vorgabe.Vorgabennummer }} – {{ vorgabe.titel|truncatechars:50 }}</a></li>
              {% endif %}
            {% endfor %}
          </ul>
        </li>
      </ul>
    </div>

    <!-- Einleitung -->
    {% if standard.einleitung_html %}
    <section id="einleitung" class="mb-5">
      <div class="card">
        <div class="card-header">
          <h2 class="h4 mb-0">📖 Einleitung</h2>
        </div>
        <div class="card-body">
          {% for typ, html in standard.einleitung_html %}
          <div class="content-section">{{ html|safe }}</div>
          {% endfor %}
        </div>
      </div>
    </section>
    {% endif %}

    <!-- Geltungsbereich -->
    {% if standard.geltungsbereich_html %}
    <section id="geltungsbereich" class="mb-5">
      <div class="card">
        <div class="card-header">
          <h2 class="h4 mb-0">🎯 Geltungsbereich</h2>
        </div>
        <div class="card-body">
          {% for typ, html in standard.geltungsbereich_html %}
          <div class="content-section">{{ html|safe }}</div>
          {% endfor %}
        </div>
      </div>
    </section>
    {% endif %}

    <!-- Vorgaben -->
    <section id="vorgaben" class="mb-5">
      <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="h4 mb-0">📝 Vorgaben</h2>
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-outline btn-sm" onclick="toggleAllVorgaben(true)">Alle ausklappen</button>
          <button type="button" class="btn btn-outline btn-sm" onclick="toggleAllVorgaben(false)">Alle einklappen</button>
        </div>
      </div>

      {% for vorgabe in vorgaben %}
      {% if standard.history == True or vorgabe.long_status == "active" %}
      <div class="card mb-4 vorgabe-card" id="{{ vorgabe.Vorgabennummer }}">
        <div class="card-header {% if vorgabe.long_status == "active" %}bg-success text-white{% else %}bg-secondary text-white{% endif %}" 
             style="cursor: pointer;" 
             onclick="toggleVorgabe('{{ vorgabe.Vorgabennummer }}')">
          <div class="d-flex justify-content-between align-items-center">
            <div class="d-flex align-items-center">
              <span class="toggle-icon me-2">▼</span>
              <h3 class="h5 m-0">
                {{ vorgabe.Vorgabennummer }} – {{ vorgabe.titel }}
                {% if vorgabe.long_status != "active" and standard.history == True %}
                  <span class="badge bg-warning text-dark ms-2">{{ vorgabe.long_status }}</span>
                {% endif %}
              </h3>
            </div>
            <div class="d-flex gap-2">
              {% if vorgabe.relevanzset %}
              <span class="badge bg-light text-dark">
                🔥 {{ vorgabe.relevanzset|join:", " }}
              </span>
              {% endif %}
              {% if vorgabe.thema %}
              <span class="badge bg-info">{{ vorgabe.thema }}</span>
              {% endif %}
            </div>
          </div>
        </div>

        <div class="card-body vorgabe-content" id="content-{{ vorgabe.Vorgabennummer }}">
          <!-- Kurztext -->
          {% if vorgabe.kurztext_html.0.1 %}
          <div class="alert alert-info mb-3">
            <h6 class="alert-heading">📌 Kurztext</h6>
            {% for typ, html in vorgabe.kurztext_html %}
              {% if html %}
                <div class="mb-2">{{ html|safe }}</div>
              {% endif %}
            {% endfor %}
          </div>
          {% endif %}

          <!-- Langtext -->
          <div class="mb-4">
            {% for typ, html in vorgabe.langtext_html %}
              {% if html %}
                <div class="content-section mb-3">{{ html|safe }}</div>
              {% endif %}
            {% endfor %}
          </div>

          <!-- Checklistenfragen -->
          <div class="mb-4">
            <h6 class="mb-3">✅ Checklistenfragen</h6>
            {% if vorgabe.checklistenfragen.all %}
              <div class="list-group">
                {% for frage in vorgabe.checklistenfragen.all %}
                  <div class="list-group-item">
                    <div class="d-flex align-items-start">
                      <input type="checkbox" class="form-check-input me-2 mt-1" id="check-{{ forloop.counter }}">
                      <label class="form-check-label" for="check-{{ forloop.counter }}">
                        {{ frage.frage }}
                      </label>
                    </div>
                  </div>
                {% endfor %}
              </div>
            {% else %}
              <p class="text-muted"><em>Keine Checklistenfragen vorhanden</em></p>
            {% endif %}
          </div>

          <!-- Metadaten -->
          <div class="border-top pt-3">
            <div class="row">
              <div class="col-md-6">
                <h6 class="text-muted mb-2">🏷️ Stichworte</h6>
                {% if vorgabe.stichworte.all %}
                  <div>
                    {% for s in vorgabe.stichworte.all %}
                      <a href="{% url 'stichwort_detail' stichwort=s %}" class="badge bg-light text-dark text-decoration-none me-1 mb-1">
                        {{ s }}
                      </a>
                    {% endfor %}
                  </div>
                {% else %}
                  <p class="text-muted small mb-0">Keine Stichworte</p>
                {% endif %}
              </div>
              <div class="col-md-6">
                <h6 class="text-muted mb-2">🔗 Referenzen</h6>
                {% if vorgabe.referenzpfade %}
                  <div class="small">
                    {% for ref in vorgabe.referenzpfade %}
                      <div class="mb-1">{{ ref|safe }}</div>
                    {% endfor %}
                  </div>
                {% else %}
                  <p class="text-muted small mb-0">Keine Referenzen</p>
                {% endif %}
              </div>
            </div>
          </div>
        </div>
      </div>
      {% endif %}
      {% endfor %}
    </section>
  </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">⚡ Schnellaktionen</h5>
      </div>
      <div class="card-body">
        <div class="d-grid gap-2">
          <button class="btn btn-outline btn-sm" onclick="scrollToSection('einleitung')">
            📖 Zur Einleitung
          </button>
          <button class="btn btn-outline btn-sm" onclick="scrollToSection('geltungsbereich')">
            🎯 Zum Geltungsbereich
          </button>
          <button class="btn btn-outline btn-sm" onclick="scrollToSection('vorgaben')">
            📝 Zu den Vorgaben
          </button>
          <hr>
          <a href="{% url 'standard_list' %}" class="btn btn-outline btn-sm">
            ← Zurück zur Liste
          </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">
            <div class="border-end">
              <h4 class="text-primary mb-1">{{ vorgaben|length }}</h4>
              <small class="text-muted">Vorgaben</small>
            </div>
          </div>
          <div class="col-6">
            <h4 class="text-success mb-1">
              {% for vorgabe in vorgaben %}
                {% if vorgabe.long_status == "active" %}
                  {% if forloop.first %}1{% else %}{{ forloop.counter }}{% endif %}
                {% endif %}
              {% endfor %}
            </h4>
            <small class="text-muted">Aktiv</small>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- JavaScript -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  // Update active TOC item on scroll
  const sections = document.querySelectorAll('section[id]');
  const tocLinks = document.querySelectorAll('.toc a');
  
  function updateActiveTOC() {
    let current = '';
    sections.forEach(section => {
      const sectionTop = section.offsetTop;
      const sectionHeight = section.clientHeight;
      if (pageYOffset >= sectionTop - 100) {
        current = section.getAttribute('id');
      }
    });
    
    tocLinks.forEach(link => {
      link.classList.remove('active');
      if (link.getAttribute('href') === '#' + current) {
        link.classList.add('active');
      }
    });
  }
  
  window.addEventListener('scroll', updateActiveTOC);
  updateActiveTOC();
});

function toggleVorgabe(vorgabeId) {
  const content = document.getElementById('content-' + vorgabeId);
  const icon = document.querySelector('#' + vorgabeId + ' .toggle-icon');
  
  if (content.style.display === 'none') {
    content.style.display = 'block';
    icon.textContent = '▼';
  } else {
    content.style.display = 'none';
    icon.textContent = '▶';
  }
}

function toggleAllVorgaben(expand) {
  const contents = document.querySelectorAll('.vorgabe-content');
  const icons = document.querySelectorAll('.toggle-icon');
  
  contents.forEach(content => {
    content.style.display = expand ? 'block' : 'none';
  });
  
  icons.forEach(icon => {
    icon.textContent = expand ? '▼' : '▶';
  });
}

function scrollToSection(sectionId) {
  const element = document.getElementById(sectionId);
  if (element) {
    element.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }
}
</script>

<style>
.content-section {
  line-height: 1.6;
}

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

.content-section ul, .content-section ol {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

.content-section li {
  margin-bottom: 0.5rem;
}

.vorgabe-card {
  transition: all 0.2s ease;
}

.vorgabe-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.toc a.active {
  background-color: var(--primary-color);
  color: white;
}

@media print {
  .vorgabe-content {
    display: block !important;
  }
  .toggle-icon {
    display: none !important;
  }
}
</style>
{% endblock %}