<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Akkurtcast Mobil</title>
    <link rel="icon" type="image/png" href="/static/img/icon.png">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <style>
        body { background:#101820; color:#f8fafc; }
        .wrap { max-width: 560px; margin: 0 auto; padding: 16px; }
        .cardx { background:#182533; border:1px solid #294056; border-radius:8px; padding:16px; }
        .logo { width: 180px; display:block; margin: 4px auto 18px; }
        .btn { min-height: 46px; }
        select, .form-select { background:#0f1720; color:#fff; border-color:#36506a; }
    
        /* 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>
<main class="wrap vstack gap-3">
    <img class="logo" src="/static/img/akkurtcast-logo.png" alt="Akkurtcast">
    <section class="cardx">
        <div class="text-secondary small">Durum</div>
        <div class="h4">{{ durum }}</div>
        <div class="text-secondary small mt-3">Şu an çalıyor</div>
        <div class="fw-bold">{{ now.title or now.filename or 'Bilgi bekleniyor' }}</div>
        <div class="text-secondary">{{ now.artist }}</div>
        <div class="mt-2">Dinleyici: {{ listeners }}</div>
    </section>
    <section class="cardx">
        <div class="d-grid gap-2">
            <form method="post" action="/baslat"><button class="btn btn-success w-100">Sunucu başlat</button></form>
            <form method="post" action="/durdur" onsubmit="return prompt('Yayını durdurmak için DURDUR yazman gerekiyor:') === 'DURDUR';">
                <input type="hidden" name="stop_confirm" value="DURDUR">
                <button class="btn btn-danger w-100">Sunucu durdur</button>
            </form>
            <form method="post" action="/sonraki-sarki"><button class="btn btn-primary w-100">Sonraki şarkı</button></form>
        </div>
    </section>
    <section class="cardx">
        <form method="post" action="/acil-anons" class="vstack gap-2">
            <input type="hidden" name="next" value="/mobil">
            <label class="form-label">Jingle / acil anons</label>
            <select class="form-select" name="path">{% for dosya in jingle_dosyalari %}<option value="{{ dosya.path }}">{{ dosya.name }}</option>{% endfor %}</select>
            <select class="form-select" name="cut_policy"><option value="cut">Şimdi kes</option><option value="after">Şarkı bitince</option></select>
            <button class="btn btn-warning">Çal</button>
        </form>
    </section>
    <a class="btn btn-outline-light" href="/">Tam panele dön</a>
</main>
</body>
</html>








