{% extends 'base.html' %}

{% block title %}Profil de {{ user.nickname }}{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto px-3 sm:px-6">
    <div class="mb-6 pt-6">
        <a href="{{ url_for('index') }}" class="inline-flex items-center text-slate-500 hover:text-blue-600 transition-colors font-medium text-sm">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1.5" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd" />
            </svg>
            Retour à l'accueil
        </a>
    </div>

    <!-- User Header -->
    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6 mb-6">
        <div class="flex items-center gap-4">
            <div class="w-16 h-16 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-white font-bold text-2xl shadow-md">
                {{ user.nickname[0]|upper }}
            </div>
            <div class="flex-1">
                <h1 class="text-2xl font-bold text-slate-900">{{ user.nickname }}</h1>
                <p class="text-slate-600">Membre depuis {{ user.created_at.strftime('%d %B %Y') }}</p>
                <p class="text-sm text-slate-500">{{ posts|length }} posts publiés</p>
            </div>
        </div>
    </div>

    <!-- Posts List -->
    <div class="space-y-4">
        <h2 class="text-xl font-semibold text-slate-900 mb-4">Posts récents</h2>

        {% for post in posts %}
        <div class="bg-white p-6 rounded-xl border border-slate-100 shadow-sm">
            <div class="flex items-start gap-4">
                <!-- Avatar -->
                <div class="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-white font-bold text-sm shadow-sm flex-shrink-0">
                    {{ user.nickname[0]|upper }}
                </div>

                <!-- Content -->
                <div class="flex-1 min-w-0">
                    <div class="flex items-center gap-2 mb-2">
                        <span class="font-semibold text-slate-900">{{ user.nickname }}</span>
                        <span class="text-slate-500">•</span>
                        <span class="text-sm text-slate-500">{{ post.created_at.strftime('%d/%m/%Y %H:%M') }}</span>
                        <span class="text-slate-500">•</span>
                        <a href="{{ url_for('board', slug=post.board.slug) }}" class="text-blue-600 hover:underline">/{{ post.board.slug }}/</a>
                    </div>

                    <div class="text-slate-800 mb-3 break-words">
                        {{ post.content|format_post }}
                    </div>

                    <!-- Media -->
                    {% if post.files %}
                    <div class="flex flex-wrap gap-2 mb-3">
                        {% for file in post.files %}
                            <div class="rounded-lg overflow-hidden border border-slate-200">
                                {% if file.filename.endswith(('.mp4', '.webm')) %}
                                <video controls class="max-w-full max-h-48">
                                    <source src="{{ url_for('static', filename='uploads/' + file.filename) }}" type="video/{{ file.filename.split('.')[-1] }}">
                                </video>
                                {% else %}
                                <img src="{{ url_for('static', filename='uploads/' + file.filename) }}" alt="Image" class="max-w-full max-h-48 object-cover">
                                {% endif %}
                            </div>
                        {% endfor %}
                    </div>
                    {% endif %}

                    <!-- Thread link if it's a reply -->
                    {% if post.thread_id %}
                    <a href="{{ url_for('thread', thread_id=post.thread_id) }}" class="text-sm text-blue-600 hover:underline">
                        Voir le fil complet
                    </a>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}

        {% if posts|length == 0 %}
        <div class="text-center text-slate-400 py-12 bg-white rounded-xl border border-slate-100 border-dashed">
            <p>Aucun post trouvé.</p>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}