<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <title>Kütüphane & Ayarlar</title>
    <link rel="icon" type="image/png" href="/static/img/icon.png">
    <style>
        .nav-tabs .nav-link { font-weight: bold; color: #495057; }
        .nav-tabs .nav-link.active { border-bottom: 3px solid #0d6efd; color: #0d6efd; }
    
        /* Mobile shell fix: keep the sidebar from squeezing content on phones. */
        @media (max-width: 767px) {
            html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
            .container-fluid > .row.g-0 { display: block; width: 100%; margin: 0; }
            aside.sidebar,
            .sidebar {
                width: 100% !important;
                min-width: 0 !important;
                max-width: 100% !important;
                min-height: auto !important;
                height: auto !important;
                position: relative !important;
                top: auto !important;
                flex-direction: row !important;
                align-items: stretch;
                overflow-x: auto;
                overflow-y: hidden;
                white-space: nowrap;
                -webkit-overflow-scrolling: touch;
            }
            .brand { min-width: 188px; padding: 10px 12px !important; }
            .brand img { width: 40px !important; height: 40px !important; }
            .brand-name { font-size: 1rem !important; }
            .brand-subtitle { font-size: .55rem !important; letter-spacing: .9px !important; }
            .sidebar a { flex: 0 0 auto; padding: 12px 10px !important; }
            .sidebar a .nav-icon { width: 28px; height: 28px; min-width: 28px; }
            .sidebar-footer { display: flex; flex: 0 0 auto; }
            main.col,
            main[class*="col"] {
                display: block;
                width: 100% !important;
                max-width: 100% !important;
                flex: 0 0 100% !important;
                min-width: 0 !important;
            }
            .topbar { position: sticky; top: 0; z-index: 50; padding: 10px 14px !important; }
            .topbar-title { font-size: 1rem; }
            .topbar-status { font-size: .75rem; padding: 4px 9px; }
            main > .p-4 { padding: 14px !important; }
            .card-panel { border-radius: 10px; }
            .card-panel-header { align-items: flex-start; flex-direction: column; padding: 14px !important; }
            .card-panel-header > .d-flex,
            .card-panel-header .d-flex { flex-wrap: wrap; }
            .card-panel-body { padding: 14px !important; }
            .broadcast-controls { display: grid !important; grid-template-columns: 1fr; gap: 10px; }
            .broadcast-controls .action-btn { width: 100%; min-height: 44px; }
            .stream-row,
            .stream-actions { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
            .stream-url,
            .stream-row a { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
            .history-item { align-items: flex-start; }
            .history-time { margin-left: 0; white-space: normal; }
            .now-playing-card { padding: 16px !important; }
            .next-track-box .next-path { white-space: normal; overflow-wrap: anywhere; }
        }
    </style>
</head>
<body class="bg-light p-4">
<div class="container bg-white p-4 rounded shadow-sm">
    <div class="d-flex justify-content-between mb-4">
        <h2>⚙️ Radyo Ayarları ve Kütüphane</h2>
        <a href="/" class="btn btn-outline-primary">← Ana Panel</a>
    </div>

    <div class="card mb-4 bg-light border-0 shadow-sm">
        <div class="card-body">
            <h5 class="card-title text-primary">Jingle Zamanlama Ayarları</h5>
            <form action="/ayarlari-kaydet" method="POST" class="row g-3 align-items-end">
                <div class="col-md-4">
                    <label class="form-label">1. Jingle Dakikası (Her Saat):</label>
                    <select name="dk1" class="form-select">
                        {% for i in range(1, 61) %}
                        <option value="{{ i }}" {% if ayarlar.birinci_dakika == i|string %}selected{% endif %}>{{ i }}. Dakika</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label">2. Jingle Dakikası (Her Saat):</label>
                    <select name="dk2" class="form-select">
                        {% for i in range(1, 61) %}
                        <option value="{{ i }}" {% if ayarlar.ikinci_dakika == i|string %}selected{% endif %}>{{ i }}. Dakika</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-4">
                    <button type="submit" class="btn btn-success w-100">Ayarları Kaydet ve Uygula</button>
                </div>
            </form>
        </div>
    </div>

    <ul class="nav nav-tabs" id="radyoTabs">
        <li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#muzikSekme">Müzik Listesi</button></li>
        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#jingleSekme">Jingle Listesi</button></li>
    </ul>

    <div class="tab-content p-3 border border-top-0 bg-white">
        <div class="tab-pane fade show active" id="muzikSekme">
            {% for kat, dosyalar in icerik.items() if 'muzik' in kat or 'slow' in kat or 'tempolu' in kat %}
                <h6 class="mt-3 text-secondary">{{ kat | upper }}</h6>
                <ul class="list-group list-group-flush">
                    {% for d in dosyalar %}<li class="list-group-item py-1 small">{{ d }}</li>{% endfor %}
                </ul>
            {% endfor %}
        </div>
        <div class="tab-pane fade" id="jingleSekme">
            {% for kat, dosyalar in icerik.items() if 'jingle' in kat or 'saatlik' in kat or 'normal' in kat %}
                <h6 class="mt-3 text-secondary">{{ kat | upper }}</h6>
                <ul class="list-group list-group-flush">
                    {% for d in dosyalar %}<li class="list-group-item py-1 small">{{ d }}</li>{% endfor %}
                </ul>
            {% endfor %}
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>







