{% 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 %}