{% extends 'base.html' %}
{% load static %}

{% block title %}{{ profile_user.username }} - Packs{% endblock %}

{% block content %}
    <div class="profile-header card">
        <div class="profile-avatar">
            {% if profile.avatar %}
                <img src="{{ profile.avatar_url }}" alt="{{ profile_user.username }} avatar">
            {% else %}
                <div class="default-avatar large">{{ profile_user.username|first|upper }}</div>
            {% endif %}
        </div>
        <div class="profile-info">
            <h1>{{ profile_user.username }}</h1>
            <p class="profile-joined"><i class="fas fa-calendar"></i> Joined {{ profile.joined|date:"F j, Y" }}</p>
            {% if is_owner %}
                <p><a href="{% url 'profiles:account' %}" class="btn btn-secondary"><i class="fas fa-cog"></i> Account Settings</a></p>
            {% endif %}
        </div>
    </div>

    <section class="card profile-section">
        <h2><i class="fas fa-comment"></i> Bio</h2>
        {% if is_owner %}
            {% if messages %}
                <ul class="messages">
                    {% for message in messages %}
                        <li>{{ message }}</li>
                    {% endfor %}
                </ul>
            {% endif %}
            <form method="post" action="{% url 'profiles:user_profile' profile_user.username %}">
                {% csrf_token %}
                <input type="hidden" name="action" value="bio">
                <div class="form-group">
                    {{ bio_form.bio.errors }}
                    {{ bio_form.bio }}
                </div>
                <button type="submit" class="btn btn-primary">Save bio</button>
            </form>
        {% else %}
            {% if profile.bio %}
                <p class="profile-bio">{{ profile.bio }}</p>
            {% else %}
                <p class="profile-bio-empty"><i class="fas fa-user"></i> {{ profile_user.username }} hasn't written a bio yet.</p>
            {% endif %}
        {% endif %}
    </section>

    <section class="home-section">
        <div class="home-section-header">
            <h2>Packs by {{ profile_user.username }}</h2>
        </div>
        <div class="pack-grid">
            {% comment %} Placeholder — replace with real Pack objects when the library model lands. {% endcomment %}
            <div class="pack-card pack-card-empty">
                <div class="pack-card-thumb">
                    <i class="fas fa-box-open"></i>
                </div>
                <div class="pack-card-body">
                    <h3>No packs yet</h3>
                    <p class="pack-card-desc">This creator hasn't published any datapacks.</p>
                </div>
            </div>
        </div>
    </section>
{% endblock %}