{% extends "base.html" %}
{% block title %}Startseite - Vorgaben Informatiksicherheit BIT{% endblock %}

{% block content %}
<!-- Hero Section -->
<div class="card bg-primary text-white mb-5">
  <div class="card-body text-center py-5">
    <h1 class="display-4 mb-3">🔒 Vorgaben Informatiksicherheit BIT</h1>
    <p class="lead mb-4">
      Zentraler Zugang zu allen Sicherheitsstandards, Vorgaben und Richtlinien des Bundesamtes für Informatik
    </p>
    <div class="d-flex justify-content-center gap-3">
      <a href="/dokumente/" class="btn btn-light btn-lg">
        📋 Standards durchsuchen
      </a>
      <a href="/search/" class="btn btn-outline-light btn-lg">
        🔍 Volltextsuche
      </a>
    </div>
  </div>
</div>

<!-- Statistics Dashboard -->
<div class="row mb-5">
  <div class="col-lg-3 col-md-6 mb-4">
    <div class="card h-100 text-center">
      <div class="card-body">
        <div class="mb-3">
          <span style="font-size: 2.5rem;">📋</span>
        </div>
        <h3 class="h2 text-primary mb-2">{{ dokumente|length }}</h3>
        <p class="text-muted mb-0">Standards</p>
      </div>
    </div>
  </div>
  <div class="col-lg-3 col-md-6 mb-4">
    <div class="card h-100 text-center">
      <div class="card-body">
        <div class="mb-3">
          <span style="font-size: 2.5rem;">📝</span>
        </div>
        <h3 class="h2 text-success mb-2">
          {% if total_vorgaben %}{{ total_vorgaben }}{% else %}--{% endif %}
        </h3>
        <p class="text-muted mb-0">Vorgaben</p>
      </div>
    </div>
  </div>
  <div class="col-lg-3 col-md-6 mb-4">
    <div class="card h-100 text-center">
      <div class="card-body">
        <div class="mb-3">
          <span style="font-size: 2.5rem;">🏷️</span>
        </div>
        <h3 class="h2 text-info mb-2">
          {% if total_stichworte %}{{ total_stichworte }}{% else %}--{% endif %}
        </h3>
        <p class="text-muted mb-0">Stichworte</p>
      </div>
    </div>
  </div>
  <div class="col-lg-3 col-md-6 mb-4">
    <div class="card h-100 text-center">
      <div class="card-body">
        <div class="mb-3">
          <span style="font-size: 2.5rem;">🔗</span>
        </div>
        <h3 class="h2 text-warning mb-2">
          {% if total_referenzen %}{{ total_referenzen }}{% else %}--{% endif %}
        </h3>
        <p class="text-muted mb-0">Referenzen</p>
      </div>
    </div>
  </div>
</div>

<!-- Quick Actions -->
<div class="row mb-5">
  <div class="col-12">
    <h2 class="h4 mb-4">⚡ Schnellzugriffe</h2>
  </div>
  <div class="col-lg-4 col-md-6 mb-4">
    <div class="card h-100">
      <div class="card-body text-center">
        <div class="mb-3">
          <span style="font-size: 2rem;">📋</span>
        </div>
        <h5 class="card-title">Standards</h5>
        <p class="card-text text-muted">
          Alle Sicherheitsstandards durchsuchen und filtern
        </p>
        <a href="/dokumente/" class="btn btn-primary">
          Standards anzeigen
        </a>
      </div>
    </div>
  </div>
  <div class="col-lg-4 col-md-6 mb-4">
    <div class="card h-100">
      <div class="card-body text-center">
        <div class="mb-3">
          <span style="font-size: 2rem;">🔍</span>
        </div>
        <h5 class="card-title">Suche</h5>
        <p class="card-text text-muted">
          Volltextsuche in allen Standards und Vorgaben
        </p>
        <a href="/search/" class="btn btn-primary">
          Suche starten
        </a>
      </div>
    </div>
  </div>
  <div class="col-lg-4 col-md-6 mb-4">
    <div class="card h-100">
      <div class="card-body text-center">
        <div class="mb-3">
          <span style="font-size: 2rem;">🏷️</span>
        </div>
        <h5 class="card-title">Stichworte</h5>
        <p class="card-text text-muted">
          Nach Stichworten browsen und entdecken
        </p>
        <a href="/stichworte/" class="btn btn-primary">
          Stichworte anzeigen
        </a>
      </div>
    </div>
  </div>
  <div class="col-lg-4 col-md-6 mb-4">
    <div class="card h-100">
      <div class="card-body text-center">
        <div class="mb-3">
          <span style="font-size: 2rem;">🔗</span>
        </div>
        <h5 class="card-title">Referenzen</h5>
        <p class="card-text text-muted">
          Referenzbaum und Querverbindungen
        </p>
        <a href="/referenzen/" class="btn btn-primary">
          Referenzen anzeigen
        </a>
      </div>
    </div>
  </div>
  {% if user.is_staff %}
  <div class="col-lg-4 col-md-6 mb-4">
    <div class="card h-100">
      <div class="card-body text-center">
        <div class="mb-3">
          <span style="font-size: 2rem;">⚠️</span>
        </div>
        <h5 class="card-title">Unvollständig</h5>
        <p class="card-text text-muted">
          Unvollständige Standards bearbeiten
        </p>
        <a href="/dokumente/unvollstaendig/" class="btn btn-warning">
          Bearbeiten
        </a>
      </div>
    </div>
  </div>
  {% endif %}
</div>

<!-- Recent Standards -->
<div class="row mb-5">
  <div class="col-12">
    <div class="card">
      <div class="card-header">
        <div class="d-flex justify-content-between align-items-center">
          <h3 class="h5 mb-0">📋 Aktuell erfasste Standards</h3>
          <a href="/dokumente/" class="btn btn-outline btn-sm">
            Alle anzeigen →
          </a>
        </div>
      </div>
      <div class="card-body">
        {% if dokumente %}
        <div class="row">
          {% for standard in dokumente|slice:":6" %}
          <div class="col-lg-4 col-md-6 mb-3">
            <div class="card h-100">
              <div class="card-body">
                <h6 class="card-title">
                  <a href="{% url 'standard_detail' nummer=standard.nummer %}" class="text-decoration-none">
                    {{ standard.nummer }} – {{ standard.name|truncatechars:40 }}
                  </a>
                </h6>
                <div class="d-flex justify-content-between align-items-center">
                  <small class="text-muted">
                    {{ standard.gueltigkeit_von|default_if_none:"-" }}
                  </small>
                  {% if not standard.aktiv %}
                    <span class="badge bg-danger">Inaktiv</span>
                  {% else %}
                    <span class="badge bg-success">Aktiv</span>
                  {% endif %}
                </div>
              </div>
            </div>
          </div>
          {% endfor %}
        </div>
        {% else %}
        <div class="text-center py-4">
          <p class="text-muted mb-0">Keine Standards gefunden.</p>
        </div>
        {% endif %}
      </div>
    </div>
  </div>
</div>

<!-- Quick Search -->
<div class="row mb-5">
  <div class="col-12">
    <div class="card bg-light">
      <div class="card-body text-center py-4">
        <h3 class="h5 mb-3">🔍 Schnellsuche</h3>
        <form action="/search/" method="get" class="row justify-content-center">
          <div class="col-md-6">
            <div class="input-group">
              <input type="text" 
                     class="form-control" 
                     name="q" 
                     placeholder="Suchbegriff eingeben..."
                     maxlength="200">
              <button class="btn btn-primary" type="submit">
                Suchen
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- Help Section -->
<div class="row">
  <div class="col-12">
    <div class="card">
      <div class="card-header">
        <h3 class="h5 mb-0">💡 Hinweise zur Nutzung</h3>
      </div>
      <div class="card-body">
        <div class="row">
          <div class="col-md-4 mb-3">
            <h6 class="text-primary">🔍 Suchen</h6>
            <p class="small text-muted mb-0">
              Nutzen Sie die Volltextsuche um gezielt nach Begriffen in allen Standards zu suchen.
            </p>
          </div>
          <div class="col-md-4 mb-3">
            <h6 class="text-primary">📋 Filtern</h6>
            <p class="small text-muted mb-0">
              Filtern Sie Standards nach Status, Gültigkeit oder anderen Kriterien.
            </p>
          </div>
          <div class="col-md-4 mb-3">
            <h6 class="text-primary">🏷️ Stichworte</h6>
            <p class="small text-muted mb-0">
              Entdecken Sie verwandte Inhalte durch die Stichwort-Navigation.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- JavaScript for dynamic interactions -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  // Add hover effects to cards
  const cards = document.querySelectorAll('.card');
  cards.forEach(card => {
    card.addEventListener('mouseenter', function() {
      this.style.transform = 'translateY(-2px)';
      this.style.transition = 'all 0.2s ease';
    });
    
    card.addEventListener('mouseleave', function() {
      this.style.transform = 'translateY(0)';
    });
  });
  
  // Animate statistics on page load
  const statNumbers = document.querySelectorAll('.h2');
  statNumbers.forEach((stat, index) => {
    setTimeout(() => {
      stat.style.opacity = '0';
      stat.style.transform = 'scale(0.8)';
      stat.style.transition = 'all 0.5s ease';
      
      setTimeout(() => {
        stat.style.opacity = '1';
        stat.style.transform = 'scale(1)';
      }, 100);
    }, index * 100);
  });
});
</script>

<style>
.card {
  transition: all 0.2s ease;
}

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

.display-4 {
  font-weight: 700;
}

.btn-lg {
  padding: 0.75rem 2rem;
  font-weight: 500;
}

@media (max-width: 768px) {
  .display-4 {
    font-size: 2rem;
  }
  
  .btn-lg {
    padding: 0.5rem 1.5rem;
    font-size: 1rem;
  }
}
</style>
{% endblock %}