<?php require_once __DIR__ . '/includes/bootstrap.php'; $np = ugfx_now_playing(); $bootstrapCss = ugfx_vendor_asset('assets/vendor/bootstrap/css/bootstrap.min.css', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css'); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title><?= htmlspecialchars($ugfx['popup_title']) ?></title>
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Orbitron:wght@700;800&display=swap" rel="stylesheet"><link href="<?= htmlspecialchars($bootstrapCss) ?>" rel="stylesheet"><link rel="stylesheet" href="<?= ugfx_asset('css/theme.css') ?>">
</head>
<body class="ugfx-body">
<div class="container py-4">
  <div class="ugfx-card p-4 text-center">
    <div class="ugfx-live-pill mb-3">POPUP PLAYER</div>
    <img src="<?= htmlspecialchars($np['art']) ?>" alt="cover" class="img-fluid rounded-4 mb-3" style="max-width: 320px;">
    <h1 class="h3 mb-1 current-track"><?= htmlspecialchars($np['title']) ?></h1>
    <p class="text-secondary mb-3"><span class="current-artist"><?= htmlspecialchars($np['artist']) ?></span> · Mount <?= htmlspecialchars($np['mount'] ?? '/autodj') ?></p>
    <audio controls autoplay style="width:100%;"><source src="<?= htmlspecialchars($np['stream_url'] ?: ($ugfx['stream_url'] ?? '')) ?>" type="audio/mpeg"></audio>
    <div class="d-flex justify-content-center gap-2 flex-wrap mt-3">
      <span class="ugfx-chip"><i class="bi bi-broadcast-pin"></i> <?= htmlspecialchars($np['status']) ?></span>
      <span class="ugfx-chip"><i class="bi bi-headphones"></i> <span class="listener-count"><?= (int) $np['listeners'] ?></span> listener<?= ((int)$np['listeners'] === 1 ? '' : 's') ?></span>
    </div>
  </div>
</div>
</body>
</html>
