{% extends "base.html" %}

{% block title %}{{ project.title }} - Project Dashboard{% endblock %}
{% block body_attrs %} class="padded-page dashboard-page dashboard-project-page"{% endblock %}

{% block head %}
{% endblock %}

{% block content %}
    {% include "partials/site_header.html" %}

    {% if let Some(su) = session_user %}{% if su.is_sandbox %}
    <div class="banner banner--info" role="status">
        Sandbox mode — your data will be deleted when the session expires.
        <a href="/join">Create an account</a> to keep your work.
    </div>
    {% endif %}{% endif %}

    <div class="container">
        <header>
            <div class="breadcrumb">
                <a href="/dashboard#tab-projects">Dashboard</a> / <a href="/dashboard#tab-projects">Projects</a> / {{ project.title }}
            </div>
            <h1 class="page-title">{{ project.title }}<span class="dot">.</span></h1>
            <div class="project-meta">
                <a href="/p/{{ project.slug }}" class="muted">makenot.work/p/{{ project.slug }}</a>
                &nbsp;&middot;&nbsp;
                <a href="/p/{{ project.slug }}" target="_blank" class="muted">View live &rarr;</a>
            </div>
        </header>

        <div class="tabs" role="tablist" aria-label="Project sections">
            <button class="tab is-selected"
                    role="tab"
                    aria-selected="true"
                    aria-controls="tab-content"
                    id="tab-overview"
                    title="Stats and quick actions"
                    hx-get="/dashboard/project/{{ project.slug }}/tabs/overview"
                    hx-target="#tab-content"
                    hx-swap="innerHTML"
                    hx-indicator="#tab-spinner"
                    onclick="setActiveTab(this)">Overview</button>
            <button class="tab"
                    role="tab"
                    aria-selected="false"
                    aria-controls="tab-content"
                    id="tab-content-btn"
                    title="Items, files, and blog posts"
                    hx-get="/dashboard/project/{{ project.slug }}/tabs/content"
                    hx-target="#tab-content"
                    hx-swap="innerHTML"
                    hx-indicator="#tab-spinner"
                    onclick="setActiveTab(this)">Content</button>
            <button class="tab"
                    role="tab"
                    aria-selected="false"
                    aria-controls="tab-content"
                    id="tab-analytics"
                    title="Sales, revenue, and views over time"
                    hx-get="/dashboard/project/{{ project.slug }}/tabs/analytics"
                    hx-target="#tab-content"
                    hx-swap="innerHTML"
                    hx-indicator="#tab-spinner"
                    onclick="setActiveTab(this)">Analytics</button>
            <button class="tab"
                    role="tab"
                    aria-selected="false"
                    aria-controls="tab-content"
                    id="tab-monetization"
                    title="Tiers, promo codes, and revenue splits"
                    hx-get="/dashboard/project/{{ project.slug }}/tabs/monetization"
                    hx-target="#tab-content"
                    hx-swap="innerHTML"
                    hx-indicator="#tab-spinner"
                    onclick="setActiveTab(this)">Monetization</button>
            {% if git_enabled %}
            <button class="tab"
                    role="tab"
                    aria-selected="false"
                    aria-controls="tab-content"
                    id="tab-code"
                    title="Linked Git repositories and source browser"
                    hx-get="/dashboard/project/{{ project.slug }}/tabs/code"
                    hx-target="#tab-content"
                    hx-swap="innerHTML"
                    hx-indicator="#tab-spinner"
                    onclick="setActiveTab(this)">Code</button>
            {% endif %}
            {% if synckit_enabled %}
            <button class="tab"
                    role="tab"
                    aria-selected="false"
                    aria-controls="tab-content"
                    id="tab-synckit"
                    title="End-to-end encrypted sync for your apps"
                    hx-get="/dashboard/project/{{ project.slug }}/tabs/synckit"
                    hx-target="#tab-content"
                    hx-swap="innerHTML"
                    hx-indicator="#tab-spinner"
                    onclick="setActiveTab(this)">Cloud Sync</button>
            {% endif %}
            <button class="tab"
                    role="tab"
                    aria-selected="false"
                    aria-controls="tab-content"
                    id="tab-settings"
                    title="Visibility, URL name, deletion, and project options"
                    hx-get="/dashboard/project/{{ project.slug }}/tabs/settings"
                    hx-target="#tab-content"
                    hx-swap="innerHTML"
                    hx-indicator="#tab-spinner"
                    onclick="setActiveTab(this)">Settings</button>
            <span id="tab-spinner" class="htmx-indicator tab-spinner-indicator" aria-live="polite"> Loading...</span>
        </div>

        <!-- Tab Content Container - initially loaded with Overview -->
        <div id="tab-content" class="tab-content active"
             role="tabpanel"
             aria-labelledby="tab-overview"
             hx-get="/dashboard/project/{{ project.slug }}/tabs/overview"
             hx-trigger="load"
             hx-swap="innerHTML">
            <!-- Content loaded via HTMX -->
        </div>
    </div>
{% endblock %}