{% extends "base.html" %}

{% block title %}Bundle - YouTube Studio{% endblock %}

{% block styles %}
<link rel="stylesheet" href="{{ url_for('youtube', path='/styles.css') }}">
{% endblock %}

{% block content %}
<div class="youtube-page">
    <main class="youtube-layout">
        <section class="card input-card">
            <h1>YouTube Downloader</h1>
            <p class="muted">Paste a link, resolve, then choose MP4 or MP3.</p>
            <div class="input-row">
                <input type="url" id="youtube-url" placeholder="https://youtube.com/watch?v=..." autocomplete="off" />
                <button id="probe-btn" type="button" class="secondary" title="Resolve track">Resolve</button>
            </div>
            <p id="form-hint" class="muted"></p>
        </section>

        <section class="card tracks-card">
            <header class="card-header">
                <h2>Tracks</h2>
                <span id="status-message" class="muted">Waiting for a request...</span>
            </header>

            <article id="metadata-card" class="track-item live hidden">
                <img id="track-thumbnail" src="" alt="Track thumbnail" />
                <div class="track-main">
                    <p id="track-title" class="track-title">--</p>
                    <p id="track-author" class="muted">--</p>
                    <div id="format-actions" class="format-actions hidden">
                        <button id="mp4-btn" class="primary mp4" type="button">MP4</button>
                        <button id="mp3-btn" class="primary mp3" type="button">MP3</button>
                    </div>
                    <div id="progress-card" class="hidden">
                        <div class="progress-row">
                            <span id="progress-phase" class="muted">Idle</span>
                            <span id="progress-percentage" class="muted">0%</span>
                        </div>
                        <div class="progress-bar">
                            <div id="progress-fill"></div>
                        </div>
                        <div class="progress-meta">
                            <span id="progress-bytes" class="muted">0 / 0</span>
                            <span id="progress-speed" class="muted">--</span>
                        </div>
                    </div>
                </div>
            </article>

            <div id="history" class="track-list">
                <p class="muted" id="history-empty">No downloads yet.</p>
            </div>
        </section>
    </main>
</div>
{% endblock %}

{% block scripts %}
<script type="module" src="{{ url_for('youtube', path='/app.js') }}"></script>
{% endblock %}