{% extends "base.html" %}
{% block title %}Suche{% endblock %}
{% block breadcrumb_items %}
<li class="breadcrumb-item active" aria-current="page">Suche</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="{{ search_term|default:'' }}"
                     required
                     maxlength="200">
              <button class="btn btn-primary" type="submit">
                Suchen
              </button>
            </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 -->
    {% if search_term %}
    <div class="search-results">
      <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>Suchresultate für "{{ search_term }}"</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>

      <!-- 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 "{{ search_term }}"</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>
    {% else %}
    <!-- Initial Search State -->
    <div class="text-center py-5">
      <div class="mb-4">
        <span style="font-size: 4rem;">🔍</span>
      </div>
      <h2>Willkommen bei der Suche</h2>
      <p class="text-muted mb-4">
        Geben Sie einen Suchbegriff ein, um Standards, Vorgaben und Geltungsbereiche zu durchsuchen.
      </p>
      
      <!-- Quick Search Examples -->
      <div class="row justify-content-center">
        <div class="col-md-8">
          <div class="card">
            <div class="card-header">
              <h6 class="mb-0">Beispielsuchen</h6>
            </div>
            <div class="card-body">
              <div class="row g-2">
                <div class="col-md-4">
                  <button class="btn btn-outline btn-sm w-100 quick-search" data-term="Passwort">
                    🔐 Passwort
                  </button>
                </div>
                <div class="col-md-4">
                  <button class="btn btn-outline btn-sm w-100 quick-search" data-term="Netzwerk">
                    🌐 Netzwerk
                  </button>
                </div>
                <div class="col-md-4">
                  <button class="btn btn-outline btn-sm w-100 quick-search" data-term="Verschlüsselung">
                    🔒 Verschlüsselung
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    {% endif %}
  </div>
</div>

<!-- JavaScript for quick search -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  // Quick search buttons
  const quickSearchButtons = document.querySelectorAll('.quick-search');
  quickSearchButtons.forEach(button => {
    button.addEventListener('click', function() {
      const term = this.dataset.term;
      document.getElementById('query').value = term;
      document.getElementById('search-form').submit();
    });
  });
});
</script>
{% endblock %}