{% extends 'base.html' %}

{% block title %}{{ category.title }} - Forum{% endblock %}

{% block extra_css %}
<style>
  .thread-item {
    transition: all 0.2s ease;
  }
  .thread-item:hover {
    transform: translateX(2px);
  }
  .thread-pinned {
    border-left-width: 4px;
  }
</style>
{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
  <!-- Breadcrumb Navigation -->
  <div class="mb-6 flex items-center text-sm">
    <a href="{{ url_for('community') }}" class="opacity-75 hover:opacity-100 transition-opacity">
      <i class="fas fa-home mr-1"></i> Forum
    </a>
    <span class="mx-2 opacity-50">/</span>
    <span class="font-medium">{{ category.title }}</span>
  </div>
  
  <!-- Kategorie-Header -->
  <div class="mb-8 flex flex-wrap items-center justify-between gap-4">
    <div class="flex items-center">
      <!-- Kategorie-Icon -->
      <div class="w-12 h-12 rounded-xl mr-4 flex items-center justify-center text-white" 
           style="background-color: {{ node.color_code or '#6d28d9' }}">
        <i class="fas {{ node.icon or 'fa-folder' }} text-2xl"></i>
      </div>
      
      <!-- Kategorie-Info -->
      <div>
        <h1 class="text-2xl font-bold">{{ category.title }}</h1>
        <p class="opacity-75">{{ category.description }}</p>
      </div>
    </div>
    
    <!-- Neues Thema erstellen -->
    <a href="{{ url_for('new_post', category_id=category.id) }}" 
       class="px-5 py-2.5 rounded-lg transition-all duration-300 flex items-center"
       x-bind:class="darkMode 
       ? 'bg-indigo-700 hover:bg-indigo-600 text-white' 
       : 'bg-indigo-500 hover:bg-indigo-600 text-white'">
      <i class="fas fa-plus-circle mr-2"></i>
      Neues Thema
    </a>
  </div>
  
  <!-- Threads anzeigen -->
  <div class="mb-8 rounded-xl overflow-hidden"
       x-bind:class="darkMode ? 'bg-gray-800/60 border border-white/10' : 'bg-white border border-gray-200'">
    
    <!-- Header -->
    <div class="p-4 border-b" x-bind:class="darkMode ? 'border-white/10' : 'border-gray-200'">
      <div class="grid grid-cols-12 gap-4">
        <div class="col-span-7 font-medium">Thema</div>
        <div class="col-span-1 text-center font-medium hidden md:block">Antworten</div>
        <div class="col-span-2 text-center font-medium hidden md:block">Autor</div>
        <div class="col-span-2 text-center font-medium hidden md:block">Letzte Antwort</div>
      </div>
    </div>
    
    <!-- Thread-Liste -->
    {% if threads_data %}
      {% for thread_data in threads_data %}
        {% set thread = thread_data.thread %}
        <div class="thread-item p-4 border-b last:border-b-0 {{ 'thread-pinned' if thread.is_pinned }}" 
             x-bind:class="darkMode 
             ? 'border-white/10 hover:bg-gray-700/50 {{ 'border-l-yellow-500' if thread.is_pinned }}' 
             : 'border-gray-200 hover:bg-gray-50 {{ 'border-l-yellow-500' if thread.is_pinned }}'">
          <a href="{{ url_for('forum_post', post_id=thread.id) }}" class="block">
            <div class="grid grid-cols-12 gap-4">
              <!-- Thema -->
              <div class="col-span-12 md:col-span-7">
                <div class="flex items-start">
                  <!-- Status-Icons -->
                  <div class="flex flex-col items-center mr-3 pt-1">
                    {% if thread.is_pinned %}
                      <i class="fas fa-thumbtack text-yellow-500" title="Angepinnt"></i>
                    {% endif %}
                    {% if thread.is_locked %}
                      <i class="fas fa-lock text-red-500 mt-1" title="Gesperrt"></i>
                    {% endif %}
                  </div>
                  
                  <!-- Themen-Info -->
                  <div>
                    <h3 class="font-medium leading-snug mb-1 {% if thread.is_locked %}opacity-70{% endif %}">
                      {{ thread.title }}
                    </h3>
                    <div class="flex items-center text-xs opacity-70 mt-1">
                      <span><i class="fas fa-eye mr-1"></i> {{ thread.view_count }}</span>
                      <span class="mx-2 block md:hidden">•</span>
                      <span class="block md:hidden"><i class="fas fa-reply mr-1"></i> {{ thread_data.reply_count }}</span>
                      <span class="mx-2">•</span>
                      <span><i class="fas fa-clock mr-1"></i> {{ thread.created_at.strftime('%d.%m.%Y, %H:%M') }}</span>
                    </div>
                  </div>
                </div>
              </div>
              
              <!-- Antworten -->
              <div class="col-span-1 text-center hidden md:flex items-center justify-center">
                <span class="px-2.5 py-1 rounded-full text-sm font-medium" 
                     x-bind:class="darkMode 
                     ? 'bg-indigo-900/40 text-indigo-300' 
                     : 'bg-indigo-100 text-indigo-800'">
                  {{ thread_data.reply_count }}
                </span>
              </div>
              
              <!-- Autor -->
              <div class="col-span-2 text-center hidden md:flex items-center justify-center">
                <div class="flex items-center">
                  <div class="w-7 h-7 rounded-full flex items-center justify-center text-white text-xs font-medium overflow-hidden mr-2" 
                       style="background: linear-gradient(135deg, #8b5cf6, #6366f1);">
                    {% if thread.author.avatar %}
                      <img src="{{ thread.author.avatar }}" alt="{{ thread.author.username }}" class="w-full h-full object-cover">
                    {% else %}
                      {{ thread.author.username[0].upper() }}
                    {% endif %}
                  </div>
                  <span class="text-sm truncate max-w-[80px]">{{ thread.author.username }}</span>
                </div>
              </div>
              
              <!-- Letzte Antwort -->
              <div class="col-span-2 text-center hidden md:block text-sm">
                {% if thread_data.latest_reply %}
                  <div>{{ thread_data.latest_reply.created_at.strftime('%d.%m.%Y') }}</div>
                  <div class="opacity-75 text-xs">{{ thread_data.latest_reply.created_at.strftime('%H:%M') }} Uhr</div>
                {% else %}
                  <span class="opacity-60">Keine Antworten</span>
                {% endif %}
              </div>
            </div>
          </a>
        </div>
      {% endfor %}
    {% else %}
      <div class="p-8 text-center">
        <div class="text-3xl mb-3 opacity-30"><i class="fas fa-comments"></i></div>
        <h3 class="text-xl font-semibold mb-2">Keine Themen vorhanden</h3>
        <p class="opacity-75 mb-4">In dieser Kategorie wurden noch keine Themen erstellt.</p>
        <a href="{{ url_for('new_post', category_id=category.id) }}" 
           class="inline-block px-5 py-2.5 rounded-lg transition-all duration-300"
           x-bind:class="darkMode 
           ? 'bg-indigo-700 hover:bg-indigo-600 text-white' 
           : 'bg-indigo-500 hover:bg-indigo-600 text-white'">
          <i class="fas fa-plus-circle mr-2"></i>
          Erstes Thema erstellen
        </a>
      </div>
    {% endif %}
  </div>
  
  <!-- Link zur Mindmap -->
  <div class="rounded-xl p-5 mb-4 flex items-center"
       x-bind:class="darkMode ? 'bg-purple-900/20 border border-purple-800/30' : 'bg-purple-50 border border-purple-100'">
    <div class="text-3xl mr-4 opacity-80">
      <i class="fas fa-diagram-project" style="color: {{ node.color_code }}"></i>
    </div>
    <div>
      <h3 class="font-medium mb-1">Mindmap-Knotenpunkt: {{ node.name }}</h3>
      <p class="text-sm opacity-75">In der Mindmap findest du weitere Informationen zu diesem Themenbereich.</p>
    </div>
    <div class="ml-auto">
      <a href="{{ url_for('mindmap') }}" 
         class="px-4 py-2 rounded-lg inline-block text-sm transition-all"
         x-bind:class="darkMode 
         ? 'bg-purple-800/60 hover:bg-purple-700/60 text-white' 
         : 'bg-white hover:bg-purple-100 text-purple-800 border border-purple-200'">
        Zur Mindmap
      </a>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  // Hier können bei Bedarf kategoriespezifische Scripts eingefügt werden
</script>
{% endblock %}