{% extends "base.html" %}

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

{% block meta_description %}{{ category.description }}{% endblock %}

{% block content %}
<div class="bg-gray-50 min-h-screen">
    <!-- Header -->
    <div class="bg-white border-b border-gray-200">
        <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
            <!-- Breadcrumb -->
            <nav class="text-sm text-gray-500 mb-4">
                <a href="{{ url_for('forum.index') }}" class="hover:text-indigo-600">Forum</a>
                <span class="mx-2">/</span>
                <span class="text-gray-900">{{ category.name }}</span>
            </nav>

            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-2xl font-bold text-gray-900">{{ category.name }}</h1>
                    <p class="mt-1 text-gray-600">{{ category.description }}</p>
                </div>
                <a href="{{ url_for('forum.new_topic', slug=category.slug) }}"
                   class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-md hover:bg-indigo-700">
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                    </svg>
                    New Topic
                </a>
            </div>
        </div>
    </div>

    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        {% if topics %}
        <!-- Topics list -->
        <div class="bg-white border border-gray-200 rounded-lg divide-y divide-gray-100">
            {% for topic in topics %}
            <a href="{{ url_for('forum.topic', topic_id=topic.id, slug=topic.slug) }}"
               class="block p-4 hover:bg-gray-50 transition-colors">
                <div class="flex items-start justify-between">
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center gap-2">
                            {% if topic.is_pinned %}
                            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-amber-100 text-amber-800">
                                Pinned
                            </span>
                            {% endif %}
                            {% if topic.is_locked %}
                            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800">
                                Locked
                            </span>
                            {% endif %}
                            <h3 class="font-medium text-gray-900 truncate">{{ topic.title }}</h3>
                        </div>
                        <div class="mt-1 text-sm text-gray-500">
                            by {{ topic.author_name }} &middot; {{ topic.created_at | timeago }}
                        </div>
                    </div>
                    <div class="ml-4 flex-shrink-0 text-right">
                        <div class="text-sm text-gray-900">{{ topic.reply_count }} replies</div>
                        <div class="text-xs text-gray-500">{{ topic.view_count }} views</div>
                    </div>
                </div>
            </a>
            {% endfor %}
        </div>

        <!-- Pagination -->
        {% if total_pages > 1 %}
        <nav class="mt-6 flex items-center justify-center gap-2">
            {% if page > 1 %}
            <a href="{{ url_for('forum.category', slug=category.slug, page=page-1) }}"
               class="px-3 py-2 text-sm text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
                Previous
            </a>
            {% endif %}

            <span class="px-3 py-2 text-sm text-gray-700">
                Page {{ page }} of {{ total_pages }}
            </span>

            {% if page < total_pages %}
            <a href="{{ url_for('forum.category', slug=category.slug, page=page+1) }}"
               class="px-3 py-2 text-sm text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
                Next
            </a>
            {% endif %}
        </nav>
        {% endif %}

        {% else %}
        <!-- Empty state -->
        <div class="bg-white border border-gray-200 rounded-lg p-8 text-center">
            <svg class="mx-auto w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
            </svg>
            <h3 class="mt-4 text-lg font-medium text-gray-900">No topics yet</h3>
            <p class="mt-2 text-gray-600">Be the first to start a discussion in this category.</p>
            <a href="{{ url_for('forum.new_topic', slug=category.slug) }}"
               class="mt-4 inline-flex items-center px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-md hover:bg-indigo-700">
                Create the first topic
            </a>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}