{% extends "base.html" %}

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

{% block head %}
<meta name="robots" content="noindex">
<link rel="stylesheet" href="/static/media-player.css">
{% endblock %}

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

    <article class="media-container">
        <p class="library-back">
            <a href="/i/{{ item.id }}">&larr; Store page</a> &middot;
            <a href="/library">Your library</a>
        </p>

        <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::Video 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>
        </p>
        {% endif %}

        <div class="video-display">
            <video id="media-a" preload="metadata"
                   {% match item.content %}{% when crate::types::ItemContent::Video with { cover_url, .. } %}{% if let Some(url) = cover_url %}poster="{{ url }}"{% endif %}{% when _ %}{% endmatch %}>
                {% if let Some(vurl) = video_url %}
                <source src="{{ vurl }}">
                {% endif %}
            </video>
        </div>

        <div class="media-player">
            <div class="player-controls">
                <button class="play-button" id="play-btn" aria-label="Play">
                    <svg id="play-icon" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M8 5v14l11-7z"/>
                    </svg>
                    <svg id="pause-icon" class="media-icon-hidden" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
                    </svg>
                </button>
                <div class="progress-container">
                    <div class="progress-bar" id="progress-bar">
                        <div class="progress-fill" id="progress-fill"></div>
                    </div>
                    <div class="time-display">
                        <span id="current-time">0:00</span>
                        <span id="duration">0:00</span>
                    </div>
                </div>
            </div>

            <div class="insertion-label" id="insertion-label"></div>
            <button class="skip-insertion" id="skip-btn" type="button">Skip &#8250;</button>

            <div class="player-secondary">
                <div class="speed-control">
                    <span>Speed:</span>
                    <button class="speed-button" data-speed="0.5">0.5x</button>
                    <button class="speed-button is-selected" data-speed="1">1x</button>
                    <button class="speed-button" data-speed="1.5">1.5x</button>
                    <button class="speed-button" data-speed="2">2x</button>
                </div>
                <div class="volume-control">
                    <span class="volume-icon">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/>
                        </svg>
                    </span>
                    <input type="range" class="volume-slider" id="volume-slider" min="0" max="100" value="75" />
                </div>
            </div>
        </div>

        {% if !chapters.is_empty() %}
        <div class="chapters">
            <h3>Chapters</h3>
            <ul class="chapter-list">
                {% for chapter in chapters %}
                <li class="chapter-item" data-time="{{ chapter.start_seconds }}">
                    <span class="chapter-title">{{ chapter.title }}</span>
                    <span class="chapter-time">{{ chapter.timestamp }}</span>
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endif %}

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

        {% if !versions.is_empty() %}
        <section class="library-downloads">
            <h3>Source files</h3>
            {% for version in versions %}
            {% if version.has_file %}
            <div class="download-row">
                <span class="download-version">v{{ version.number }}</span>
                {% if let Some(label) = version.label %}
                <span class="download-label">{{ label }}</span>
                {% else %}
                <span class="download-label download-label--empty">{% match version.file_name %}{% when Some with (name) %}{{ name }}{% when None %}Download{% endmatch %}</span>
                {% endif %}
                <span class="download-size">{{ version.size }}</span>
                <button class="btn-secondary btn-download-compact"
                        onclick="downloadVersion('{{ version.id }}')">Download</button>
            </div>
            {% endif %}
            {% endfor %}
        </section>
        {% endif %}
    </article>

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

    <footer class="media-player-footer">
        {% if is_owner %}
        <a href="/dashboard/item/{{ item.id }}">Edit</a> &middot;
        {% endif %}
        <a href="/i/{{ item.id }}">Store page</a> &middot;
        <a href="/library">Your library</a>
    </footer>
{% endblock %}

{% block scripts %}
<script id="media-player-data" type="application/json">
{
    "segments": {{ segments_json|safe }},
    "mediaType": "video",
    "itemId": "{{ item.id }}"
}
</script>
<script src="/static/media-player.js"></script>
<script>
function downloadVersion(versionId) {
    fetch('/api/versions/' + versionId + '/download')
        .then(function(res) {
            if (!res.ok) throw new Error('Failed to get download URL');
            return res.json();
        })
        .then(function(data) {
            window.location.href = data.download_url;
        })
        .catch(function(err) {
            showToast(err.message || 'Download failed');
        });
}
</script>
{% endblock %}