{% extends "base.html" %}

{% block title %}{{ post.title }} - Discussions{% endblock %}

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-blue-900 via-purple-900 to-teal-900 pt-16">
    <!-- Header Section -->
    <div class="relative overflow-hidden py-12">
        <div class="absolute inset-0 bg-black/20"></div>
        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20">
                <div class="flex items-center justify-between">
                    <div class="flex-1">
                        <h1 class="text-2xl md:text-3xl font-bold text-white mb-2">
                            <i class="fas fa-comments mr-3"></i>Discussions for:
                        </h1>
                        <h2 class="text-xl md:text-2xl text-blue-200">{{ post.title }}</h2>
                        <p class="text-blue-300 text-sm mt-2">
                            by {{ post.author.nickname }} • {{ post.created_at.strftime('%B %d, %Y') }}
                        </p>
                    </div>
                    <a href="{{ url_for('community.post_detail', id=post.id) }}" 
                       class="bg-white/20 hover:bg-white/30 px-4 py-2 rounded-lg transition-all duration-200 text-white">
                        <i class="fas fa-eye mr-2"></i>View Post
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-12 -mt-6">
        <!-- Navigation -->
        <div class="flex justify-center mb-8">
            <div class="bg-white rounded-2xl shadow-xl p-2 flex flex-wrap gap-2">
                <a href="{{ url_for('chat.index') }}" 
                   class="px-4 py-2 text-gray-600 hover:text-gray-800 hover:bg-gray-100 rounded-lg transition-all duration-200">
                    <i class="fas fa-comments mr-2"></i>All Chats
                </a>
                <a href="{{ url_for('chat.post_discussions') }}" 
                   class="px-4 py-2 text-gray-600 hover:text-gray-800 hover:bg-gray-100 rounded-lg transition-all duration-200">
                    <i class="fas fa-newspaper mr-2"></i>Post Discussions
                </a>
                <a href="{{ url_for('chat.create_room_form') }}?post_id={{ post.id }}" 
                   class="px-4 py-2 bg-gradient-to-r from-green-600 to-emerald-600 text-white rounded-lg hover:from-green-700 hover:to-emerald-700 transition-all duration-200">
                    <i class="fas fa-plus mr-2"></i>New Discussion
                </a>
            </div>
        </div>

        <!-- Post Summary -->
        <div class="bg-white rounded-2xl shadow-xl overflow-hidden mb-8">
            <div class="bg-gradient-to-r from-blue-600 to-purple-600 p-6">
                <div class="flex items-center text-white">
                    <i class="fas fa-file-alt text-2xl mr-3"></i>
                    <div>
                        <h3 class="text-xl font-bold">Original Post</h3>
                        <p class="text-blue-100 text-sm">{{ post.created_at.strftime('%B %d, %Y at %I:%M %p') }}</p>
                    </div>
                </div>
            </div>
            <div class="p-6">
                <div class="prose max-w-none">
                    {{ post.content[:300] }}{% if post.content|length > 300 %}...{% endif %}
                </div>
                <div class="flex items-center justify-between mt-4 pt-4 border-t border-gray-200">
                    <div class="flex items-center space-x-4 text-sm text-gray-500">
                        <span>
                            <i class="fas fa-user mr-1"></i>{{ post.author.nickname }}
                        </span>
                        {% if post.likes %}
                        <span>
                            <i class="fas fa-heart mr-1 text-red-500"></i>{{ post.likes.count() }} likes
                        </span>
                        {% endif %}
                        {% if post.comments %}
                        <span>
                            <i class="fas fa-comment mr-1 text-blue-500"></i>{{ post.comments.count() }} comments
                        </span>
                        {% endif %}
                    </div>
                    <a href="{{ url_for('community.post_detail', id=post.id) }}" 
                       class="px-4 py-2 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 transition-all duration-200">
                        <i class="fas fa-external-link-alt mr-2"></i>Read Full Post
                    </a>
                </div>
            </div>
        </div>

        {% if rooms %}
        <!-- Discussion Rooms -->
        <div class="space-y-6">
            <h2 class="text-2xl font-bold text-white mb-6 flex items-center">
                <i class="fas fa-comments mr-3"></i>Discussion Rooms ({{ rooms|length }})
            </h2>
            
            {% for room in rooms %}
            <div class="bg-white rounded-2xl shadow-xl overflow-hidden transition-all duration-300 hover:shadow-2xl">
                <div class="p-6">
                    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between">
                        <div class="flex-1">
                            <div class="flex items-start justify-between mb-4">
                                <div class="flex-1">
                                    <h3 class="text-xl font-bold text-gray-800 mb-2">{{ room.name }}</h3>
                                    {% if room.description %}
                                    <p class="text-gray-600 mb-3">{{ room.description }}</p>
                                    {% endif %}
                                </div>
                                <div class="flex space-x-2 ml-4">
                                    <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-semibold">
                                        <i class="fas fa-comments mr-1"></i>{{ room.message_count or 0 }}
                                    </span>
                                    {% if room.is_private %}
                                    <span class="bg-amber-100 text-amber-800 px-3 py-1 rounded-full text-sm font-semibold">
                                        <i class="fas fa-lock mr-1"></i>Private
                                    </span>
                                    {% endif %}
                                </div>
                            </div>
                            
                            <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500">
                                <span>
                                    <i class="fas fa-user mr-1"></i>
                                    Created by {{ room.created_by.nickname }}
                                </span>
                                <span>
                                    <i class="fas fa-users mr-1"></i>
                                    {{ room.participants.count() }} members
                                </span>
                                <span>
                                    <i class="fas fa-clock mr-1"></i>
                                    {% if room.last_activity %}
                                        {{ room.last_activity.strftime('%m/%d/%Y at %I:%M %p') }}
                                    {% else %}
                                        No recent activity
                                    {% endif %}
                                </span>
                                <span>
                                    <i class="fas fa-calendar mr-1"></i>
                                    Created {{ room.created_at.strftime('%m/%d/%Y') }}
                                </span>
                            </div>
                        </div>
                        
                        <div class="mt-4 lg:mt-0 lg:ml-6">
                            <a href="{{ url_for('chat.room', room_id=room.id) }}" 
                               class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold rounded-lg hover:from-blue-700 hover:to-purple-700 transition-all duration-200">
                                <i class="fas fa-sign-in-alt mr-2"></i>Join Discussion
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>

        {% else %}
        <!-- Empty State -->
        <div class="text-center py-16">
            <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-12 border border-white/20">
                <i class="fas fa-comments text-6xl text-white/50 mb-6"></i>
                <h3 class="text-2xl font-bold text-white mb-4">No discussions yet</h3>
                <p class="text-blue-200 mb-8">Be the first to start a discussion about this post!</p>
                <a href="{{ url_for('chat.create_room_form') }}?post_id={{ post.id }}" 
                   class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-green-600 to-emerald-600 text-white font-semibold rounded-lg hover:from-green-700 hover:to-emerald-700 transition-all duration-200">
                    <i class="fas fa-plus mr-2"></i>Start Discussion
                </a>
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}