{% extends "base.html.jinja" %}
{% from "components/timestamp.html.jinja" import timeago as ts %}

{% block content %}
<section class="max-w-3xl mx-auto px-4 pt-12">
    <div class="flex items-start gap-6 mb-8">
        {# Avatar placeholder #}
        <div class="w-20 h-20 rounded-full bg-gray-200 flex items-center justify-center text-3xl font-bold text-gray-500 shrink-0">
            {{ profile.username[:1] | upper }}
        </div>
        <div>
            <h1 class="text-2xl font-bold text-gray-900">{{ profile.username }}</h1>
            {% if profile.created_at %}
            <p class="text-sm text-gray-500 mt-1">
                Member since
                {{ ts(profile.created_at) }}
            </p>
            {% endif %}
        </div>
    </div>

    <div class="border-t border-gray-200 pt-6">
        <h2 class="text-sm font-semibold text-gray-900 mb-4">
            {{ heatmap.total }} contribution{{ 's' if heatmap.total != 1 else '' }} in the last year
        </h2>

        {% if heatmap.weeks | length > 0 %}
        <div class="overflow-x-auto pb-2">
            <div class="inline-block">
                {# Month labels #}
                <div class="flex text-xs text-gray-400 mb-1" style="padding-left: 28px;">
                    {% set ns = namespace(last_col=-2) %}
                    {% for m in heatmap.month_labels %}
                        {% set gap = m.col - ns.last_col %}
                        <span style="width: {{ gap * 13 }}px; display: inline-block;">{{ m.label }}</span>
                        {% set ns.last_col = m.col %}
                    {% endfor %}
                </div>

                <div class="flex gap-0.5">
                    {# Day-of-week labels #}
                    <div class="flex flex-col gap-0.5 text-xs text-gray-400 pr-1" style="width: 24px;">
                        <span style="height: 11px;"></span>
                        <span style="height: 11px; line-height: 11px; font-size: 9px;">Mon</span>
                        <span style="height: 11px;"></span>
                        <span style="height: 11px; line-height: 11px; font-size: 9px;">Wed</span>
                        <span style="height: 11px;"></span>
                        <span style="height: 11px; line-height: 11px; font-size: 9px;">Fri</span>
                        <span style="height: 11px;"></span>
                    </div>

                    {# Grid of weeks #}
                    {% for week in heatmap.weeks %}
                    <div class="flex flex-col gap-0.5">
                        {% for day in week %}
                            {% if day.in_range %}
                                {% if day.count > 0 %}
                                <div
                                    class="rounded-sm"
                                    style="width: 11px; height: 11px; background: oklch(55% 0.2 293 / {{ day.opacity }});"
                                    title="{{ day.date }}: {{ day.count }} contribution{{ 's' if day.count != 1 else '' }}"
                                ></div>
                                {% else %}
                                <div
                                    class="rounded-sm bg-gray-100"
                                    style="width: 11px; height: 11px;"
                                    title="{{ day.date }}: 0 contributions"
                                ></div>
                                {% endif %}
                            {% else %}
                                <div style="width: 11px; height: 11px;"></div>
                            {% endif %}
                        {% endfor %}
                    </div>
                    {% endfor %}
                </div>

                {# Legend #}
                <div class="flex items-center justify-end gap-1 mt-2 text-xs text-gray-400">
                    <span>Less</span>
                    <div class="rounded-sm bg-gray-100" style="width: 11px; height: 11px;"></div>
                    <div class="rounded-sm" style="width: 11px; height: 11px; background: oklch(55% 0.2 293 / 0.25);"></div>
                    <div class="rounded-sm" style="width: 11px; height: 11px; background: oklch(55% 0.2 293 / 0.50);"></div>
                    <div class="rounded-sm" style="width: 11px; height: 11px; background: oklch(55% 0.2 293 / 0.75);"></div>
                    <div class="rounded-sm" style="width: 11px; height: 11px; background: oklch(55% 0.2 293 / 1.0);"></div>
                    <span>More</span>
                </div>
            </div>
        </div>
        {% else %}
        <p class="text-sm text-gray-500">No public activity yet.</p>
        {% endif %}
    </div>

    {# Recent releases #}
    <div class="border-t border-gray-200 pt-6 mt-6">
        <h2 class="text-sm font-semibold text-gray-900 mb-4">Recent releases</h2>
        {% if recent_releases | length > 0 %}
        <div class="space-y-3">
            {% for r in recent_releases %}
            <a href="/orgs/{{ r.org }}/projects/{{ r.project }}" class="flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-gray-50 transition-colors group">
                <div class="w-8 h-8 rounded bg-violet-100 flex items-center justify-center shrink-0">
                    <svg class="w-4 h-4 text-violet-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A2 2 0 013 12V7a4 4 0 014-4z" />
                    </svg>
                </div>
                <div class="min-w-0 flex-1">
                    <div class="flex items-center gap-2">
                        <span class="text-sm text-gray-500">{{ r.org }}/{{ r.project }}</span>
                        {% if r.version %}
                        <span class="text-xs font-mono px-1.5 py-0.5 rounded bg-violet-100 text-violet-700">{{ r.version }}</span>
                        {% endif %}
                    </div>
                    <div class="flex items-center gap-2 text-xs text-gray-400 mt-0.5">
                        {% if r.branch %}
                        <span class="font-mono">{{ r.branch }}</span>
                        {% endif %}
                        {% if r.commit_sha %}
                        <span class="font-mono">{{ r.commit_sha }}</span>
                        {% endif %}
                        <span>{{ ts(r.created_at) }}</span>
                    </div>
                </div>
                <svg class="w-4 h-4 text-gray-300 group-hover:text-gray-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                </svg>
            </a>
            {% endfor %}
        </div>
        {% else %}
        <p class="text-sm text-gray-500">No releases yet.</p>
        {% endif %}
    </div>

    {# Contributed projects #}
    <div class="border-t border-gray-200 pt-6 mt-6 pb-12">
        <h2 class="text-sm font-semibold text-gray-900 mb-4">Projects</h2>
        {% if contributed_projects | length > 0 %}
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
            {% for p in contributed_projects %}
            <a href="/orgs/{{ p.org }}/projects/{{ p.project }}" class="flex items-center gap-3 px-3 py-3 rounded-lg border border-gray-200 hover:border-gray-300 hover:bg-gray-50 transition-colors group">
                <div class="w-8 h-8 rounded bg-gray-100 flex items-center justify-center shrink-0">
                    <svg class="w-4 h-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
                    </svg>
                </div>
                <div class="min-w-0 flex-1">
                    <span class="text-sm font-medium text-gray-900 group-hover:text-violet-700">{{ p.org }}/{{ p.project }}</span>
                    <p class="text-xs text-gray-400 mt-0.5">{{ p.release_count }} release{{ 's' if p.release_count != 1 else '' }}</p>
                </div>
            </a>
            {% endfor %}
        </div>
        {% else %}
        <p class="text-sm text-gray-500">No project contributions yet.</p>
        {% endif %}
    </div>
</section>
{% endblock %}