<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Sleek | 슬릭</title>
    <link rel="icon" type="image/png" href="{{ url_for('static', filename='favicon.png') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>

<body>
    <div class="wrapper">
        <div class="title-area">
            <div class="text-group">
                <h1>Sleek</h1>
                <p class="subtitle">미니멀 유튜브 다운로더</p>
            </div>
            <button class="theme-toggle" id="themeToggle" title="테마 변경">
                <i class="fas fa-sun"></i>
            </button>
        </div>

        <div class="glass-panel">
            <div class="path-row">
                <i class="fas fa-folder path-icon"></i>
                <input type="text" id="savePath" readonly title="저장 경로">
                <button id="changePathBtn" class="btn-micro" title="경로 변경"><i class="fas fa-pen"></i></button>
            </div>

            <div class="input-row">
                <input type="text" id="urlInput" placeholder="유튜브 링크 입력..." autocomplete="off">
                <button id="analyzeBtn" class="btn btn-primary" onclick="analyzeUrl()">
                    <span class="text"><i class="fas fa-arrow-right"></i></span>
                    <div class="spinner"></div>
                </button>
            </div>

            <div class="status-area">
                <div class="status-msg" id="statusMsg"></div>
                <div class="action-buttons" id="actionButtons" style="display: none;">
                    <button class="btn-action" onclick="openFile()" title="파일 열기">
                        <i class="fas fa-play"></i> 파일 열기
                    </button>
                    <button class="btn-action" onclick="openFolder()" title="폴더 열기">
                        <i class="fas fa-folder-open"></i> 폴더 열기
                    </button>
                </div>
            </div>

            <div class="info-grid" id="infoGrid">
                <div class="thumb-box">
                    <img id="thumbImg" src="" alt="">
                </div>
                <div class="meta-box">
                    <h3 id="videoTitle"></h3>
                    <p id="videoMeta"></p>

                    <div class="select-wrapper">
                        <select id="qualitySelect"></select>
                        <i class="fas fa-chevron-down select-arrow"></i>
                    </div>

                    <button class="btn btn-primary btn-full" onclick="download('video')">
                        <span class="text">비디오 다운로드</span>
                        <div class="spinner"></div>
                    </button>

                    <button class="btn btn-secondary btn-full" onclick="download('audio')"
                        style="margin-top: 0.5rem; background: transparent; border: 1px solid rgba(255,255,255,0.2);">
                        <span class="text">오디오만 (MP3)</span>
                        <div class="spinner"></div>
                    </button>
                </div>
            </div>

            <div class="progress-area" id="progressArea">
                <div class="bar-bg">
                    <div class="bar-fill" id="barFill"></div>
                </div>
                <div class="status-row">
                    <span id="progPercent">0%</span>
                    <span id="progSpeed">대기 중...</span>
                </div>
            </div>
        </div>
        <div class="footer-area">
            <a href="/intro" class="link-minimal">Learn more</a>
        </div>
    </div>

    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
</body>

</html>