{% extends "base.html" %}

{% block title %}{{ item.title }} - Makenotwork{% endblock %}

{% block head %}
<meta property="og:title" content="{{ item.title }} - {{ creator_username }}">
<meta property="og:description" content="{{ item.description }}">
<meta property="og:type" content="music.song">
<meta property="og:url" content="{{ host_url }}/i/{{ item.id }}">
<meta property="og:site_name" content="Makenot.work">
{% match item.content %}
{% when crate::types::ItemContent::Audio with { cover_url, .. } %}
{% if let Some(img) = cover_url %}
<meta property="og:image" content="{{ img }}">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="{{ img }}">
{% else %}
<meta name="twitter:card" content="summary">
{% endif %}
{% when _ %}
<meta name="twitter:card" content="summary">
{% endmatch %}
<meta name="twitter:title" content="{{ item.title }} - {{ creator_username }}">
<meta name="twitter:description" content="{{ item.description }}">
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "MusicRecording",
    "name": "{{ item.title_json()|safe }}",
    "description": "{{ item.description_json()|safe }}",
    "url": "{{ host_url }}/i/{{ item.id }}",
    "byArtist": {
        "@type": "Person",
        "name": "{{ creator_username }}",
        "url": "{{ host_url }}/u/{{ creator_username }}"
    }{% match item.content %}{% when crate::types::ItemContent::Audio with { cover_url, duration, .. } %}{% if let Some(img) = cover_url %},
    "image": "{{ img }}"{% endif %}{% if let Some(dur) = duration %},
    "duration": "{{ dur }}"{% endif %}{% when _ %}{% endmatch %}{% if let Some(pt) = project_title %},
    "inAlbum": {
        "@type": "MusicAlbum",
        "name": "{{ pt }}",
        "url": "{{ host_url }}/p/{{ project_slug }}"
    }{% endif %},
    "isPartOf": {
        "@type": "WebSite",
        "name": "Makenot.work",
        "url": "{{ host_url }}"
    }
}
</script>
<link rel="stylesheet" href="/static/media-player.css">
{% endblock %}

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

    <article class="media-container">
        <header class="author-header">
            <div class="author-avatar">{{ creator_avatar_initials }}</div>
            <div class="author-info">
                <div class="author-name"><a href="/u/{{ creator_username }}">{% if let Some(name) = creator_display_name %}{{ name }}{% else %}{{ creator_username }}{% endif %}</a></div>
                <div class="media-meta">{{ item.release_date }}{% match item.content %}{% when crate::types::ItemContent::Audio with { duration, .. } %}{% if let Some(dur) = duration %} | {{ dur }}{% endif %}{% when _ %}{% endmatch %}</div>
            </div>
        </header>

        <h1 class="media-title">{{ item.title }}</h1>

        {% if let Some(project_title) = project_title %}
        <p class="media-series">
            <a href="/p/{{ project_slug }}">{{ project_title }}</a>{% match item.content %}{% when crate::types::ItemContent::Audio with { episode_number, .. } %}{% if let Some(episode) = episode_number %} | Episode {{ episode }}{% endif %}{% when _ %}{% endmatch %}
        </p>
        {% endif %}

        <div class="cover-art">
            {% match item.content %}
            {% when crate::types::ItemContent::Audio with { cover_url, .. } %}
            {% if let Some(url) = cover_url %}
            <img src="{{ url }}" alt="{{ item.title }} cover art">
            {% else %}
            [Cover Art]
            {% endif %}
            {% when _ %}
            [Cover Art]
            {% endmatch %}
        </div>

        {% if !item.description.is_empty() %}
        <div class="media-description">
            <p>{{ item.description }}</p>
        </div>
        {% endif %}

        <div class="store-cta audio-store-cta">
            {% if has_access %}
            <p class="audio-access-msg">You have access to this item.</p>
            <a href="/l/{{ item.id }}" class="btn-primary">View in library &rarr;</a>
            {% else if item.is_free %}
                {% if let Some(_user) = session_user %}
                    {% if in_library %}
                    <span class="library-status audio-library-status">In your library &middot; <a href="/l/{{ item.id }}">Listen now &rarr;</a></span>
                    {% else %}
                    <button class="add-to-library-btn btn-primary"
                            hx-post="/api/library/add/{{ item.id }}"
                            hx-swap="outerHTML">Add to Library - Free</button>
                    {% endif %}
                {% else %}
                <a href="/login?redirect=/l/{{ item.id }}" class="btn-primary">Log in to listen - Free</a>
                {% endif %}
            {% else %}
            <p class="audio-price">{{ item.price }}</p>
                {% if let Some(_user) = session_user %}
                <a href="/purchase/{{ item.id }}" class="btn-primary">{% if item.pwyw_enabled %}Pay What You Want{% else %}Buy Once{% endif %} - {{ item.price }}</a>
                {% else %}
                <a href="/login?redirect=/i/{{ item.id }}" class="btn-primary">Log in to purchase</a>
                {% endif %}
            <p class="audio-fee-note">Support {{ creator_username }} directly &mdash; 0% platform fee.</p>
            {% endif %}
        </div>

        {% if !item.tags.is_empty() %}
        <div class="media-tags">
            {% for tag in item.tags %}
            <a href="/discover?tag={{ tag.slug }}" class="tag audio-tag-link">{{ tag.name }}</a>
            {% endfor %}
        </div>
        {% endif %}

    </article>

    {% include "partials/discussion_section.html" %}

    <footer class="media-player-footer">
        <a href="/i/{{ item.id }}" data-copy-link>Copy link</a> &middot;
        <a href="/">Makenot<span class="dot">.</span>work</a> | Fair distribution for creatives of all kinds
    </footer>
{% endblock %}

{% block scripts %}{% endblock %}