{% extends "base.html" %}

{% block title %}Dashboard - Makenot.work{% endblock %}
{% block body_attrs %} class="padded-page dashboard-page dashboard-user-page"{% endblock %}

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

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

    <div class="container">
        {% if deactivated %}
        <div class="alert alert-warning">
            <p class="alert-title">Account Deactivated</p>
            <p>Your account is deactivated. Your content is hidden from fans and no new content can be created.</p>
            <p>You can:</p>
            <div class="account-status-actions">
                <form hx-post="/api/users/me/reactivate" hx-swap="none"
                      onsubmit="setTimeout(function(){ window.location.reload(); }, 500)">
                    <button type="submit" class="btn-primary">Reactivate Account</button>
                </form>
                <a href="/dashboard/export" class="button">Export Data</a>
                <a href="/dashboard/delete-account" class="button btn-danger">Permanently Delete</a>
            </div>
        </div>
        {% elif creator_paused %}
        <div class="alert alert-warning">
            <p class="alert-title">Account Paused</p>
            <p>Your creator account is paused. Existing fan subscriptions will expire at the end of their billing period. One-time purchases remain accessible. No new sales can be made.</p>
            <p>To resume, re-subscribe to a creator plan:</p>
            <div class="account-status-actions">
                <a href="/creators" class="button btn-primary">Resume: Choose a Tier</a>
                <a href="/dashboard/export" class="button">Export Data</a>
            </div>
        </div>
        {% elif suspended %}
        <div class="suspension-wrap">
            {% let reason = suspension_reason.as_deref().unwrap_or("No reason provided") %}
            {% include "partials/suspension_banner.html" %}
        </div>
        {% endif %}

        {% if let Some(warning) = password_warning %}
        <div class="password-warning-banner">
            <strong>Password Warning:</strong> {{ warning }}
            You can change your password in Account settings.
        </div>
        {% endif %}

        <header>
            <h1 class="page-title">{{ user.username }}</h1>
            <div class="dash-user-header-links">
                <a href="/u/{{ user.username }}" class="dash-user-header-link">View public profile &rarr;</a>
                <a href="/dashboard/export" class="dash-user-header-link">Export data &rarr;</a>
            </div>
        </header>

        <div id="onboarding-area">
        {% if let Some(checklist) = onboarding %}
        {% include "partials/onboarding_checklist.html" %}
        {% endif %}
        {% if show_checklist_recovery %}
        <div class="checklist-recovery">
            <a href="#" hx-post="/dashboard/onboarding/restore" hx-target="#onboarding-area" hx-swap="innerHTML"
               class="checklist-recovery-link">Show setup checklist</a>
        </div>
        {% endif %}
        </div>

        <div class="tabs" role="tablist" aria-label="Dashboard sections">
            {% if deactivated %}
            <button class="tab is-selected"
                    role="tab"
                    aria-selected="true"
                    aria-controls="tab-content"
                    id="tab-support"
                    hx-get="/dashboard/tabs/support"
                    hx-target="#tab-content"
                    hx-swap="innerHTML"
                    hx-indicator="#tab-spinner"
                    onclick="setActiveTab(this)">Support</button>
            <span id="tab-spinner" class="htmx-indicator tab-spinner" aria-live="polite"> Loading...</span>
        </div>

        <div id="tab-content" class="tab-content active"
             role="tabpanel"
             aria-labelledby="tab-support"
             hx-get="/dashboard/tabs/support"
             hx-trigger="load"
             hx-swap="innerHTML">
        </div>
        {% else %}
            {% if let Some(su) = session_user %}{% if su.can_create_projects %}
            <button class="tab is-selected"
                    role="tab"
                    aria-selected="true"
                    aria-controls="tab-content"
                    id="tab-projects"
                    title="Your projects and their items"
                    hx-get="/dashboard/tabs/projects"
                    hx-target="#tab-content"
                    hx-swap="innerHTML"
                    hx-indicator="#tab-spinner"
                    onclick="setActiveTab(this)">Projects</button>
            {% endif %}{% endif %}
            <button class="tab{% if let Some(su) = session_user %}{% if !su.can_create_projects %} is-selected{% endif %}{% endif %}"
                    role="tab"
                    aria-selected="{% if let Some(su) = session_user %}{% if !su.can_create_projects %}true{% else %}false{% endif %}{% endif %}"
                    aria-controls="tab-content"
                    id="tab-payments"
                    title="Stripe connection and payment history"
                    hx-get="/dashboard/tabs/payments"
                    hx-target="#tab-content"
                    hx-swap="innerHTML"
                    hx-indicator="#tab-spinner"
                    onclick="setActiveTab(this)">Payments</button>
            {% if let Some(su) = session_user %}{% if su.can_create_projects %}
            <button class="tab"
                    role="tab"
                    aria-selected="false"
                    aria-controls="tab-content"
                    id="tab-analytics"
                    title="Sales, revenue, and audience stats"
                    hx-get="/dashboard/tabs/analytics"
                    hx-target="#tab-content"
                    hx-swap="innerHTML"
                    hx-indicator="#tab-spinner"
                    onclick="setActiveTab(this)">Analytics</button>
            {% endif %}{% endif %}
            <button class="tab"
                    role="tab"
                    aria-selected="false"
                    aria-controls="tab-content"
                    id="tab-settings"
                    title="Profile, account, plan, and integrations"
                    hx-get="/dashboard/tabs/settings"
                    hx-target="#tab-content"
                    hx-swap="innerHTML"
                    hx-indicator="#tab-spinner"
                    onclick="setActiveTab(this)">Settings</button>
            <button class="tab"
                    role="tab"
                    aria-selected="false"
                    aria-controls="tab-content"
                    id="tab-support"
                    title="Contact support or report an issue"
                    hx-get="/dashboard/tabs/support"
                    hx-target="#tab-content"
                    hx-swap="innerHTML"
                    hx-indicator="#tab-spinner"
                    onclick="setActiveTab(this)">Support</button>
            <span id="tab-spinner" class="htmx-indicator tab-spinner" aria-live="polite"> Loading...</span>
        </div>

        <!-- Tab Content Container -->
        <div id="tab-content" class="tab-content active"
             role="tabpanel"
             {% if let Some(su) = session_user %}{% if su.can_create_projects %}
             aria-labelledby="tab-projects"
             hx-get="/dashboard/tabs/projects"
             {% else %}
             aria-labelledby="tab-payments"
             hx-get="/dashboard/tabs/payments"
             {% endif %}{% endif %}
             hx-trigger="load"
             hx-swap="innerHTML">
        </div>
        {% endif %}
    </div>
{% endblock %}

{% block scripts %}
<script src="/static/passkey.js"></script>
{% endblock %}