{% extends "layouts/console_layout.html" %}

{% block header %}
<div class="culye-top-bar" id="culyeTopBar" title="Click/tap to return to default view">
    <div class="culye-top-bar-inner">
        <div class="culye-bar-left">
            {% if !empty($show_back) %}
            <a href="{{ $back_url }}" class="culye-nav-btn" id="culyeBackBtn" title="Back to Or">
                <span class="material-symbols-outlined">arrow_back</span>
            </a>
            {% endif %}
            <div class="culye-mission-tag" id="culyeMissionTag" title="Mission Profile">
                <span class="mission-label">Mission</span>
                <span class="mission-name" id="culyeMissionName">&#39;{{ $profile_name }}&#39;!</span>
            </div>
        </div>

        <div class="culye-bar-center">
            <div class="culye-points-pill" id="culyePointsPill" title="Points Earned">
                <span class="material-symbols-outlined pill-icon">military_tech</span>
                <span class="points-value" id="culyePointsValue">{{ $points_display }}</span>
            </div>
        </div>

        <div class="culye-bar-right">
            <div class="culye-age-pill" id="culyeAgePill" title="Age: Months, Days, Hours">
                <span class="material-symbols-outlined age-icon">schedule</span>
                <span class="age-value" id="culyeAgeValue">{{ $age_display }}</span>
            </div>
            {% if !empty($show_logout) %}
            <a href="/logout" class="culye-nav-btn culye-logout-btn" id="culyeLogoutBtn" title="Logout">
                <span class="material-symbols-outlined">logout</span>
            </a>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block container_class %}culye-container{% endblock %}

{% block content %}
<div class="culye-page-wrapper" id="culyePageWrapper" data-dob="{{ $profile_dob }}" data-name="{{ $profile_name }}">

    <div id="culyeToast" class="culye-toast" style="display: none;">
        <span class="material-symbols-outlined toast-icon" id="culyeToastIcon">check_circle</span>
        <span id="culyeToastMsg">Saved</span>
    </div>

    <!-- 1. COMPLETED SECTION -->
    <section class="culye-section section-completed" id="sectionCompleted" data-section="completed">
        <header class="culye-section-header collapsible-header" id="headerCompleted" tabindex="0" role="button" aria-expanded="true">
            <div class="header-title-group">
                <span class="material-symbols-outlined section-icon">task_alt</span>
                <h3 class="section-heading">COMPLETED</h3>
                <span class="section-count-badge" id="countCompleted">0</span>
            </div>
            <span class="material-symbols-outlined collapse-arrow">expand_more</span>
        </header>
        <div class="culye-items-container" id="listCompleted">
            <!-- Recently completed at the bottom -->
        </div>
    </section>

    <!-- 2. CURRENT SECTION (Always open, single focus) -->
    <section class="culye-section section-current" id="sectionCurrent" data-section="current">
        <header class="culye-section-header non-collapsible-header" id="headerCurrent">
            <div class="header-title-group">
                <span class="material-symbols-outlined section-icon current-star">radio_button_checked</span>
                <h3 class="section-heading">CURRENT</h3>
                <span class="section-count-badge current-badge" id="countCurrent">0</span>
            </div>
            <span class="current-lock-tag" title="Single Active Focus Item">1 FOCUS</span>
        </header>
        <div class="culye-items-container current-dropzone" id="listCurrent" data-zone="current">
            <!-- Max 1 item: displaced item pushed to UP NEXT -->
        </div>
    </section>

    <!-- 3. UP NEXT SECTION -->
    <section class="culye-section section-up-next" id="sectionUpNext" data-section="up_next">
        <header class="culye-section-header collapsible-header" id="headerUpNext" tabindex="0" role="button" aria-expanded="true">
            <div class="header-title-group">
                <span class="material-symbols-outlined section-icon">play_arrow</span>
                <h3 class="section-heading">UP NEXT</h3>
                <span class="section-count-badge" id="countUpNext">0</span>
            </div>
            <span class="material-symbols-outlined collapse-arrow">expand_more</span>
        </header>
        <div class="culye-items-container droppable-list" id="listUpNext" data-zone="up_next">
        </div>
    </section>

    <!-- 4. LATER SECTION -->
    <section class="culye-section section-later" id="sectionLater" data-section="later">
        <header class="culye-section-header collapsible-header" id="headerLater" tabindex="0" role="button" aria-expanded="true">
            <div class="header-title-group">
                <span class="material-symbols-outlined section-icon">update</span>
                <h3 class="section-heading">LATER</h3>
                <span class="section-count-badge" id="countLater">0</span>
            </div>
            <span class="material-symbols-outlined collapse-arrow">expand_more</span>
        </header>
        <div class="culye-items-container droppable-list" id="listLater" data-zone="later">
        </div>
    </section>

    <!-- 5. YET TO PLAN SECTION -->
    <section class="culye-section section-yet-to-plan" id="sectionYetToPlan" data-section="yet_to_plan">
        <header class="culye-section-header collapsible-header" id="headerYetToPlan" tabindex="0" role="button" aria-expanded="true">
            <div class="header-title-group">
                <span class="material-symbols-outlined section-icon">inbox</span>
                <h3 class="section-heading">YET TO PLAN</h3>
                <span class="section-count-badge" id="countYetToPlan">0</span>
            </div>
            <span class="material-symbols-outlined collapse-arrow">expand_more</span>
        </header>
        <div class="culye-items-container droppable-list" id="listYetToPlan" data-zone="yet_to_plan">
        </div>
    </section>

    <!-- 6. EXPIRED SECTION -->
    <section class="culye-section section-expired" id="sectionExpired" data-section="expired">
        <header class="culye-section-header collapsible-header" id="headerExpired" tabindex="0" role="button" aria-expanded="false">
            <div class="header-title-group">
                <span class="material-symbols-outlined section-icon">event_busy</span>
                <h3 class="section-heading">EXPIRED</h3>
                <span class="section-count-badge" id="countExpired">0</span>
            </div>
            <span class="material-symbols-outlined collapse-arrow">expand_more</span>
        </header>
        <div class="culye-items-container" id="listExpired">
        </div>
    </section>

    <div class="culye-footer-links">
        <a href="/everything" class="culye-footer-btn" title="View Everything summary">
            <span class="material-symbols-outlined">all_inclusive</span>
            <span>Everything Summary</span>
        </a>
        <a href="/mindsweep" class="culye-footer-btn" title="Mind Sweep capture & curate">
            <span class="material-symbols-outlined">psychology</span>
            <span>Mind Sweep</span>
        </a>
    </div>
</div>
{% endblock %}