{% extends "base.html" %}

{% block title %}{{ item.title }} - Item Dashboard{% endblock %}
{% block body_attrs %} class="padded-page dashboard-page dashboard-item-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> / <a href="/dashboard/project/{{ project_slug }}">{{ project_title }}</a> / {{ item.title }}
            </div>
            <h1 class="page-title">{{ item.title }}</h1>
            <div class="item-meta">
                {% if item.is_public && item.publish_at.is_none() %}
                <span class="badge active">Active</span>
                {% else if !item.is_public && item.publish_at.is_some() %}
                <span class="badge pending">Scheduled</span>
                {% else %}
                <span class="badge inactive">Draft</span>
                {% endif %}
                <span>{{ item.sales_count }} sales</span>
                <button class="btn-secondary small dashboard-item-share-btn"
                        title="Copy item ID for use in embeds or integrations"
                        onclick="navigator.clipboard.writeText('{{ item.id }}'); this.textContent='Copied!'; setTimeout(()=>this.textContent='Copy Item ID', 1500);">Copy Item ID</button>
            </div>
        </header>

        <div class="tabs" role="tablist" aria-label="Item sections">
            <button class="tab is-selected"
                    role="tab"
                    aria-selected="true"
                    aria-controls="tab-content"
                    id="tab-overview"
                    title="Stats, quick actions, and embed codes"
                    hx-get="/dashboard/item/{{ item.id }}/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-details"
                    title="Title, description, tags, content, and publishing"
                    hx-get="/dashboard/item/{{ item.id }}/tabs/details"
                    hx-target="#tab-content"
                    hx-swap="innerHTML"
                    hx-indicator="#tab-spinner"
                    onclick="setActiveTab(this)">Details</button>
            <button class="tab"
                    role="tab"
                    aria-selected="false"
                    aria-controls="tab-content"
                    id="tab-pricing"
                    title="Price, pay-what-you-want, license keys, and promo codes"
                    hx-get="/dashboard/item/{{ item.id }}/tabs/pricing"
                    hx-target="#tab-content"
                    hx-swap="innerHTML"
                    hx-indicator="#tab-spinner"
                    onclick="setActiveTab(this)">Pricing</button>
            {% if item.item_type != "bundle" %}
            <button class="tab"
                    role="tab"
                    aria-selected="false"
                    aria-controls="tab-content"
                    id="tab-files"
                    title="Uploaded files and version history"
                    hx-get="/dashboard/item/{{ item.id }}/tabs/files"
                    hx-target="#tab-content"
                    hx-swap="innerHTML"
                    hx-indicator="#tab-spinner"
                    onclick="setActiveTab(this)">Files</button>
            {% endif %}
            <button class="tab"
                    role="tab"
                    aria-selected="false"
                    aria-controls="tab-content"
                    id="tab-sales"
                    title="Transaction history and refunds"
                    hx-get="/dashboard/item/{{ item.id }}/tabs/sales"
                    hx-target="#tab-content"
                    hx-swap="innerHTML"
                    hx-indicator="#tab-spinner"
                    onclick="setActiveTab(this)">Sales</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/item/{{ item.id }}/tabs/overview"
             hx-trigger="load"
             hx-swap="innerHTML">
            <!-- Content loaded via HTMX -->
        </div>
    </div>
{% endblock %}

{% block scripts %}
<script src="/static/upload.js?v=0518"></script>
<script src="/static/media-picker.js?v=0518"></script>
<script src="/static/item-details.js?v=0518"></script>
<script src="/static/item-upload.js?v=0518"></script>
{% endblock %}