{% extends "layout.html" %}

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

{% block breadcrumb %}
<a href="{{ url_for('forum.index') }}" class="hover:text-blue-600">Home</a>
<span class="mx-2">/</span>
<a href="{{ url_for('forum.category_list') }}" class="hover:text-blue-600">Categories</a>
<span class="mx-2">/</span>
<span>{{ category.name }}</span>
{% endblock %}

{% block content %}
<div class="bg-white rounded-lg shadow overflow-hidden">
    <div class="px-6 py-4 border-b border-gray-200 flex flex-col sm:flex-row sm:justify-between sm:items-center">
        <div>
            <h1 class="text-2xl font-bold text-gray-800">{{ category.name }}</h1>
            {% if category.description %}
            <p class="text-gray-600 mt-1">{{ category.description }}</p>
            {% endif %}
        </div>
        
        {% if current_user.is_authenticated %}
        <a href="{{ url_for('forum.create_topic') }}" class="mt-4 sm:mt-0 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring transition-colors">
            <i data-feather="plus-circle" class="w-4 h-4 inline-block mr-1"></i> New Topic
        </a>
        {% endif %}
    </div>
    
    <!-- Topics -->
    <div class="p-6">
        {% if topics.items %}
            <div class="border-b border-gray-200 mb-4 pb-1">
                <div class="flex justify-between items-center text-sm text-gray-500">
                    <div class="w-6/12 sm:w-7/12 px-2">Topic</div>
                    <div class="w-2/12 px-2 text-center hidden sm:block">Replies</div>
                    <div class="w-2/12 px-2 text-center hidden md:block">Views</div>
                    <div class="w-4/12 sm:w-3/12 md:w-2/12 px-2">Last Post</div>
                </div>
            </div>
            
            <div class="space-y-2">
                {% for topic in topics.items %}
                <div class="flex bg-white hover:bg-gray-50 border border-gray-200 rounded-lg transition-colors overflow-hidden">
                    <div class="w-6/12 sm:w-7/12 p-3 flex items-start">
                        <div class="flex-shrink-0 mr-3">
                            {% if topic.is_pinned %}
                            <span class="flex items-center justify-center w-8 h-8 bg-yellow-100 text-yellow-600 rounded-full">
                                <i data-feather="star" class="w-4 h-4"></i>
                            </span>
                            {% elif topic.is_locked %}
                            <span class="flex items-center justify-center w-8 h-8 bg-red-100 text-red-600 rounded-full">
                                <i data-feather="lock" class="w-4 h-4"></i>
                            </span>
                            {% else %}
                            <span class="flex items-center justify-center w-8 h-8 bg-blue-100 text-blue-600 rounded-full">
                                <i data-feather="message-circle" class="w-4 h-4"></i>
                            </span>
                            {% endif %}
                        </div>
                        <div>
                            <a href="{{ url_for('forum.topic_view', id=topic.id) }}" class="text-gray-800 font-medium hover:text-blue-600">
                                {{ topic.title }}
                            </a>
                            
                            {% if topic.tags %}
                            <div class="mt-1 flex flex-wrap">
                                {% for tag in topic.tags %}
                                <a href="{{ url_for('forum.tag_view', tag_name=tag.name) }}" class="tag">
                                    {{ tag.name }}
                                </a>
                                {% endfor %}
                            </div>
                            {% endif %}
                            
                            <div class="text-gray-500 text-xs mt-1">
                                Started by <a href="{{ url_for('user.profile', username=topic.author.username) }}" class="text-blue-600 hover:underline">{{ topic.author.username }}</a>, 
                                {{ topic.created_at.strftime('%b %d, %Y') }}
                            </div>
                        </div>
                    </div>
                    
                    <div class="w-2/12 p-3 text-center hidden sm:flex items-center justify-center">
                        <span class="text-gray-700">{{ topic.reply_count() }}</span>
                    </div>
                    
                    <div class="w-2/12 p-3 text-center hidden md:flex items-center justify-center">
                        <span class="text-gray-700">{{ topic.views }}</span>
                    </div>
                    
                    <div class="w-4/12 sm:w-3/12 md:w-2/12 p-3">
                        {% set last_post = topic.last_post() %}
                        {% if last_post %}
                        <div class="text-xs text-gray-500">
                            <a href="{{ url_for('user.profile', username=last_post.author.username) }}" class="text-blue-600 hover:underline">{{ last_post.author.username }}</a>
                            <div class="mt-1">{{ last_post.created_at.strftime('%b %d, %Y') }}</div>
                        </div>
                        {% else %}
                        <span class="text-gray-500 text-xs">No replies yet</span>
                        {% endif %}
                    </div>
                </div>
                {% endfor %}
            </div>
            
            <!-- Pagination -->
            {% if topics.pages > 1 %}
            <div class="mt-6 flex justify-center">
                <nav class="inline-flex rounded-md shadow">
                    {% if topics.has_prev %}
                    <a href="{{ url_for('forum.category_view', id=category.id, page=topics.prev_num) }}" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-l-md hover:bg-gray-50">
                        Previous
                    </a>
                    {% else %}
                    <span class="px-4 py-2 text-sm font-medium text-gray-400 bg-gray-100 border border-gray-300 rounded-l-md cursor-not-allowed">
                        Previous
                    </span>
                    {% endif %}
                    
                    {% for page_num in topics.iter_pages(left_edge=1, right_edge=1, left_current=2, right_current=2) %}
                        {% if page_num %}
                            {% if page_num == topics.page %}
                            <span class="px-4 py-2 text-sm font-medium text-blue-600 bg-blue-50 border border-gray-300">
                                {{ page_num }}
                            </span>
                            {% else %}
                            <a href="{{ url_for('forum.category_view', id=category.id, page=page_num) }}" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 hover:bg-gray-50">
                                {{ page_num }}
                            </a>
                            {% endif %}
                        {% else %}
                        <span class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300">
                            …
                        </span>
                        {% endif %}
                    {% endfor %}
                    
                    {% if topics.has_next %}
                    <a href="{{ url_for('forum.category_view', id=category.id, page=topics.next_num) }}" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-r-md hover:bg-gray-50">
                        Next
                    </a>
                    {% else %}
                    <span class="px-4 py-2 text-sm font-medium text-gray-400 bg-gray-100 border border-gray-300 rounded-r-md cursor-not-allowed">
                        Next
                    </span>
                    {% endif %}
                </nav>
            </div>
            {% endif %}
            
        {% else %}
            <div class="text-center py-8">
                <p class="text-gray-500">No topics have been created in this category yet.</p>
                {% if current_user.is_authenticated %}
                <a href="{{ url_for('forum.create_topic') }}" class="mt-4 inline-block px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
                    Create First Topic
                </a>
                {% endif %}
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}