{% extends "base.html" %}
{%- import "partials/carousel.html" as carousel -%}

{% block title %}{{ project.title }} - {{ creator_username }}{% endblock %}
{% block body_attrs %} class="{{ crate::shell::measure(crate::shell::Measure::Wide) }} project-page"{% endblock %}

{% block social_card %}{% if project.cover_image_url.is_some() %}<meta name="twitter:card" content="summary_large_image">{% else %}<meta name="twitter:card" content="summary">{% endif %}{% endblock %}

{% block head %}
{# Tier 0 creator theme: primitive-layer override; semantic layer derives from it. #}
<style id="creator-theme">{{ theme_css|safe }}</style>
<meta property="og:title" content="{{ project.title }} by {{ creator_username }}">
<meta property="og:description" content="{{ project.description }}">
<meta property="og:url" content="{{ host_url }}/p/{{ project.slug }}">
<link rel="canonical" href="{{ host_url }}/p/{{ project.slug }}">
<meta name="twitter:title" content="{{ project.title }} by {{ creator_username }}">
<meta name="twitter:description" content="{{ project.description }}">
{% if let Some(img) = project.cover_image_url %}
<meta property="og:image" content="{{ img }}">
<meta name="twitter:image" content="{{ img }}">
{% else %}
<meta property="og:image" content="{{ host_url }}/static/images/og-card.png">
<meta name="twitter:image" content="{{ host_url }}/static/images/og-card.png">
{% endif %}
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "CollectionPage",
    "name": "{{ project.title_json()|safe }}",
    "description": "{{ project.description_json()|safe }}",
    "url": "{{ host_url }}/p/{{ project.slug }}",
    "author": {
        "@type": "Person",
        "name": "{{ creator_username }}",
        "url": "{{ host_url }}/u/{{ creator_username }}"
    },
    "numberOfItems": {{ project.item_count }},
    "isPartOf": {
        "@type": "WebSite",
        "name": "Makenotwork",
        "url": "{{ host_url }}"
    }
}
</script>
<link rel="alternate" type="application/rss+xml" title="{{ project.title }} - RSS Feed" href="/p/{{ project.slug }}/rss">
{% endblock %}

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

    <div class="container">
        <header class="store-header">
            {% if let Some(img_url) = project.cover_image_url %}
            <img src="{{ img_url }}" alt="{{ project.title }}" class="store-cover">
            {% endif %}
            <h1 class="store-title">{{ project.title }}<span class="dot">.</span></h1>
            <div class="store-meta">
                by <a href="/u/{{ creator_username }}">{{ creator_username }}</a> &middot;
                <span>{{ project.item_count }} items</span>
            </div>
            <p class="store-description">{{ project.description }}</p>
            <div class="store-actions">
                {% if is_owner %}
                <a href="/dashboard/project/{{ project.slug }}" class="btn-secondary">Edit Project</a>
                {% endif %}
                {% if session_user.is_some() %}
                {% if is_following %}
                <button class="btn-secondary follow-btn is-selected"
                        hx-delete="/api/follow/project/{{ project_id }}"
                        hx-swap="outerHTML">Following ({{ follower_count }})</button>
                {% else %}
                <button class="btn-secondary follow-btn"
                        hx-post="/api/follow/project/{{ project_id }}"
                        hx-swap="outerHTML">Follow ({{ follower_count }})</button>
                {% endif %}
                {% else if follower_count > 0 %}
                <span class="follower-count-muted">{{ follower_count }} followers</span>
                {% endif %}
                <a href="/p/{{ project.slug }}/rss" class="btn-secondary">RSS Feed</a>
                {% if has_blog_posts %}
                <a href="/p/{{ project.slug }}/blog" class="btn-secondary">Blog</a>
                {% endif %}
                {% for repo in &git_repos %}
                <a href="{{ repo.1 }}" class="btn-secondary">Git ({{ repo.0 }})</a>
                {% endfor %}
                {% if let Some(url) = community_url %}
                <a href="{{ url }}" class="btn-secondary">Community</a>
                {% endif %}
                {% include "partials/tip_button.html" %}
            </div>
        </header>

        {% if !gallery.is_empty() %}
        <section class="project-gallery">
            {% call carousel::carousel("project-gallery", gallery) %}{% endcall %}
        </section>
        {% endif %}

        {% if !sections.is_empty() %}
        <section class="project-sections raised">
            <div class="section-tabs">
                {% for section in sections %}
                <button class="section-tab{% if loop.first %} is-selected{% endif %}"
                        data-tab="section-{{ section.slug }}"
                        data-action="onSwitchSectionTab" data-arg="section-{{ section.slug }}">{{ section.title }}</button>
                {% endfor %}
            </div>
            {% for section in sections %}
            <div class="section-panel{% if loop.first %} active{% endif %}" id="section-{{ section.slug }}">
                {{ section.body_html|safe }}
            </div>
            {% endfor %}
        </section>
        <script src="/static/page-project.js?v=0623" defer></script>
        {% endif %}

        <section class="items-section">
            <div class="items-header">
                <h2 class="section-header">Available Items</h2>
                <div class="view-controls">
                    <button type="button" class="view-btn" data-view="list" title="List view">|||</button>
                    <button type="button" class="view-btn is-selected" data-view="grid" title="Grid view">:::</button>
                </div>
            </div>
            <div class="items-container items-grid-view" id="items-container">
            <div class="items-grid">
                {% for item in items %}
                <div class="item-card">
                    {# The cover if there is one, the item type if there is not.
                       The type label is a placeholder, styled at 0.3 opacity,
                       and it used to be all this slot ever showed: `thumbnail`
                       is the type by construction in conversions.rs, so a
                       storefront full of uploaded artwork rendered a grid of
                       grey boxes reading "Plugin". #}
                    <a href="{% if item.can_access %}/i/{{ item.id }}{% else %}/purchase/{{ item.id }}{% endif %}" class="item-thumbnail{% if item.cover().is_none() %} item-thumbnail-empty{% endif %}">{% if let Some(img) = item.cover() %}<img src="{{ img }}" alt="{{ item.title }}" loading="lazy">{% else %}{{ item.thumbnail }}{% endif %}</a>
                    <div class="item-content">
                        <h3 class="item-title"><a class="unstyled-link" href="{% if item.can_access %}/i/{{ item.id }}{% else %}/purchase/{{ item.id }}{% endif %}">{{ item.title }}</a></h3>
                        <div class="item-meta">{{ item.item_type }}{% if item.bundle_item_count > 0 %} ({{ item.bundle_item_count }} items){% endif %} &middot; {{ item.release_date }}</div>
                        <div class="item-tags">
                            {% for tag in item.tags %}
                            <a href="/discover?tag={{ tag.slug }}" class="tag unstyled-link">{{ tag.name }}</a>
                            {% endfor %}
                        </div>
                        <p class="item-description">{{ item.description }}</p>
                        <div class="item-footer">
                            <div class="item-price">{{ item.price }}</div>
                            <div class="item-stats">{{ item.sales_count }} sales</div>
                        </div>
                        {% if item.can_access %}
                        <a href="/l/{{ item.id }}" class="btn-secondary">View in library</a>
                        {% else if item.is_free %}
                        <button class="btn-primary"
                                hx-post="/api/library/add/{{ item.id }}"
                                hx-swap="outerHTML">Add to Library</button>
                        {% else if item.pwyw_enabled %}
                        <a href="/purchase/{{ item.id }}" class="btn-primary">Pay What You Want</a>
                        {% else %}
                        <a href="/purchase/{{ item.id }}" class="btn-primary">Buy Once</a>
                        {% endif %}
                    </div>
                </div>
                {% endfor %}
            </div>

            <!-- List View -->
            <div class="items-list">
                {% for item in items %}
                <a href="{% if item.can_access %}/i/{{ item.id }}{% else %}/purchase/{{ item.id }}{% endif %}" class="list-item">
                    <div class="list-item-info">
                        <span class="list-item-title">{{ item.title }}</span>
                        <span class="list-item-meta">{{ item.item_type }}</span>
                    </div>
                    <div class="list-item-price">{{ item.price }}</div>
                </a>
                {% endfor %}
            </div>
            </div>
        </section>

        {% if !subscription_tiers.is_empty() %}
        <section class="tiers-section">
            <h2 class="section-header">Membership</h2>
            <div class="tiers-grid">
                {% for tier in subscription_tiers %}
                <div class="card--bordered tier-card">
                    <div class="tier-name">{{ tier.name }}</div>
                    <div class="tier-price">{{ tier.price }}</div>
                    {% if !tier.description.is_empty() %}
                    <p class="tier-description">{{ tier.description }}</p>
                    {% endif %}
                    {% if has_subscription %}
                    <div class="tier-active-badge">Subscribed</div>
                    {% else if session_user.is_some() %}
                    <form method="post" action="/stripe/subscribe/{{ tier.id }}">
                        {% if let Some(token) = csrf_token %}<input type="hidden" name="_csrf" value="{{ token }}">{% endif %}
                        <details class="promo-details">
                            <summary>Have a promo code?</summary>
                            <input type="text" name="promo_code" placeholder="e.g. TRIAL14" class="promo-input">
                        </details>
                        <button class="btn-primary" type="submit" data-loading-text="Redirecting to Stripe...">Subscribe</button>
                    </form>
                    {% else %}
                    <a href="/login" class="btn-primary">Log in to Subscribe</a>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
        </section>
        {% endif %}

        <footer class="store-footer">
            <p>Powered by <a href="/">Makenot<span class="dot">.</span>work</a> &middot; Fair distribution for creatives of all kinds</p>
            <p class="store-footer-links">
                <a href="/p/{{ project.slug }}" data-copy-link>Copy link</a> &middot;
                <a href="/policy">Policy</a> &middot;
                {% if session_user.is_some() %}
                <a href="#" data-prevent data-action="show" data-target="report-modal">Report</a>
                {% else %}
                <a href="/login">Report</a>
                {% endif %}
            </p>
        </footer>
    </div>

    {% if session_user.is_some() %}
    {% let report_target_type = "project" %}
    {% let report_target_id = project_id %}
    {% let report_has_labels = true %}
    {% include "partials/report_modal.html" %}
    {% endif %}
{% endblock %}

{% block scripts %}
<script src="/static/page-project-2.js?v=0623" defer></script>
{% endblock %}