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

{% block title %}{{ project.title }} - {{ creator_username }}{% endblock %}
{% block body_attrs %} class="padded-page project-page"{% endblock %}

{% block head %}
<meta property="og:title" content="{{ project.title }} by {{ creator_username }}">
<meta property="og:description" content="{{ project.description }}">
<meta property="og:type" content="website">
<meta property="og:url" content="{{ host_url }}/p/{{ project.slug }}">
<link rel="canonical" href="{{ host_url }}/p/{{ project.slug }}">
<meta property="og:site_name" content="Makenot.work">
{% if project.cover_image_url.is_some() %}<meta name="twitter:card" content="summary_large_image">{% else %}<meta name="twitter:card" content="summary">{% endif %}
<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": "Makenot.work",
        "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) %}
        </section>
        {% endif %}

        {% if !sections.is_empty() %}
        <section class="project-sections">
            <div class="section-tabs">
                {% for section in sections %}
                <button class="section-tab{% if loop.first %} is-selected{% endif %}"
                        data-tab="section-{{ section.slug }}"
                        onclick="switchSectionTab(this, '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>
        function switchSectionTab(btn, panelId) {
            // Tab selection uses .is-selected (charter); panel visibility
            // still uses .active (display: none/block toggle).
            document.querySelectorAll('.project-sections .section-tab').forEach(function(t) { t.classList.remove('is-selected'); });
            document.querySelectorAll('.project-sections .section-panel').forEach(function(p) { p.classList.remove('active'); });
            btn.classList.add('is-selected');
            var panel = document.getElementById(panelId);
            if (panel) panel.classList.add('active');
            history.replaceState(null, '', '#' + panelId);
        }
        (function() {
            var hash = window.location.hash.replace('#', '');
            if (hash) {
                var panel = document.getElementById(hash);
                var tab = document.querySelector('.project-sections [data-tab="' + hash + '"]');
                if (panel && tab) switchSectionTab(tab, hash);
            }
        })();
        </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">
                    <a href="{% if item.can_access %}/i/{{ item.id }}{% else %}/purchase/{{ item.id }}{% endif %}" class="item-thumbnail">{{ item.thumbnail }}</a>
                    <div class="item-content">
                        <h3 class="item-title"><a 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">{{ 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="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 }}">
                        <input type="hidden" name="_csrf" value="{{ csrf_token.as_deref().unwrap_or_default() }}">
                        <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="javascript:void(0)" onclick="document.getElementById('report-modal').classList.remove('hidden')">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>
    // View toggle with localStorage persistence
    (function() {
        function applyView(view) {
            var container = document.getElementById('items-container');
            if (container) {
                container.className = 'items-container items-' + view + '-view';
            }
            document.querySelectorAll('.view-btn').forEach(function(btn) {
                btn.classList.toggle('is-selected', btn.dataset.view === view);
            });
        }

        // Load saved preference on page load
        document.addEventListener('DOMContentLoaded', function() {
            var saved = safeStorageGet('projectViewPref') || 'grid';
            applyView(saved);
        });

        // Handle view button clicks
        document.querySelectorAll('.view-btn').forEach(function(btn) {
            btn.addEventListener('click', function() {
                var view = btn.dataset.view;
                applyView(view);
                safeStorageSet('projectViewPref', view);
            });
        });
    })();
</script>
{% endblock %}