<?php
use function App\Core\{e, url};

$tracks = $tracks ?? [];
$q = (string) ($q ?? '');
$sort = (string) ($sort ?? 'newest');
?>
<section class="container music-search-page">
    <div class="music-search-head">
        <p class="eyebrow">Music arama</p>
        <h1><?= e($heading ?? 'Muzik Arama') ?></h1>
        <form class="list-search music-list-search" action="<?= url('/music/arama') ?>" method="get" data-music-search-form>
            <input name="q" value="<?= e($q) ?>" data-music-live-search autocomplete="off" placeholder="Sarki, sanatci, aciklama veya tarz ara">
            <select name="sirala" aria-label="Siralama">
                <option value="newest" <?= $sort === 'newest' ? 'selected' : '' ?>>En yeni</option>
                <option value="popular" <?= $sort === 'popular' ? 'selected' : '' ?>>Populer</option>
                <option value="plays" <?= $sort === 'plays' ? 'selected' : '' ?>>En cok dinlenen</option>
                <option value="premium" <?= $sort === 'premium' ? 'selected' : '' ?>>Premium</option>
                <option value="free" <?= $sort === 'free' ? 'selected' : '' ?>>Ucretsiz</option>
            </select>
            <button class="pill primary" type="submit">Ara</button>
            <div class="music-search-results" data-music-search-results hidden></div>
        </form>
    </div>

    <?php if ($tracks !== []): ?>
        <div class="grid music-grid">
            <?php foreach ($tracks as $track): ?>
                <?php require BASE_PATH . '/app/Views/partials/music-card.php'; ?>
            <?php endforeach; ?>
        </div>
    <?php else: ?>
        <div class="empty-state music-empty-state">
            <strong>Sonuc bulunamadi.</strong>
            <p>Farkli bir sarki, sanatci veya tarz kelimesiyle tekrar ara.</p>
        </div>
    <?php endif; ?>
</section>
