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

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
  <h1>🏷️ Stichworte</h1>
  <div class="d-flex gap-2">
    <span class="badge bg-primary">{{ stichworte|length }} Kategorien</span>
  </div>
</div>

<!-- Search and Filter -->
<div class="card mb-4">
  <div class="card-body">
    <div class="row g-3">
      <div class="col-md-8">
        <label for="stichwort-search" class="form-label">🔍 Stichworte durchsuchen</label>
        <input type="text" 
               class="form-control" 
               id="stichwort-search" 
               placeholder="Stichwort eingeben..."
               onkeyup="filterStichworte()">
      </div>
      <div class="col-md-4">
        <label for="letter-filter" class="form-label">🔤 Buchstabe</label>
        <select class="form-select" id="letter-filter" onchange="filterStichworte()">
          <option value="">Alle Buchstaben</option>
          {% for Anfang, Worte in stichworte.items %}
          <option value="{{ Anfang }}">{{ Anfang }}</option>
          {% endfor %}
        </select>
      </div>
    </div>
  </div>
</div>

<!-- Stichworte Grid -->
<div class="row" id="stichworte-container">
  {% for Anfang, Worte in stichworte.items %}
  <div class="col-lg-4 col-md-6 mb-4 stichwort-category" data-letter="{{ Anfang }}">
    <div class="card h-100">
      <div class="card-header">
        <h3 class="h5 mb-0">{{ Anfang }}</h3>
        <span class="badge bg-secondary">{{ Worte|length }} Stichworte</span>
      </div>
      <div class="card-body">
        <div class="list-group list-group-flush">
          {% for Wort in Worte %}
          <a href="/stichworte/{{ Wort }}/" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
            <span>{{ Wort }}</span>
            <span class="badge bg-light text-dark">→</span>
          </a>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
  {% endfor %}
</div>

<!-- JavaScript for filtering -->
<script>
function filterStichworte() {
  const searchTerm = document.getElementById('stichwort-search').value.toLowerCase();
  const letterFilter = document.getElementById('letter-filter').value;
  const categories = document.querySelectorAll('.stichwort-category');
  
  categories.forEach(category => {
    const letter = category.dataset.letter;
    const items = category.querySelectorAll('.list-group-item');
    let hasVisibleItems = false;
    
    // Check if category matches letter filter
    const matchesLetter = !letterFilter || letter === letterFilter;
    
    // Filter items within category
    items.forEach(item => {
      const text = item.textContent.toLowerCase();
      const matchesSearch = !searchTerm || text.includes(searchTerm);
      
      if (matchesSearch && matchesLetter) {
        item.style.display = 'flex';
        hasVisibleItems = true;
      } else {
        item.style.display = 'none';
      }
    });
    
    // Show/hide category based on visible items
    category.style.display = (matchesLetter && hasVisibleItems) ? 'block' : 'none';
  });
}

document.addEventListener('DOMContentLoaded', function() {
  // Add hover effects
  const items = document.querySelectorAll('.list-group-item');
  items.forEach(item => {
    item.addEventListener('mouseenter', function() {
      this.style.backgroundColor = 'var(--bg-secondary)';
    });
    
    item.addEventListener('mouseleave', function() {
      this.style.backgroundColor = '';
    });
  });
});
</script>

<style>
.list-group-item {
  border: none;
  border-bottom: 1px solid var(--border-color);
  padding: var(--spacing-sm) var(--spacing-md);
  transition: all var(--transition-fast);
}

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

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

.card-header {
  display: flex;
  justify-content: between;
  align-items: center;
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

@media (max-width: 768px) {
  .list-group-item {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.875rem;
  }
}
</style>
{% endblock %}