{% extends "base.html" %}
{% load page_extras %}
{% block title %}Suchresultate für {{ suchbegriff }}{% endblock %}
{% block breadcrumb_items %}
<li class="breadcrumb-item"><a href="/search/">Suche</a></li>
<li class="breadcrumb-item active" aria-current="page">Resultate</li>
{% endblock %}

{% block content %}
<div class="row">
  <div class="col-lg-4">
    <!-- Search Form -->
    <div class="card search-form sticky-top" style="top: 1rem;">
      <div class="card-header">
        <h5 class="mb-0">🔍 Suche</h5>
      </div>
      <div class="card-body">
        <form action="/search/" method="post" id="search-form">
          {% csrf_token %}
          
          <!-- Main Search Field -->
          <div class="mb-3">
            <label for="query" class="form-label">Suchbegriff</label>
            <div class="input-group">
              <input type="text"
                     class="form-control"
                     id="query"
                     name="q"
                     placeholder="Suchbegriff eingeben …"
                     value="{{ suchbegriff|default:'' }}"
                     required
                     maxlength="200">
              <button class="btn btn-primary" type="submit">
                Suchen
              </button>
            </div>
          </div>

          <!-- Search Options -->
          <div class="mb-3">
            <label class="form-label">Suchbereiche</label>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" name="search_in" value="standards" id="search-standards" checked>
              <label class="form-check-label" for="search-standards">
                Standards
              </label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" name="search_in" value="geltungsbereich" id="search-geltungsbereich" checked>
              <label class="form-check-label" for="search-geltungsbereich">
                Geltungsbereich
              </label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" name="search_in" value="vorgaben" id="search-vorgaben" checked>
              <label class="form-check-label" for="search-vorgaben">
                Vorgaben
              </label>
            </div>
          </div>

          <button class="btn btn-outline btn-sm w-100" onclick="history.back()">
            ← Zurück zur Suche
          </button>
        </form>
      </div>
    </div>
  </div>

  <div class="col-lg-8">
    <!-- Search Results -->
    <div class="search-results">
      <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>Suchresultate für "{{ suchbegriff }}"</h2>
        <span class="badge bg-primary">
          {% if resultat.geltungsbereich %}
            {{ resultat.geltungsbereich|length }}
          {% endif %}
          {% if resultat.all %}
            {% for standard, vorgaben in resultat.all.items %}
              {{ vorgaben|length }}
            {% endfor %}
          {% endif %}
          Ergebnisse
        </span>
      </div>

      <!-- Geltungsbereich Results -->
      {% if resultat.geltungsbereich %}
      <div class="mb-5">
        <h3 class="h4 mb-3">📋 Standards mit "{{ suchbegriff }}" im Geltungsbereich</h3>
        {% for standard, geltungsbereich in resultat.geltungsbereich.items %}
        <div class="result-item">
          <div class="d-flex justify-content-between align-items-start mb-2">
            <h5 class="mb-1">
              <a href="/dokumente/{{ standard.nummer }}/" class="text-decoration-none">
                {{ standard.nummer }} – {{ standard.name }}
              </a>
            </h5>
            <span class="badge bg-info">Geltungsbereich</span>
          </div>
          {% for typ, html in geltungsbereich %}
          <div class="search-context">{{ html|highlighttext:suchbegriff|safe }}</div>
          {% endfor %}
        </div>
        {% endfor %}
      </div>
      {% endif %}

      <!-- Vorgaben Results -->
      {% if resultat.all %}
      <div class="mb-5">
        <h3 class="h4 mb-3">📝 Vorgaben mit "{{ suchbegriff }}"</h3>
        {% for standard, vorgaben in resultat.all.items %}
        <div class="result-item">
          <div class="d-flex justify-content-between align-items-start mb-3">
            <h5 class="mb-1">
              <a href="/dokumente/{{ standard.nummer }}/" class="text-decoration-none">
                {{ standard }}
              </a>
            </h5>
            <span class="badge bg-success">{{ vorgaben|length }} Vorgaben</span>
          </div>
          <div class="row">
            {% for vorgabe in vorgaben %}
            <div class="col-md-6 mb-2">
              <div class="d-flex align-items-center">
                <span class="badge bg-secondary me-2">{{ vorgabe.Vorgabennummer }}</span>
                <a href="/dokumente/{{ vorgabe.dokument.nummer }}/#{{vorgabe.Vorgabennummer}}" 
                   class="text-decoration-none">
                  {{ vorgabe.titel }}
                </a>
              </div>
            </div>
            {% endfor %}
          </div>
        </div>
        {% endfor %}
      </div>
      {% endif %}

      <!-- No Results -->
      {% if not resultat.geltungsbereich and not resultat.all %}
      <div class="text-center py-5">
        <div class="mb-3">
          <span style="font-size: 3rem;">🔍</span>
        </div>
        <h3 class="text-muted">Keine Resultate für "{{ suchbegriff }}"</h3>
        <p class="text-muted mb-4">
          Es wurden keine Ergebnisse gefunden. Versuchen Sie es mit anderen Suchbegriffen.
        </p>
        <button class="btn btn-primary" onclick="history.back()">
          ← Zurück zur Suche
        </button>
      </div>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}