{% extends 'base.html' %}
{% from 'components/rant_card.html' import render_rant_card %}

{% block content %}
<a href="/" class="btn btn-secondary">← Back to Feed</a>
<div class="profile-header">
    <div class="profile-avatar avatar" style="background: #{{ profile.avatar.b }}">
        {{ profile.username[0]|upper }}
    </div>
    <h1>{{ profile.username }}</h1>
    {% if profile.about %}
    <p style="margin-top: 1rem;">{{ escape_html(profile.about) }}</p>
    {% endif %}
    {% if profile.skills %}
    <p><strong>Skills:</strong> {{ escape_html(profile.skills) }}</p>
    {% endif %}
    {% if profile.location %}
    <p><strong>Location:</strong> {{ escape_html(profile.location) }}</p>
    {% endif %}
    {% if profile.github %}
    <p><strong>GitHub:</strong> <a href="https://github.com/{{ profile.github }}" target="_blank">{{ profile.github }}</a></p>
    {% endif %}
    {% if profile.website %}
    <p><strong>Website:</strong> <a href="{{ profile.website }}" target="_blank">{{ profile.website }}</a></p>
    {% endif %}
    <div class="profile-stats">
        <div class="stat">
            <div class="stat-value">{{ profile.score }}</div>
            <div class="stat-label">Score</div>
        </div>
        <div class="stat">
            <div class="stat-value">{{ rants|length }}</div>
            <div class="stat-label">Rants</div>
        </div>
        <div class="stat">
            <div class="stat-value">{{ comments|length }}</div>
            <div class="stat-label">Comments</div>
        </div>
    </div>
    {% if current_user and current_user.id == profile_user_id %}
    <button class="btn" onclick="showModal('edit-profile')" style="margin-top: 1rem;">Edit Profile</button>
    {% endif %}
</div>

<div class="tabs">
    <a href="/profile/{{ profile_user_id }}?tab=rants" class="tab {% if active_tab == 'rants' %}active{% endif %}">Rants</a>
    <a href="/profile/{{ profile_user_id }}?tab=comments" class="tab {% if active_tab == 'comments' %}active{% endif %}">Comments</a>
    <a href="/profile/{{ profile_user_id }}?tab=favorites" class="tab {% if active_tab == 'favorites' %}active{% endif %}">Favorites</a>
</div>

<div id="profileContent">
    {% if active_tab == 'rants' %}
        {% for rant in rants %}
            {{ render_rant_card(rant) }}
        {% endfor %}
    {% elif active_tab == 'comments' %}
        {% for comment in comments %}
        <div class="rant-card" onclick="window.location.href='/rant/{{ comment.rant_id }}';" style="cursor: pointer;">
            <div class="rant-content">{{ escape_html(comment.body) }}</div>
            <div class="rant-footer">
                <div class="rant-actions">
                    <button class="action-btn">++ {{ comment.score }}</button>
                </div>
                <div>{{ format_time(comment.created_time) }}</div>
            </div>
        </div>
        {% endfor %}
    {% elif active_tab == 'favorites' %}
        {% for rant in favorites %}
            {{ render_rant_card(rant) }}
        {% endfor %}
    {% endif %}
</div>
{% endblock %}