{% extends 'base.html' %}

{% block title %}Community Forum{% endblock %}

{% block extra_css %}
<style>
  .forum-category {
    transition: all 0.3s ease;
  }
  .forum-category:hover {
    transform: translateY(-2px);
  }
  .category-icon {
    font-size: 1.5rem;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
  }
</style>
{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
  <!-- Seitenüberschrift -->
  <div class="mb-8 text-center">
    <h1 class="text-3xl font-bold mb-2 gradient-text">Community Forum</h1>
    <p class="text-lg opacity-75">Diskutiere mit anderen Nutzern über die Hauptthemenbereiche der Mindmap</p>
  </div>
  
  <!-- Forumskategorien -->
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
    {% if categories_data %}
      {% for cat_data in categories_data %}
        <a href="{{ url_for('forum_category', category_id=cat_data.category.id) }}" class="forum-category block">
          <div class="rounded-xl p-5 h-full" 
               x-bind:class="darkMode ? 'bg-gray-800/60 hover:bg-gray-800/80 border border-white/10' : 'bg-white hover:bg-gray-50 border border-gray-200 shadow-md'">
            <div class="flex items-start">
              <!-- Kategorie-Icon -->
              <div class="category-icon mr-4 text-white" 
                   style="background-color: {{ cat_data.category.node.color_code or '#6d28d9' }}">
                <i class="fas {{ cat_data.category.node.icon or 'fa-folder' }}"></i>
              </div>
              
              <!-- Kategorie-Info -->
              <div class="flex-grow">
                <h3 class="text-xl font-semibold mb-2">{{ cat_data.category.title }}</h3>
                <p class="opacity-75 text-sm mb-3">{{ cat_data.category.description }}</p>
                
                <!-- Statistik -->
                <div class="flex flex-wrap gap-4 text-sm opacity-80">
                  <div class="flex items-center">
                    <i class="fas fa-comment-alt mr-2"></i>
                    <span>{{ cat_data.total_posts }} Themen</span>
                  </div>
                  <div class="flex items-center">
                    <i class="fas fa-reply mr-2"></i>
                    <span>{{ cat_data.total_replies }} Antworten</span>
                  </div>
                  {% if cat_data.latest_post %}
                  <div class="flex items-center">
                    <i class="fas fa-clock mr-2"></i>
                    <span>Neuster Beitrag: {{ cat_data.latest_post.created_at.strftime('%d.%m.%Y, %H:%M') }}</span>
                  </div>
                  {% endif %}
                </div>
              </div>
              
              <!-- Pfeil-Icon -->
              <div class="ml-2">
                <i class="fas fa-chevron-right opacity-50"></i>
              </div>
            </div>
          </div>
        </a>
      {% endfor %}
    {% else %}
      <div class="col-span-2 text-center py-8">
        <div class="text-3xl mb-3 opacity-30"><i class="fas fa-exclamation-circle"></i></div>
        <h3 class="text-xl font-semibold mb-2">Keine Forum-Kategorien gefunden</h3>
        <p class="opacity-75">Es sind derzeit keine Kategorien für Diskussionen verfügbar.</p>
      </div>
    {% endif %}
  </div>
  
  <!-- Hinweis zur Nutzung -->
  <div class="rounded-xl p-6 text-center mb-8" 
       x-bind:class="darkMode ? 'bg-indigo-900/30 border border-indigo-700/30' : 'bg-indigo-50 border border-indigo-100'">
    <h3 class="text-xl font-semibold mb-3">
      <i class="fas fa-lightbulb mr-2 text-yellow-500"></i>
      So funktioniert das Forum
    </h3>
    <p class="mb-4">Das Community-Forum ist nach den Hauptknotenpunkten der Systades-Mindmap strukturiert. 
      In deinen Beiträgen kannst du Knotenpunkte mit <code>@Knotenname</code> verlinken.</p>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
      <div class="p-4 rounded-lg" 
           x-bind:class="darkMode ? 'bg-indigo-800/40' : 'bg-white border border-indigo-100'">
        <div class="text-2xl mb-2"><i class="fas fa-users text-indigo-400"></i></div>
        <h4 class="font-medium mb-1">Fachliche Diskussionen</h4>
        <p class="text-sm opacity-75">Tausche dich mit anderen zu spezifischen Themen aus</p>
      </div>
      <div class="p-4 rounded-lg" 
           x-bind:class="darkMode ? 'bg-indigo-800/40' : 'bg-white border border-indigo-100'">
        <div class="text-2xl mb-2"><i class="fas fa-link text-indigo-400"></i></div>
        <h4 class="font-medium mb-1">Wissensvernetzung</h4>
        <p class="text-sm opacity-75">Verknüpfe Inhalte durch Knotenreferenzen</p>
      </div>
      <div class="p-4 rounded-lg" 
           x-bind:class="darkMode ? 'bg-indigo-800/40' : 'bg-white border border-indigo-100'">
        <div class="text-2xl mb-2"><i class="fas fa-markdown text-indigo-400"></i></div>
        <h4 class="font-medium mb-1">Markdown Support</h4>
        <p class="text-sm opacity-75">Formatiere deine Beiträge mit Markdown</p>
      </div>
    </div>
  </div>
</div>
{% endblock %}

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