{% extends "base.html" %}

{% block title %}{{ profile_user.username }}'s Profile - {{ brand_name }}{% endblock %}

{% block header_actions %}
{% if is_owner %}
<div id="edit-profile-header-btn-wrapper" class="relative group transition-all duration-500">
    <button id="edit-profile-btn"
        class="flex items-center justify-center h-12 w-12 rounded-2xl bg-white/5 border border-white/10 text-zinc-500 hover:text-blue-400 hover:bg-white/10 hover:border-blue-500/30 transition-all duration-300 shadow-sm relative overflow-hidden">
        <i data-lucide="edit-3" class="h-5 w-5 group-hover:rotate-12 transition-transform duration-500"></i>
    </button>
    <div
        class="absolute right-0 top-full mt-3 px-3 py-1.5 glass-panel rounded-xl text-[10px] font-black uppercase tracking-widest text-white opacity-0 group-hover:opacity-100 transition-all duration-300  whitespace-nowrap pointer-events-none z-50 shadow-2xl border border-white/10">
        Profile Editor
    </div>
</div>
{% endif %}
{% endblock %}

{% block main_content %}
<style>
    #profile-header {
        --profile-tr: {{ profile_theme_rgb[0] }};
        --profile-tg: {{ profile_theme_rgb[1] }};
        --profile-tb: {{ profile_theme_rgb[2] }};
    }
    .profile-identity-accent {
        color: rgb(var(--profile-tr), var(--profile-tg), var(--profile-tb));
    }
</style>
<div id="profile-header" class="page-header-glass flex-shrink-0 mb-8 py-6 md:py-8 px-4 md:px-8 transition-all duration-500">
    {# === DESKTOP: Horizontal layout with bio preview and action row === #}
    <div class="hidden md:block">
        <div class="flex items-start gap-6">
            {# PFP - never shrinks #}
            <div class="relative group flex-shrink-0">
                {% if profile_user.profile_picture == 'default_avatar.png' %}
                <div class="w-24 h-24 min-w-[6rem] min-h-[6rem] bg-blue-500/10 rounded-3xl border border-blue-500/20 shadow-2xl flex items-center justify-center transition-transform duration-500 group-hover:rotate-6">
                    <i data-lucide="user" class="h-12 w-12 text-blue-400"></i>
                </div>
                {% else %}
                <img src="{{ url_for('static', filename=profile_user.profile_picture) }}" alt="Profile"
                    class="w-24 h-24 min-w-[6rem] min-h-[6rem] rounded-3xl object-cover border-2 border-white/10 shadow-2xl transition-transform duration-500 group-hover:rotate-6">
                {% endif %}
            </div>
            {# Identity: username blue, real name + joined on second row #}
            <div class="flex-1 min-w-0">
                <h2 class="text-3xl md:text-4xl font-black text-white leading-tight tracking-tighter">{{ profile_user.username }}</h2>
                <div class="flex flex-wrap items-start justify-between gap-x-4 gap-y-1 mt-1">
                    <div class="flex flex-col gap-0.5">
                        {% if profile_user.real_name | default('') %}
                        <span class="profile-identity-accent text-base font-medium">{{ profile_user.real_name }}</span>
                        {% endif %}
                        {% if profile_user.pronouns %}
                        <span class="text-zinc-500 text-sm">{{ profile_user.pronouns }}</span>
                        {% endif %}
                    </div>
                    <span class="flex items-center gap-1.5 text-zinc-500 text-xs font-medium {% if not (profile_user.real_name or profile_user.pronouns) %}ml-auto{% endif %}">
                        <i data-lucide="calendar" class="h-3.5 w-3.5 opacity-60"></i>
                        Joined {{ profile_user.created_at.strftime('%b %Y') if profile_user.created_at else 'Unknown' }}
                    </span>
                </div>
                {% if profile_user.show_email %}
                <p class="profile-identity-accent font-bold tracking-widest uppercase text-[10px] mt-1">{{ profile_user.email }}</p>
                {% endif %}
                {# Action row: followers/following left, View Bio + Follow right #}
                <div class="flex flex-wrap items-center justify-between gap-2 mt-4 profile-header-actions">
                    <div class="flex items-center gap-2">
                        <button type="button" data-action="followers"
                            class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-white/5 hover:bg-white/10 border border-white/10 text-zinc-300 hover:text-blue-400 text-xs font-medium transition-all">
                            <i data-lucide="users" class="h-3.5 w-3.5"></i>
                            <span class="followers-count-val">{{ followers_count }}</span> followers
                        </button>
                        <button type="button" data-action="following"
                            class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-white/5 hover:bg-white/10 border border-white/10 text-zinc-300 hover:text-blue-400 text-xs font-medium transition-all">
                            <i data-lucide="user-plus" class="h-3.5 w-3.5"></i>
                            <span class="following-count-val">{{ following_count }}</span> following
                        </button>
                    </div>
                    <div class="flex items-center gap-2">
                        <button type="button" data-action="view-bio"
                            class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-white/5 hover:bg-white/10 border border-white/10 text-zinc-300 hover:text-blue-400 text-xs font-medium transition-all">
                            <i data-lucide="scroll-text" class="h-3.5 w-3.5"></i>
                            View Bio
                        </button>
                        {% if not is_owner and g.user %}
                        <button type="button" data-action="follow" data-username="{{ profile_user.username }}" data-initial-state="{{ 'following' if is_following else 'follow' }}"
                            class="inline-flex items-center gap-1.5 px-4 py-1.5 rounded-lg text-xs font-semibold transition-all {% if is_following %}bg-blue-600 hover:bg-blue-500 text-white{% else %}bg-white/5 hover:bg-blue-500/20 border border-white/10 text-blue-400{% endif %}">
                            <i data-lucide="user-plus" class="h-3.5 w-3.5"></i>
                            <span class="follow-btn-text">{{ 'Following' if is_following else 'Follow' }}</span>
                        </button>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    {# === MOBILE: Identity-first, actions in subtle secondary row === #}
    <div class="md:hidden">
        <div class="flex items-start gap-4 min-w-0">
            {# PFP - prominent, never shrinks #}
            <div class="relative group flex-shrink-0">
                {% if profile_user.profile_picture == 'default_avatar.png' %}
                <div class="relative w-20 h-20 min-w-[5rem] min-h-[5rem] bg-blue-500/10 rounded-3xl border border-blue-500/20 flex items-center justify-center transition-transform duration-500 group-hover:rotate-6">
                    <i data-lucide="user" class="h-10 w-10 text-blue-400"></i>
                </div>
                {% else %}
                <img src="{{ url_for('static', filename=profile_user.profile_picture) }}" alt="Profile"
                    class="relative w-20 h-20 min-w-[5rem] min-h-[5rem] rounded-3xl object-cover border-2 border-white/10 shadow-lg transition-transform duration-500 group-hover:rotate-6">
                {% endif %}
            </div>
            {# Identity only - what user LIKES: Username, Real Name, Pronouns #}
            <div class="flex flex-col min-w-0 flex-1 pt-0.5">
                <h2 class="text-xl font-bold text-white leading-tight">{{ profile_user.username }}</h2>
                {% if profile_user.real_name | default('') %}
                <h2 class="text-lg font-bold profile-identity-accent leading-tight mt-0.5">{{ profile_user.real_name }}</h2>
                {% endif %}
                {% if profile_user.pronouns %}
                <span class="text-zinc-500 text-sm mt-0.5">{{ profile_user.pronouns }}</span>
                {% endif %}
                {% if profile_user.show_email %}
                <p class="profile-identity-accent font-bold tracking-widest uppercase text-[9px] mt-1 break-all">{{ profile_user.email }}</p>
                {% endif %}
            </div>
        </div>
        {# Secondary row - what user doesn't like, so we make it subtle: text-style stats + compact actions #}
        <div class="mt-4 pt-4 border-t border-white/5 flex flex-wrap items-center gap-x-3 gap-y-2 text-xs profile-header-actions">
            <button type="button" data-action="followers" class="inline-flex items-center gap-1 text-zinc-500 hover:text-blue-400 transition-colors">
                <i data-lucide="users" class="h-3 w-3"></i>
                <span class="followers-count-val">{{ followers_count }}</span> followers
            </button>
            <span class="text-zinc-600">·</span>
            <button type="button" data-action="following" class="inline-flex items-center gap-1 text-zinc-500 hover:text-blue-400 transition-colors">
                <i data-lucide="user-plus" class="h-3 w-3"></i>
                <span class="following-count-val">{{ following_count }}</span> following
            </button>
            <button type="button" data-action="view-bio" class="inline-flex items-center gap-1 text-zinc-500 hover:text-blue-400 transition-colors ml-auto">
                <i data-lucide="scroll-text" class="h-3 w-3"></i>
                View Bio
            </button>
            {% if not is_owner and g.user %}
            <button type="button" data-action="follow" data-username="{{ profile_user.username }}" data-initial-state="{{ 'following' if is_following else 'follow' }}"
                class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold transition-all {% if is_following %}bg-blue-600 text-white{% else %}bg-blue-500/20 text-blue-400 border border-blue-500/30{% endif %}">
                <i data-lucide="user-plus" class="h-3 w-3"></i>
                <span class="follow-btn-text">{{ 'Following' if is_following else 'Follow' }}</span>
            </button>
            {% endif %}
        </div>
        <div class="flex items-center gap-2 text-zinc-500 text-[10px] mt-2">
            <i data-lucide="calendar" class="h-3 w-3 opacity-60"></i>
            <span>Joined {{ profile_user.created_at.strftime('%B %Y') if profile_user.created_at else 'Unknown' }}</span>
        </div>
    </div>
</div>

<div class="w-[95%] md:w-[90%] xl:w-[85%] mx-auto py-6 md:py-8 space-y-12 text-zinc-300">


    <div class="space-y-12">
        {# --- Contribution Activity --- #}
        {% if profile_user.show_activity %}
        <section class="glass-panel rounded-3xl px-2 py-6 md:p-8">
            <div class="flex items-center justify-between mb-8">
                <h2 class="text-xl font-bold text-white flex items-center">
                    <span class="w-2 h-8 rounded-full mr-4"
                        style="background-color: rgb({{ profile_theme_rgb[0] }}, {{ profile_theme_rgb[1] }}, {{ profile_theme_rgb[2] }}); box-shadow: 0 0 15px rgba({{ profile_theme_rgb[0] }}, {{ profile_theme_rgb[1] }}, {{ profile_theme_rgb[2] }}, 0.45);"></span>
                    Activity Insights
                </h2>
            </div>
            <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-8">
                <div
                    class="bg-white/5 p-4 rounded-2xl border border-white/5 text-center transition-all hover:bg-white/10 group">
                    <p class="text-2xl font-black text-emerald-400 transition-transform duration-500"
                        id="total-contributions-stat">{{ contribution_stats.total_contributions }}</p>
                    <p class="text-[10px] font-bold text-zinc-500 uppercase tracking-widest mt-1">Total</p>
                </div>
                <div
                    class="bg-white/5 p-4 rounded-2xl border border-white/5 text-center transition-all hover:bg-white/10 group">
                    <p class="text-2xl font-black text-blue-400 transition-transform duration-500"
                        id="current-streak-stat">{{ contribution_stats.current_streak }}</p>
                    <p class="text-[10px] font-bold text-zinc-500 uppercase tracking-widest mt-1">Streak</p>
                </div>
                <div
                    class="bg-white/5 p-4 rounded-2xl border border-white/5 text-center transition-all hover:bg-white/10 group">
                    <p class="text-2xl font-black text-purple-400 transition-transform duration-500"
                        id="longest-streak-stat">{{ contribution_stats.longest_streak }}</p>
                    <p class="text-[10px] font-bold text-zinc-500 uppercase tracking-widest mt-1">Best</p>
                </div>
                <div
                    class="bg-white/5 p-4 rounded-2xl border border-white/5 text-center transition-all hover:bg-white/10 group">
                    <p class="text-2xl font-black text-orange-400 transition-transform duration-500"
                        id="average-contributions-stat">...</p>
                    <p class="text-[10px] font-bold text-zinc-500 uppercase tracking-widest mt-1">Avg</p>
                </div>
            </div>

            <div class="relative bg-zinc-950/40 rounded-2xl p-6 border border-white/5 shadow-inner">
                <div id="graph-container" class="w-full h-[220px] relative"></div>
                <div id="graph-legend-stats"
                    class="mt-4 pt-4 border-t border-white/5 flex justify-between items-center">
                    <div class="flex items-center text-xs font-bold text-zinc-500 space-x-4">
                        <span class="flex items-center"><span class="w-2 h-2 rounded-full mr-2"
                            style="background-color: rgb({{ profile_theme_rgb[0] }}, {{ profile_theme_rgb[1] }}, {{ profile_theme_rgb[2] }});"></span>
                            High</span>
                        <span class="flex items-center"><span class="w-2 h-2 rounded-full mr-2 ring-1 ring-white/20"
                            style="background-color: rgba({{ profile_theme_rgb[0] }}, {{ profile_theme_rgb[1] }}, {{ profile_theme_rgb[2] }}, 0.28);"></span>
                            Low</span>
                    </div>
                    <div id="current-date-tooltip"
                        class="text-xs font-bold text-zinc-400 bg-white/5 px-3 py-1.5 rounded-lg border border-white/5">
                        Hover insights</div>
                </div>
            </div>
        </section>
        {% endif %}

        {# --- Pinned Repositories --- #}
        <section>
            <div class="flex items-center mb-6 px-1">
                <h2 class="text-xl font-bold text-white flex items-center">
                    <i data-lucide="pin" class="h-5 w-5 mr-3 text-blue-400 rotate-45"></i>
                    Highlights
                </h2>
            </div>
            <div class="grid grid-cols-1 gap-6">
                {% if pinned_repos %}
                {% for repo in pinned_repos %}
                <a href="{{ url_for('git.view_repository', repo_owner=profile_user.username, repo_name=repo.repo_name) }}"
                    class="glass-panel block p-5 md:p-6 rounded-3xl hover:bg-white/10 transition-all duration-300 relative group overflow-hidden">
                    <div
                        class="absolute top-0 right-0 w-32 h-32 bg-blue-500/5 blur-3xl -z-10 group-hover:bg-blue-500/10 transition-all">
                    </div>
                    <div class="flex items-start justify-between mb-4">
                        <div class="flex items-center">
                            <i data-lucide="book" class="h-4 w-4 mr-2 text-blue-400"></i>
                            <h3
                                class="text-lg font-bold text-white group-hover:text-blue-400 transition-colors truncate">
                                {{ repo.repo_name }}</h3>
                        </div>
                        <span
                            class="text-[10px] font-black uppercase tracking-widest px-2.5 py-1 rounded-full border {{ 'border-emerald-500/30 text-emerald-400 bg-emerald-500/5 shadow-[0_0_10px_rgba(16,185,129,0.1)]' if repo.visibility == 'public' else 'border-red-500/30 text-red-400 bg-red-500/5 shadow-[0_0_10px_rgba(239,68,68,0.1)]' }}">
                            {{ repo.visibility }}
                        </span>
                    </div>
                    <p class="text-sm text-zinc-400 line-clamp-2 mb-6 min-h-[40px]">{{ ((repo.description or '')[:100] + ('…' if (repo.description or '')|length > 100 else '')) or 'No description provided.' }}</p>
                    <div class="flex items-center gap-4 text-xs font-bold text-zinc-500">
                        {% if repo.language %}
                        <div class="flex items-center">
                            <span class="w-2 h-2 rounded-full bg-blue-500 mr-2"></span>
                            {{ repo.language }}
                        </div>
                        {% endif %}
                        <div class="flex items-center">
                            <i data-lucide="star" class="h-3.5 w-3.5 mr-1.5"></i>
                            {{ repo.stars or 0 }}
                        </div>
                    </div>
                </a>
                {% endfor %}
                {% else %}
                <p class="text-zinc-600 text-center py-12 glass-panel rounded-3xl col-span-full border-dashed">No
                    featured projects yet.</p>
                {% endif %}
            </div>
        </section>

        {# --- Contributed Repositories Section --- #}
        {% if contributed_repos %}
        <section class="glass-panel rounded-3xl px-2 py-6 md:p-8">
            <h2 class="text-xl font-bold text-white mb-8 px-1">Collaborations</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {% for repo in contributed_repos %}
                <a href="{{ url_for('git.view_repository', repo_owner=repo.owner_username, repo_name=repo.repo_name) }}"
                    class="block p-5 bg-white/5 border border-white/5 rounded-2xl hover:bg-white/10 transition-all duration-300 group">
                    <p class="text-xs text-blue-500 font-bold mb-1 opacity-70 group-hover:opacity-100">{{
                        repo.owner_username }} /</p>
                    <h3 class="text-sm font-bold text-zinc-200 group-hover:text-white">{{ repo.repo_name }}</h3>
                </a>
                {% endfor %}
            </div>
        </section>
        {% endif %}

        {# --- All Repositories Section --- #}
        <section class="glass-panel rounded-3xl px-2 py-6 md:p-8 flex flex-col">
            <h2 class="text-xl font-bold text-white mb-8 px-1">All Work</h2>
            <div class="space-y-4">
                {% if all_owned_repos %}
                {% for repo in all_owned_repos %}
                <a href="{{ url_for('git.view_repository', repo_owner=profile_user.username, repo_name=repo.repo_name) }}"
                    class="block p-5 bg-white/5 border border-white/5 rounded-2xl hover:bg-white/10 hover:border-white/10 transition-all duration-300 group">
                    <div class="flex items-center justify-between mb-2">
                        <span
                            class="text-sm font-bold text-zinc-200 group-hover:text-white transition-colors truncate">{{
                            repo.repo_name }}</span>
                        <i data-lucide="arrow-up-right"
                            class="h-3 w-3 text-zinc-600 group-hover:text-blue-400 transition-all"></i>
                    </div>
                    <div
                        class="flex items-center gap-3 text-[10px] font-black text-zinc-500 uppercase tracking-tighter">
                        <span>{{ repo.language or 'Plain' }}</span>
                        <span class="w-1 h-1 rounded-full bg-zinc-700"></span>
                        <span>{{ repo.stars or 0 }} stars</span>
                    </div>
                </a>
                {% endfor %}
                {% else %}
                <p class="text-zinc-600 text-center py-20 italic">Empty workspace.</p>
                {% endif %}
            </div>

            <div class="mt-8">
                {% from "pagination_controls.html" import render_pagination %}
                {{ render_pagination(current_page, total_owned_pages, limit, 'profile.user_profile_by_username_route',
                {'username': profile_user.username}, total_count=total_owned_count, item_noun='repositories') }}
            </div>
        </section>
    </div>




</div>



{% endblock %}

{% block scripts %}
<script>
    function initializeProfilePage() {
        const editProfileModal = document.getElementById('editProfileModal');
        // --- Manifesto Modal Logic (event delegation for desktop + mobile) ---
        const manifestoModal = document.getElementById('manifestoModal');
        const manifestoCloseBtn = document.getElementById('manifesto-close-btn');
        const manifestoCloseBackdrop = document.getElementById('manifesto-close-backdrop');
        const profileHeader = document.getElementById('profile-header');

        if (profileHeader && manifestoModal) {
            profileHeader.addEventListener('click', (e) => {
                if (e.target.closest('[data-action="view-bio"]')) {
                    manifestoModal.classList.remove('hidden');
                    setTimeout(() => {
                        manifestoModal.classList.add('modal-visible');
                        manifestoModal.classList.remove('modal-hidden');
                    }, 10);
                }
            });

            const closeManifesto = () => {
                manifestoModal.classList.add('modal-hidden');
                manifestoModal.classList.remove('modal-visible');
                setTimeout(() => {
                    manifestoModal.classList.add('hidden');
                }, 300);
            };

            if (manifestoCloseBtn) manifestoCloseBtn.addEventListener('click', closeManifesto);
            if (manifestoCloseBackdrop) {
                manifestoCloseBackdrop.addEventListener('click', (e) => {
                    if (e.target === manifestoCloseBackdrop) { // Only close if clicking the backdrop itself
                        closeManifesto();
                    }
                });
            }
        }

        const editProfileBtn = document.getElementById('edit-profile-btn');
        const editProfileCancelBtn = document.getElementById('edit-profile-cancel-btn');
        const editProfileCloseBtn = document.getElementById('edit-profile-close-btn');

        const openModal = window.openModalAnimation || function (modal) { modal && modal.classList.remove('hidden'); };
        const closeModal = window.closeModalAnimation || function (modal) { modal && modal.classList.add('hidden'); };

        if (editProfileCancelBtn) {
            editProfileCancelBtn.addEventListener('click', () => closeModal(editProfileModal));
        }

        if (editProfileCloseBtn) {
            editProfileCloseBtn.addEventListener('click', () => closeModal(editProfileModal));
        }

        if (editProfileModal) {
            editProfileModal.addEventListener('click', (e) => {
                if (e.target.classList.contains('modal-backdrop') || e.target === editProfileModal) {
                    closeModal(editProfileModal);
                }
            });
        }

        const fullRepos = {{ full_owned_repos_for_pinning | tojson | safe
    }};



    const pinnedIds = new Set({{ (pinned_repo_ids_set | list) | tojson | safe }});


    let filteredRepos = [...fullRepos];
    let pinPage = 1;
    const pinLimit = 5;

    const pinListContainer = document.getElementById('pin-repo-list');
    const pinSearchInput = document.getElementById('pin-repo-search');
    const pinPrevBtn = document.getElementById('pin-repo-prev');
    const pinNextBtn = document.getElementById('pin-repo-next');
    const pinPaginationInfo = document.getElementById('pin-repo-pagination-info');

    function renderPinList() {
        if (!pinListContainer) return;
        const start = (pinPage - 1) * pinLimit;
        const end = start + pinLimit;
        const pageData = filteredRepos.slice(start, end);
        const totalPages = Math.ceil(filteredRepos.length / pinLimit) || 1;

        pinListContainer.innerHTML = '';
        if (pageData.length === 0) {
            pinListContainer.innerHTML = '<p class="text-[10px] text-zinc-600 text-center py-4">No repositories found.</p>';
        } else {
            pageData.forEach(repo => {
                const label = document.createElement('label');
                label.className = 'flex items-center justify-between p-3 bg-white/5 hover:bg-white/10 rounded-2xl border border-white/5 transition-all cursor-pointer group animate-in fade-in slide-in-from-bottom-2 duration-300';
                const isChecked = pinnedIds.has(repo.id);
                label.innerHTML = `
                        <span class="flex items-center text-xs font-bold text-zinc-400 group-hover:text-white transition-colors">
                            <input type="checkbox" name="pinned_repos" value="${repo.id}" ${isChecked ? 'checked' : ''}
                                class="w-4 h-4 mr-3 bg-zinc-900 border-white/10 rounded-lg text-blue-500 focus:ring-0 focus:ring-offset-0 transition-all cursor-pointer">
                            ${repo.repo_name}
                        </span>`;
                const checkbox = label.querySelector('input');
                checkbox.addEventListener('change', () => {
                    if (checkbox.checked) pinnedIds.add(repo.id);
                    else pinnedIds.delete(repo.id);
                });
                pinListContainer.appendChild(label);
            });
        }
        if (pinPaginationInfo) pinPaginationInfo.textContent = `Page ${pinPage} of ${totalPages}`;
        if (pinPrevBtn) pinPrevBtn.disabled = pinPage === 1;
        if (pinNextBtn) pinNextBtn.disabled = pinPage === totalPages;
    }

    if (pinSearchInput) {
        pinSearchInput.addEventListener('input', (e) => {
            const query = e.target.value.toLowerCase();
            filteredRepos = fullRepos.filter(repo => repo.repo_name.toLowerCase().includes(query));
            pinPage = 1;
            renderPinList();
        });
    }

    if (pinPrevBtn) pinPrevBtn.addEventListener('click', () => { if (pinPage > 1) { pinPage--; renderPinList(); } });
    if (pinNextBtn) pinNextBtn.addEventListener('click', () => {
        const totalPages = Math.ceil(filteredRepos.length / pinLimit);
        if (pinPage < totalPages) { pinPage++; renderPinList(); }
    });

    renderPinList();

    if (window.lucide && typeof window.lucide.createIcons === 'function') {
        window.lucide.createIcons();
    }

    const contributionStats = {{ contribution_stats | tojson | safe }};
    const contributionData = contributionStats.grid_data || [];
    const totalContributions = contributionStats.total_contributions || 0;
    const accountCreationDateStr = {{ account_creation_date_iso | tojson | safe }};

    let daysForAverage = 31;

    if (accountCreationDateStr) {
        const accountCreationDate = new Date(accountCreationDateStr);
        const today = new Date();
        const timeDiff = today - accountCreationDate;
        if (timeDiff > 0) {
            const daysSinceCreation = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
            if (daysSinceCreation < 31) daysForAverage = daysSinceCreation;
        }
    }
    if (daysForAverage < 1) daysForAverage = 1;
    const averageDailyContributions = (totalContributions / daysForAverage).toFixed(2);
    const avgStatEl = document.getElementById('average-contributions-stat');
    if (avgStatEl) avgStatEl.textContent = averageDailyContributions;

    const graphContainer = document.getElementById('graph-container');
    const currentDateTooltip = document.getElementById('current-date-tooltip');
    const profileThemeRgb = {{ profile_theme_rgb | tojson | safe }};

    function rgbToHsl(r, g, b) {
        r /= 255; g /= 255; b /= 255;
        const max = Math.max(r, g, b), min = Math.min(r, g, b);
        let h = 0, s = 0;
        const l = (max + min) / 2;
        if (max !== min) {
            const d = max - min;
            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
            switch (max) {
                case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
                case g: h = ((b - r) / d + 2) / 6; break;
                default: h = ((r - g) / d + 4) / 6; break;
            }
        }
        return [h * 360, s, l];
    }
    function hslToRgb(h, s, l) {
        h /= 360;
        let r, g, b;
        if (s === 0) { r = g = b = l; }
        else {
            const hue2rgb = (p, q, t) => {
                if (t < 0) t += 1; if (t > 1) t -= 1;
                if (t < 1 / 6) return p + (q - p) * 6 * t;
                if (t < 1 / 2) return q;
                if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
                return p;
            };
            const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
            const p = 2 * l - q;
            r = hue2rgb(p, q, h + 1 / 3);
            g = hue2rgb(p, q, h);
            b = hue2rgb(p, q, h - 1 / 3);
        }
        return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
    }
    /** Low activity: light, desaturated. High: saturated, richer (same hue as profile theme). */
    function contributionLevelColor(count, maxCount, br, bg, bb) {
        const t = maxCount > 0 ? Math.min(1, count / maxCount) : 0;
        let h, s0, l0;
        [h, s0, l0] = rgbToHsl(br, bg, bb);
        if (s0 < 0.04) h = 222;
        const sat = 0.1 + 0.9 * t;
        const light = 0.78 - 0.36 * t;
        const [rr, gg, bb2] = hslToRgb(h, sat, light);
        return `rgb(${rr},${gg},${bb2})`;
    }

    function renderContributionGraph(data) {
        if (!graphContainer || graphContainer.clientHeight === 0) {
            if (graphContainer) setTimeout(() => renderContributionGraph(data), 100);
            return;
        }
        if (data.length === 0) {
            graphContainer.innerHTML = '<p class="text-center text-zinc-500 pt-8">No contribution data available.</p>';
            return;
        }

        const [tr, tg, tb] = profileThemeRgb.length === 3 ? profileThemeRgb : [161, 161, 170];

        const width = graphContainer.clientWidth;
        const height = graphContainer.clientHeight;
        const padding = 10;
        const innerWidth = width - 2 * padding;
        const innerHeight = height - 2 * padding;
        const dataLength = data.length;
        const maxCount = Math.max(...data.map(d => d.count)) || 1;
        const adjustedMaxCount = maxCount * 1.2;
        const yScaleFactor = adjustedMaxCount > 0 ? innerHeight / adjustedMaxCount : 0;
        const xScaleFactor = (dataLength > 1) ? innerWidth / (dataLength - 1) : 0;

        function xAt(i) {
            if (dataLength <= 1) return padding + innerWidth / 2;
            return padding + i * xScaleFactor;
        }

        let areaPath = `M ${padding} ${height - padding}`;
        data.forEach((d, i) => {
            const x = xAt(i);
            const y = height - padding - d.count * yScaleFactor;
            areaPath += (i === 0 ? `L ${x} ${y}` : ` L ${x} ${y}`);
        });
        areaPath += ` L ${xAt(dataLength - 1)} ${height - padding} Z`;

        const gradId = 'profileAreaGrad-' + Math.random().toString(36).slice(2, 9);
        const topFill = contributionLevelColor(maxCount, maxCount, tr, tg, tb);
        const bottomFill = contributionLevelColor(0, maxCount, tr, tg, tb);

        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svg.setAttribute('viewBox', `0 0 ${width} ${height}`);
        svg.setAttribute('width', '100%');
        svg.setAttribute('height', '100%');
        svg.classList.add('transition-opacity', 'duration-300', 'opacity-0');

        const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
        const linearGradient = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient');
        linearGradient.setAttribute('id', gradId);
        linearGradient.setAttribute('x1', '0%'); linearGradient.setAttribute('y1', '0%');
        linearGradient.setAttribute('x2', '0%'); linearGradient.setAttribute('y2', '100%');

        const stop1 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
        stop1.setAttribute('offset', '0%'); stop1.setAttribute('stop-color', topFill); stop1.setAttribute('stop-opacity', '0.55');
        const stop2 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
        stop2.setAttribute('offset', '100%'); stop2.setAttribute('stop-color', bottomFill); stop2.setAttribute('stop-opacity', '0.06');

        linearGradient.appendChild(stop1); linearGradient.appendChild(stop2);
        defs.appendChild(linearGradient); svg.appendChild(defs);

        const area = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        area.setAttribute('d', areaPath); area.setAttribute('fill', 'url(#' + gradId + ')');
        svg.appendChild(area);

        const linesGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
        svg.appendChild(linesGroup);
        for (let i = 0; i < dataLength - 1; i++) {
            const d0 = data[i], d1 = data[i + 1];
            const x0 = xAt(i), y0 = height - padding - d0.count * yScaleFactor;
            const x1 = xAt(i + 1), y1 = height - padding - d1.count * yScaleFactor;
            const segMax = Math.max(d0.count, d1.count);
            const seg = document.createElementNS('http://www.w3.org/2000/svg', 'line');
            seg.setAttribute('x1', x0); seg.setAttribute('y1', y0);
            seg.setAttribute('x2', x1); seg.setAttribute('y2', y1);
            seg.setAttribute('stroke', contributionLevelColor(segMax, maxCount, tr, tg, tb));
            seg.setAttribute('stroke-width', '2.5');
            seg.setAttribute('stroke-linecap', 'round');
            linesGroup.appendChild(seg);
        }
        if (dataLength === 1) {
            const d0 = data[0];
            const cx = xAt(0), cy = height - padding - d0.count * yScaleFactor;
            const dotOnly = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
            dotOnly.setAttribute('cx', cx); dotOnly.setAttribute('cy', cy); dotOnly.setAttribute('r', 4);
            dotOnly.setAttribute('fill', contributionLevelColor(d0.count, maxCount, tr, tg, tb));
            linesGroup.appendChild(dotOnly);
        }

        const dotsGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
        svg.appendChild(dotsGroup);

        data.forEach((d, i) => {
            const x = xAt(i);
            const y = height - padding - d.count * yScaleFactor;
            const dot = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
            dot.setAttribute('cx', x); dot.setAttribute('cy', y); dot.setAttribute('r', 3);
            dot.setAttribute('fill', contributionLevelColor(d.count, maxCount, tr, tg, tb));
            dot.setAttribute('opacity', 0);
            const hitArea = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
            hitArea.setAttribute('cx', x); hitArea.setAttribute('cy', y); hitArea.setAttribute('r', 15);
            hitArea.setAttribute('fill', 'transparent'); hitArea.classList.add('graph-hit-area');
            dotsGroup.appendChild(hitArea); dotsGroup.appendChild(dot);
        });

        graphContainer.innerHTML = ''; graphContainer.appendChild(svg);
        setTimeout(() => svg.classList.remove('opacity-0'), 10);

        const dateOptions = { year: 'numeric', month: 'short', day: 'numeric' };
        svg.addEventListener('mousemove', (e) => {
            const rect = svg.getBoundingClientRect();
            const scaleX = width / rect.width;
            const mouseX = (e.clientX - rect.left) * scaleX;
            let closestIndex = 0, minDistance = Infinity;
            for (let i = 0; i < dataLength; i++) {
                const x = xAt(i);
                const distance = Math.abs(mouseX - x);
                if (distance < minDistance) { minDistance = distance; closestIndex = i; }
            }
            const dots = dotsGroup.querySelectorAll('circle:not(.graph-hit-area)');
            const hi = contributionLevelColor(data[closestIndex].count, maxCount, tr, tg, tb);
            dots.forEach((dot, i) => {
                if (i === closestIndex) {
                    dot.setAttribute('opacity', 1);
                    dot.setAttribute('r', 5);
                    dot.setAttribute('fill', hi);
                } else {
                    dot.setAttribute('opacity', 0);
                    dot.setAttribute('r', 3);
                    dot.setAttribute('fill', contributionLevelColor(data[i].count, maxCount, tr, tg, tb));
                }
            });
            const d = data[closestIndex];
            const date = new Date(d.date).toLocaleDateString('en-US', dateOptions);
            currentDateTooltip.innerHTML = `<span class="text-zinc-400">${date}:</span> <span class="font-bold text-zinc-300">${d.count} contributions</span>`;
        });

        svg.addEventListener('mouseleave', () => {
            const dots = dotsGroup.querySelectorAll('circle:not(.graph-hit-area)');
            dots.forEach((dot, i) => {
                dot.setAttribute('opacity', 0);
                dot.setAttribute('r', 3);
                dot.setAttribute('fill', contributionLevelColor(data[i].count, maxCount, tr, tg, tb));
            });
            currentDateTooltip.textContent = 'Hover insights';
        });
    }

    setTimeout(() => renderContributionGraph(contributionData), 50);

    if (window.profileGraphResizeHandler) window.removeEventListener('resize', window.profileGraphResizeHandler);
    window.profileGraphResizeHandler = () => {
        clearTimeout(window.graphResizeTimeout);
        window.graphResizeTimeout = setTimeout(() => renderContributionGraph(contributionData), 200);
    };
    window.addEventListener('resize', window.profileGraphResizeHandler);

    const profilePictureInput = document.getElementById('profile_picture');
    const profilePicturePreview = document.getElementById('profile-picture-preview');
    const profilePictureCurrent = document.getElementById('profile-picture-current');

    if (profilePictureInput && profilePicturePreview) {
        profilePictureInput.addEventListener('change', function () {
            const file = this.files[0];
            if (file) {
                const allowedTypes = ['image/gif', 'image/png', 'image/jpeg', 'image/webp'];
                if (!allowedTypes.includes(file.type)) {
                    alert('Invalid file type.'); profilePictureInput.value = ''; return;
                }
                if (file.size > 8 * 1024 * 1024) {
                    alert('File too large.'); profilePictureInput.value = ''; return;
                }
                const reader = new FileReader();
                reader.onload = (e) => {
                    profilePicturePreview.src = e.target.result;
                    profilePicturePreview.classList.remove('hidden');
                    if (profilePictureCurrent) profilePictureCurrent.classList.add('opacity-50');
                };
                reader.readAsDataURL(file);
            }
        });
    }
}

    // Event delegation for profile header (follow-list modal) - wrapped to avoid const redeclaration on SPA navigation
    (function() {
        const ph = document.getElementById('profile-header');
        const listModal = document.getElementById('follow-list-modal');
        const listModalTitle = document.getElementById('follow-list-modal-title');
        const listModalBody = document.getElementById('follow-list-modal-body');
        const listModalClose = document.getElementById('follow-list-modal-close');

        async function loadFollowList(type, username, page = 1) {
            const endpoint = type === 'followers' ? `/api/followers/${username}?page=${page}` : `/api/following/${username}?page=${page}`;
            const r = await fetch(endpoint);
            const data = await r.json();
            if (!data.success) return;
            listModalTitle.textContent = type === 'followers' ? 'Followers' : 'Following';
            const items = type === 'followers' ? data.followers : data.following;
            listModalBody.innerHTML = items.length ? items.map(u => `
                <a href="/user/${u.username}" class="flex items-center gap-3 p-3 rounded-xl hover:bg-white/5 transition-all">
                    <img src="/static/${u.profile_picture || 'default_avatar.png'}" class="w-10 h-10 rounded-xl object-cover" alt="">
                    <span class="font-bold text-zinc-200">${u.username}</span>
                </a>
            `).join('') : '<p class="text-zinc-500 py-8 text-center">No users yet.</p>';
            if (window.openModalAnimation) window.openModalAnimation(listModal);
            else listModal.classList.remove('hidden');
        }
        function closeFollowListModal() {
            if (window.closeModalAnimation) window.closeModalAnimation(listModal);
            else listModal.classList.add('hidden');
        }
        if (ph) {
            ph.addEventListener('click', (e) => {
                const followersBtn = e.target.closest('[data-action="followers"]');
                const followingBtn = e.target.closest('[data-action="following"]');
                const followBtn = e.target.closest('[data-action="follow"]');
                if (followersBtn) loadFollowList('followers', '{{ profile_user.username }}');
                if (followingBtn) loadFollowList('following', '{{ profile_user.username }}');
                if (followBtn && followBtn.dataset.username) {
                    const username = followBtn.dataset.username;
                    const isFollowing = followBtn.dataset.initialState === 'following';
                    const endpoint = isFollowing ? `/api/unfollow/${username}` : `/api/follow/${username}`;
                    fetch(endpoint, { method: 'POST', headers: { 'Content-Type': 'application/json' } })
                        .then(r => r.json())
                        .then(data => {
                            if (data.success) {
                                followBtn.dataset.initialState = isFollowing ? 'follow' : 'following';
                                document.querySelectorAll('.follow-btn-text').forEach(el => el.textContent = isFollowing ? 'Follow' : 'Following');
                                document.querySelectorAll('.followers-count-val').forEach(el => { if (data.followers_count !== undefined) el.textContent = data.followers_count; });
                                document.querySelectorAll('[data-action="follow"]').forEach(btn => {
                                    btn.classList.toggle('bg-blue-600', !isFollowing);
                                    btn.classList.toggle('hover:bg-blue-500', !isFollowing);
                                    btn.classList.toggle('text-white', !isFollowing);
                                    btn.classList.toggle('bg-white/5', isFollowing);
                                    btn.classList.toggle('hover:bg-blue-500/20', isFollowing);
                                    btn.classList.toggle('border', isFollowing);
                                    btn.classList.toggle('border-white/10', isFollowing);
                                    btn.classList.toggle('text-blue-400', isFollowing);
                                });
                                if (window.lucide) window.lucide.createIcons();
                            }
                        })
                        .catch(err => console.error(err));
                }
            });
        }
        if (listModalClose) listModalClose.addEventListener('click', closeFollowListModal);
        document.getElementById('follow-list-modal-backdrop')?.addEventListener('click', closeFollowListModal);
    })();

    setTimeout(initializeProfilePage, 50);
</script>
{% endblock %}

{% block portals %}
{# --- Bio/Manifesto Modal --- #}
<div id="manifestoModal"
    class="hidden modal-hidden fixed inset-0 z-[100] p-4 grid place-items-center pointer-events-none">
    <div class="modal-backdrop fixed inset-0 bg-black/60 modal-transition z-[99] pointer-events-auto"
        id="manifesto-close-backdrop"></div>
    <div
        class="modal-content glass-modal modal-radius-xl shadow-3xl w-full max-w-2xl max-h-[85vh] border border-white/10 relative z-[100] modal-content-transition pointer-events-auto flex flex-col overflow-hidden">
        <div class="px-10 pt-10 pb-6 flex items-center justify-between flex-shrink-0">
            <div class="flex items-center gap-3">
                <div class="w-1.5 h-4 bg-blue-500/50 rounded-full"></div>
                <span class="profile-bio-label text-[10px] font-black uppercase tracking-[0.4em] text-zinc-500/80">About me</span>
            </div>
            <button type="button" id="manifesto-close-btn"
                class="p-2.5 bg-white/5 hover:bg-red-500/20 border border-white/5 hover:border-red-500/30 rounded-2xl text-zinc-500 hover:text-red-400 transition-all">
                <i data-lucide="x" class="h-5 w-5"></i>
            </button>
        </div>
        <div class="flex-1 overflow-y-auto px-10 pb-10 custom-scrollbar">
            <p class="profile-bio-body text-zinc-300 leading-relaxed text-lg md:text-xl whitespace-pre-wrap">{{
                profile_user.bio or 'No bio provided.' }}</p>
        </div>
    </div>
</div>

{# --- Followers/Following List Modal --- #}
<div id="follow-list-modal" class="hidden modal-hidden fixed inset-0 z-[100] p-4 grid place-items-center">
    <div id="follow-list-modal-backdrop" class="modal-backdrop fixed inset-0 bg-black/60 modal-transition z-[99]"></div>
    <div class="modal-content glass-modal rounded-3xl p-6 w-full max-w-md max-h-[70vh] overflow-hidden flex flex-col relative z-[100] border border-white/10 modal-content-transition">
        <div class="flex items-center justify-between mb-4">
            <h3 id="follow-list-modal-title" class="text-lg font-bold text-white">Followers</h3>
            <button id="follow-list-modal-close" class="p-2 rounded-xl hover:bg-white/10 text-zinc-400">
                <i data-lucide="x" class="h-5 w-5"></i>
            </button>
        </div>
        <div id="follow-list-modal-body" class="overflow-y-auto flex-1 space-y-1 custom-scrollbar">
            {# Populated by JS #}
        </div>
    </div>
</div>

{# --- Enhanced Edit Modal --- #}
{% if is_owner %}
<div id="editProfileModal"
    class="hidden modal-hidden fixed inset-0 flex items-center justify-center z-[100] p-4 text-white">
    <div class="modal-backdrop fixed inset-0 bg-black/40 modal-transition z-[99]"></div>
    <div
        class="modal-content glass-modal modal-radius-lg border border-white/10 shadow-3xl w-full max-w-2xl max-h-[90vh] flex flex-col modal-content-transition relative z-[100] overflow-hidden">

        <div class="p-6 border-b border-white/5 flex items-center justify-between flex-shrink-0 bg-white/[0.02]">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 bg-blue-500/10 rounded-xl flex items-center justify-center border border-blue-500/20">
                    <i data-lucide="user" class="h-6 w-6 text-blue-400"></i>
                </div>
                <h3 class="text-lg font-bold text-white leading-tight">Profile Editor</h3>
            </div>
            <button type="button" id="edit-profile-close-btn"
                class="p-2 rounded-xl hover:bg-white/5 text-zinc-400 hover:text-white transition-all">
                <i data-lucide="x" class="h-5 w-5"></i>
            </button>
        </div>

        <div class="flex-1 overflow-y-auto px-6 py-6 space-y-6 custom-scrollbar">
            <form id="edit-profile-form" method="POST" action="{{ url_for('profile.edit_profile') }}"
                enctype="multipart/form-data" class="space-y-6">
                <div class="bg-white/[0.03] p-6 rounded-2xl border border-white/5 space-y-6">
                    <h4 class="text-xs font-bold text-zinc-500 uppercase tracking-widest flex items-center gap-2">
                        <i data-lucide="user" class="h-3.5 w-3.5"></i>
                        General
                    </h4>

                    {# Profile picture – matches profile page pfp exactly #}
                    <div class="flex flex-col sm:flex-row items-center sm:items-start gap-4 sm:gap-6">
                        <div id="avatar-preview-box" class="relative group shrink-0">
                            {% if profile_user.profile_picture == 'default_avatar.png' %}
                            <div class="w-24 h-24 min-w-[6rem] min-h-[6rem] bg-blue-500/10 rounded-3xl border border-blue-500/20 shadow-2xl flex items-center justify-center">
                                <i data-lucide="user" class="h-12 w-12 text-blue-400"></i>
                            </div>
                            {% else %}
                            <img src="{{ url_for('static', filename=profile_user.profile_picture) }}" alt="Current"
                                class="w-24 h-24 min-w-[6rem] min-h-[6rem] rounded-3xl object-cover border-2 border-white/10 shadow-2xl transition-transform duration-700"
                                id="profile-picture-current">
                            {% endif %}
                            <img id="profile-picture-preview"
                                class="absolute inset-0 w-24 h-24 min-w-[6rem] min-h-[6rem] rounded-3xl object-cover border-2 border-white/10 shadow-2xl hidden"
                                src="">
                        </div>
                        <div class="flex-1 w-full sm:w-auto text-center sm:text-left">
                            <label for="profile_picture"
                                class="inline-block cursor-pointer bg-blue-600 hover:bg-blue-500 text-white text-xs font-black uppercase tracking-widest py-3 px-5 sm:py-4 sm:px-6 rounded-2xl transition-all text-center shadow-lg shadow-blue-500/10 min-h-[44px] flex items-center justify-center">
                                Upload
                            </label>
                            <input type="file" id="profile_picture" name="profile_picture"
                                accept=".gif,.png,.jpg,.jpeg,.webp" class="hidden">
                            <p class="text-[10px] text-zinc-500 mt-2">PNG, JPG, WebP. 1MB max</p>
                        </div>
                    </div>

                    {# Identity - name & pronouns #}
                    <div class="space-y-2">
                        <label for="real_name" class="block text-xs font-medium text-zinc-500">Real Name</label>
                        <div class="relative group">
                            <i data-lucide="user"
                                class="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-500 group-focus-within:text-blue-400 h-4 w-4 transition-colors"></i>
                            <input type="text" id="real_name" name="real_name"
                                value="{{ profile_user.real_name or '' }}" placeholder="e.g. Albert Wesker"
                                class="w-full glass-search-input pl-10 pr-4 py-2.5 text-sm rounded-xl font-medium text-white placeholder-zinc-500 focus:ring-2 focus:ring-blue-500/30 transition-all outline-none border border-white/5 bg-white/[0.02] focus:border-blue-500/30">
                        </div>
                        <p class="text-xs text-zinc-500">Leave empty to hide</p>
                    </div>

                    <div class="space-y-2">
                        <label for="pronouns" class="block text-xs font-medium text-zinc-500">Pronouns</label>
                        <div class="relative group">
                            <i data-lucide="users"
                                class="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-500 group-focus-within:text-blue-400 h-4 w-4 transition-colors"></i>
                            <input type="text" id="pronouns" name="pronouns"
                                value="{{ profile_user.pronouns if profile_user.pronouns else '' }}" placeholder="e.g. they/them"
                                class="w-full glass-search-input pl-10 pr-4 py-2.5 text-sm rounded-xl font-medium text-white placeholder-zinc-500 focus:ring-2 focus:ring-blue-500/30 transition-all outline-none border border-white/5 bg-white/[0.02] focus:border-blue-500/30">
                        </div>
                    </div>

                    <div class="space-y-2">
                        <label for="bio" class="block text-xs font-medium text-zinc-500">About Me</label>
                        <div class="relative group">
                            <i data-lucide="file-text"
                                class="absolute left-3 top-3.5 text-zinc-500 group-focus-within:text-blue-400 h-4 w-4 transition-colors"></i>
                            <textarea id="bio" name="bio" rows="4" placeholder="What moves you?"
                                class="w-full glass-search-input pl-10 py-2.5 px-4 text-sm rounded-xl font-medium text-white placeholder-zinc-500 focus:ring-2 focus:ring-blue-500/30 transition-all outline-none resize-y border border-white/5 bg-white/[0.02] focus:border-blue-500/30">{{ profile_user.bio if profile_user.bio else '' }}</textarea>
                        </div>
                    </div>
                </div>

                {# Top repos #}
                <div class="bg-white/[0.03] p-6 rounded-2xl border border-white/5 space-y-4">
                    <h4 class="text-xs font-bold text-zinc-500 uppercase tracking-widest flex items-center gap-2">
                        <i data-lucide="folder-git" class="h-3.5 w-3.5"></i>
                        Top Repos (6 Max)
                    </h4>
                    <div class="relative group">
                        <i data-lucide="search"
                            class="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-500 group-focus-within:text-blue-400 h-4 w-4 transition-colors"></i>
                        <input type="text" id="pin-repo-search" placeholder="Search your repositories..."
                            class="w-full glass-search-input pl-10 pr-4 py-2.5 text-sm rounded-xl font-medium text-white placeholder-zinc-500 focus:ring-2 focus:ring-blue-500/30 transition-all outline-none border border-white/5 bg-white/[0.02] focus:border-blue-500/30">
                    </div>
                    <div id="pin-repo-list"
                        class="space-y-2 max-h-40 sm:max-h-52 overflow-y-auto custom-scrollbar pr-2 min-h-[80px] sm:min-h-[100px]">
                        {# Populated by JavaScript #}
                    </div>
                    <div class="flex items-center justify-between px-1">
                        <span id="pin-repo-pagination-info"
                            class="text-xs text-zinc-500">Page 1 of 1</span>
                        <div class="flex gap-2">
                            <button type="button" id="pin-repo-prev"
                                class="p-2 bg-white/5 hover:bg-white/10 rounded-lg text-zinc-500 hover:text-white transition-all disabled:opacity-20 disabled:pointer-events-none flex items-center justify-center">
                                <i data-lucide="chevron-left" class="h-3 w-3"></i>
                            </button>
                            <button type="button" id="pin-repo-next"
                                class="p-2 bg-white/5 hover:bg-white/10 rounded-lg text-zinc-500 hover:text-white transition-all disabled:opacity-20 disabled:pointer-events-none flex items-center justify-center">
                                <i data-lucide="chevron-right" class="h-3 w-3"></i>
                            </button>
                        </div>
                    </div>
                </div>

                {# Privacy & visibility #}
                <div class="bg-white/[0.03] p-6 rounded-2xl border border-white/5 space-y-4">
                    <h4 class="text-xs font-bold text-zinc-500 uppercase tracking-widest flex items-center gap-2">
                        <i data-lucide="eye" class="h-3.5 w-3.5"></i>
                        Privacy & Visibility
                    </h4>
                <div class="space-y-3">
                    <label class="flex items-center gap-3 p-4 bg-white/[0.03] rounded-xl border border-white/5 cursor-pointer hover:bg-white/[0.05] transition-all group">
                        <input type="checkbox" name="show_email" {% if profile_user.show_email %}checked{% endif %}
                            class="w-5 h-5 rounded border-zinc-700 text-blue-600 focus:ring-blue-500 bg-zinc-700">
                        <div class="flex-1">
                            <div class="font-bold text-zinc-200 group-hover:text-white transition-colors flex items-center gap-2">
                                <i data-lucide="mail" class="h-4 w-4 text-zinc-500"></i>
                                Show Email
                            </div>
                            <div class="text-xs text-zinc-500 mt-0.5">Publicly display on your profile</div>
                        </div>
                    </label>
                    <label class="flex items-center gap-3 p-4 bg-white/[0.03] rounded-xl border border-white/5 cursor-pointer hover:bg-white/[0.05] transition-all group">
                        <input type="checkbox" name="show_activity" {% if profile_user.show_activity %}checked{% endif %}
                            class="w-5 h-5 rounded border-zinc-700 text-blue-600 focus:ring-blue-500 bg-zinc-700">
                        <div class="flex-1">
                            <div class="font-bold text-zinc-200 group-hover:text-white transition-colors flex items-center gap-2">
                                <i data-lucide="bar-chart-3" class="h-4 w-4 text-zinc-500"></i>
                                Activity
                            </div>
                            <div class="text-xs text-zinc-500 mt-0.5">Show contribution graph</div>
                        </div>
                    </label>
                </div>
                </div>
            </form>
        </div>

        <div class="p-6 bg-white/[0.02] border-t border-white/5 flex justify-end space-x-3 rounded-b-[2rem] flex-shrink-0">
            <button type="button" id="edit-profile-cancel-btn"
                class="glass-button bg-white/5 hover:bg-white/10 text-zinc-400 font-medium py-2.5 px-6 rounded-xl text-sm transition-all">
                Cancel
            </button>
            <button type="submit" form="edit-profile-form"
                class="glass-button-primary bg-blue-600 hover:bg-blue-500 text-white font-bold py-2.5 px-8 rounded-xl text-sm shadow-lg shadow-blue-500/20 transition-all flex items-center gap-2">
                <i data-lucide="save" class="h-4 w-4"></i>
                <span>Apply Changes</span>
            </button>
        </div>
    </div>
</div>
{% endif %}
{% endblock %}