{% extends "layout.html" %}

{% block title %}{{ user.username }}'s Profile - Community Forum{% endblock %}

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

{% block content %}
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- User Information Card -->
    <div class="lg:col-span-1">
        <div class="bg-white rounded-lg shadow overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-blue-50">
                <h2 class="text-xl font-bold text-gray-800">User Profile</h2>
            </div>
            
            <div class="p-6">
                <div class="flex flex-col items-center">
                    <img 
                        src="{{ url_for('static', filename='uploads/avatars/' + user.avatar) if user.avatar else url_for('static', filename='uploads/avatars/default.png') }}" 
                        alt="{{ user.username }}" 
                        class="w-32 h-32 rounded-full object-cover border-4 border-white shadow"
                    >
                    
                    <h1 class="mt-4 text-2xl font-bold text-gray-800">{{ user.username }}</h1>
                    
                    <div class="mt-2">
                        {% if user.role == 'admin' %}
                        <span class="inline-block bg-red-100 text-red-800 text-sm px-3 py-1 rounded-full">Administrator</span>
                        {% elif user.role == 'moderator' %}
                        <span class="inline-block bg-green-100 text-green-800 text-sm px-3 py-1 rounded-full">Moderator</span>
                        {% else %}
                        <span class="inline-block bg-blue-100 text-blue-800 text-sm px-3 py-1 rounded-full">Member</span>
                        {% endif %}
                    </div>
                </div>
                
                <div class="mt-6 space-y-4 text-gray-700">
                    <div class="flex items-center">
                        <i data-feather="calendar" class="w-5 h-5 text-gray-400 mr-3"></i>
                        <span>Joined {{ user.created_at.strftime('%B %d, %Y') }}</span>
                    </div>
                    
                    <div class="flex items-center">
                        <i data-feather="clock" class="w-5 h-5 text-gray-400 mr-3"></i>
                        <span>Last seen {{ user.last_seen.strftime('%B %d, %Y') }}</span>
                    </div>
                    
                    {% if user.location %}
                    <div class="flex items-center">
                        <i data-feather="map-pin" class="w-5 h-5 text-gray-400 mr-3"></i>
                        <span>{{ user.location }}</span>
                    </div>
                    {% endif %}
                    
                    {% if user.website %}
                    <div class="flex items-center">
                        <i data-feather="globe" class="w-5 h-5 text-gray-400 mr-3"></i>
                        <a href="{{ user.website }}" target="_blank" class="text-blue-600 hover:underline truncate">{{ user.website }}</a>
                    </div>
                    {% endif %}
                </div>
                
                {% if user.bio %}
                <div class="mt-6 pt-6 border-t border-gray-200">
                    <h3 class="text-lg font-medium text-gray-800 mb-2">About</h3>
                    <p class="text-gray-700">{{ user.bio }}</p>
                </div>
                {% endif %}
                
                {% if user.signature %}
                <div class="mt-6 pt-6 border-t border-gray-200">
                    <h3 class="text-lg font-medium text-gray-800 mb-2">Signature</h3>
                    <p class="text-gray-700 text-sm italic">{{ user.signature }}</p>
                </div>
                {% endif %}
                
                {% if current_user.is_authenticated and current_user.id == user.id %}
                <div class="mt-6 pt-6 border-t border-gray-200">
                    <a href="{{ url_for('user.edit_profile') }}" class="w-full block text-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
                        Edit Profile
                    </a>
                    <a href="{{ url_for('user.change_password') }}" class="w-full block text-center mt-2 px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors">
                        Change Password
                    </a>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
    
    <!-- User Activity -->
    <div class="lg:col-span-2 space-y-6">
        <!-- Topics Created -->
        <div class="bg-white rounded-lg shadow overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-blue-50 flex justify-between items-center">
                <h2 class="text-xl font-bold text-gray-800">Topics Started</h2>
                <span class="text-gray-600">{{ topics.total }} total</span>
            </div>
            
            {% if topics.items %}
            <div class="divide-y divide-gray-200">
                {% for topic in topics.items %}
                <div class="p-4 hover:bg-gray-50">
                    <a href="{{ url_for('forum.topic_view', id=topic.id) }}" class="block">
                        <div class="flex justify-between items-start">
                            <div>
                                <h3 class="text-lg font-medium text-gray-800 hover:text-blue-600">{{ topic.title }}</h3>
                                <div class="flex items-center text-sm text-gray-500 mt-1">
                                    <span>{{ topic.created_at.strftime('%b %d, %Y') }}</span>
                                    <span class="mx-2">•</span>
                                    <span>{{ topic.reply_count() }} replies</span>
                                    <span class="mx-2">•</span>
                                    <span>{{ topic.views }} views</span>
                                </div>
                                
                                {% if topic.tags %}
                                <div class="mt-2 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>
                            
                            <div class="text-xs text-gray-500 whitespace-nowrap ml-4">
                                <div>In: <a href="{{ url_for('forum.category_view', id=topic.category_id) }}" class="text-blue-600 hover:underline">{{ topic.category.name }}</a></div>
                            </div>
                        </div>
                    </a>
                </div>
                {% endfor %}
            </div>
            
            <!-- Pagination -->
            {% if topics.pages > 1 %}
            <div class="px-6 py-4 bg-gray-50 border-t border-gray-200">
                <div class="flex justify-center">
                    <nav class="inline-flex rounded-md shadow">
                        {% if topics.has_prev %}
                        <a href="{{ url_for('user.profile', username=user.username, 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('user.profile', username=user.username, 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('user.profile', username=user.username, 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>
            </div>
            {% endif %}
            
            {% else %}
            <div class="p-6 text-center text-gray-500">
                This user hasn't created any topics yet.
            </div>
            {% endif %}
        </div>
        
        <!-- Recent Posts -->
        <div class="bg-white rounded-lg shadow overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-blue-50">
                <h2 class="text-xl font-bold text-gray-800">Recent Posts</h2>
            </div>
            
            {% if recent_posts %}
            <div class="divide-y divide-gray-200">
                {% for post in recent_posts %}
                <div class="p-4 hover:bg-gray-50">
                    <div>
                        <div class="flex justify-between items-start mb-2">
                            <div>
                                <a href="{{ url_for('forum.topic_view', id=post.topic_id) }}" class="text-lg font-medium text-gray-800 hover:text-blue-600">
                                    Re: {{ post.topic.title }}
                                </a>
                            </div>
                            <div class="text-xs text-gray-500">
                                {{ post.created_at.strftime('%b %d, %Y %H:%M') }}
                            </div>
                        </div>
                        
                        <div class="text-gray-700 line-clamp-2 text-sm mb-2">
                            {{ post.content|striptags|truncate(150) }}
                        </div>
                        
                        <div class="text-xs text-gray-500">
                            Posted in: <a href="{{ url_for('forum.category_view', id=post.topic.category_id) }}" class="text-blue-600 hover:underline">{{ post.topic.category.name }}</a>
                            <a href="{{ url_for('forum.topic_view', id=post.topic_id) }}#post-{{ post.id }}" class="text-blue-600 hover:underline ml-2">
                                View Post <i data-feather="arrow-right" class="w-3 h-3 inline"></i>
                            </a>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
            
            {% if current_user.id == user.id %}
            <div class="px-6 py-4 bg-gray-50 border-t border-gray-200">
                <a href="{{ url_for('user.user_posts') }}" class="inline-flex items-center text-blue-600 hover:underline">
                    View all my posts
                    <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
                </a>
            </div>
            {% endif %}
            
            {% else %}
            <div class="p-6 text-center text-gray-500">
                This user hasn't made any posts yet.
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}