<?php
/**
 * Pop-out player template.
 *
 * Rendered by class-vmplayer-popout as a standalone HTML page.
 *
 * Expected variables in scope:
 *   $active_station array Currently active station data.
 *   $active_index   int   Zero-based index of the active station.
 *
 * @package VMPlayer
 */

// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

$social         = isset( $active_station['social'] ) && is_array( $active_station['social'] ) ? $active_station['social'] : array();
$has_logo       = ! empty( $active_station['logo_url'] );
$total_stations = isset( $stations ) && is_array( $stations ) ? count( $stations ) : 0;
$single_station = $total_stations <= 1;

// Feature flags exposed to the JS so it knows whether to unhide the
// LIVE badge and listener count when metadata arrives. Both default
// false so a station without explicit configuration behaves exactly
// like the pre-1.1.3 defaults.
// Feature flags exposed to the JS so it knows whether to unhide the
// LIVE badge and listener count when metadata arrives. Both default
// false so a station without explicit configuration behaves exactly
// like the pre-1.1.3 defaults. Route through sanitize_bool so a
// stale string value from an older buggy save cannot slip through.
$show_listener_count = VMPlayer_Settings::sanitize_bool(
    isset( $active_station['show_listener_count'] ) ? $active_station['show_listener_count'] : false
);
$detect_live         = VMPlayer_Settings::sanitize_bool(
    isset( $active_station['detect_live'] ) ? $active_station['detect_live'] : false
);
// show_clock defaults to true when the field is missing so legacy
// stations upgrade with the clock still on.
$show_clock          = ! isset( $active_station['show_clock'] )
    ? true
    : VMPlayer_Settings::sanitize_bool( $active_station['show_clock'] );
?>
<div
    class="vmplayer-popout vmplayer"
    data-station-index="<?php echo esc_attr( $active_index ); ?>"
    data-show-listener-count="<?php echo $show_listener_count ? '1' : '0'; ?>"
    data-detect-live="<?php echo $detect_live ? '1' : '0'; ?>"
    role="region"
    aria-label="<?php esc_attr_e( 'Pop-out streaming radio player', 'vmplayer' ); ?>"
>
    <div class="vmplayer-popout__window">

        <div class="vmplayer-popout__chrome">
            <div class="vmplayer-popout__identity">
                <span class="vmplayer-popout__station-icon" aria-hidden="true">
                    <?php if ( $has_logo ) : ?>
                        <img src="<?php echo esc_url( $active_station['logo_url'] ); ?>" alt="" data-role="chrome-logo" />
                    <?php else : ?>
                        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M12 8a4 4 0 100 8 4 4 0 000-8zM5.6 6.5a9 9 0 000 11M18.4 6.5a9 9 0 010 11M8.8 9.7a4.5 4.5 0 000 4.6M15.2 9.7a4.5 4.5 0 010 4.6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
                        </svg>
                    <?php endif; ?>
                </span>
                <div class="vmplayer-popout__identity-text">
                    <span class="vmplayer-popout__station-name" data-role="chrome-name">
                        <?php echo esc_html( $active_station['name'] ); ?>
                    </span>
                    <span class="vmplayer-popout__label"><?php esc_html_e( 'POP OUT PLAYER', 'vmplayer' ); ?></span>
                    <?php $display_total = max( 1, (int) $total_stations ); ?>
                    <span
                        class="vmplayer__station-counter vmplayer-popout__station-counter<?php echo $single_station ? ' is-hidden' : ''; ?>"
                        data-role="station-counter"
                        data-total="<?php echo esc_attr( (string) $display_total ); ?>"
                        aria-label="<?php
                        /* translators: 1: current station number, 2: total stations */
                        printf( esc_attr__( 'Station %1$d of %2$d', 'vmplayer' ), (int) $active_index + 1, (int) $display_total );
                        ?>"
                    >
                        <?php
                        printf(
                            /* translators: 1: current station number, 2: total stations */
                            esc_html__( 'Station %1$d of %2$d', 'vmplayer' ),
                            (int) $active_index + 1,
                            (int) $display_total
                        );
                        ?>
                    </span>
                </div>
            </div>

            <div class="vmplayer-popout__controls">
                <button
                    type="button"
                    class="vmplayer-popout__ctrl"
                    data-role="dock"
                    aria-label="<?php esc_attr_e( 'Dock back to main player', 'vmplayer' ); ?>"
                    title="<?php esc_attr_e( 'Dock back to main player', 'vmplayer' ); ?>"
                >
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <path d="M14 3h7v7M21 3l-9 9M19 14v5a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </button>

                <button
                    type="button"
                    class="vmplayer-popout__ctrl"
                    data-role="minimize"
                    aria-label="<?php esc_attr_e( 'Minimize to compact bar', 'vmplayer' ); ?>"
                    title="<?php esc_attr_e( 'Minimize to compact bar', 'vmplayer' ); ?>"
                >
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <path d="M4 12h16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                    </svg>
                </button>

                <button
                    type="button"
                    class="vmplayer-popout__ctrl"
                    data-role="close"
                    aria-label="<?php esc_attr_e( 'Close pop-out', 'vmplayer' ); ?>"
                    title="<?php esc_attr_e( 'Close pop-out', 'vmplayer' ); ?>"
                >
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                    </svg>
                </button>
            </div>
        </div>

        <div class="vmplayer-popout__status">
            <span class="vmplayer__onair" data-state="off" aria-hidden="true">
                <span class="vmplayer__onair-dot"></span>
                <span class="vmplayer__onair-label"><?php esc_html_e( 'ON AIR', 'vmplayer' ); ?></span>
            </span>
            <?php if ( $show_clock ) : ?>
            <div class="vmplayer__clock">
                <span class="vmplayer__clock-icon" aria-hidden="true">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2"/>
                        <path d="M12 7v5l3 2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                    </svg>
                </span>
                <span class="vmplayer__time" data-role="time">&nbsp;</span>
                <span class="vmplayer__date" data-role="date">&nbsp;</span>
            </div>
            <?php endif; ?>
        </div>

        <div class="vmplayer-popout__artwork-wrap">
            <div class="vmplayer-popout__artwork" data-role="artwork">
                <?php if ( $has_logo ) : ?>
                    <img src="<?php echo esc_url( $active_station['logo_url'] ); ?>" alt="" data-role="artwork-img" />
                <?php endif; ?>
            </div>
        </div>

        <div class="vmplayer-popout__body">
            <div class="vmplayer-popout__info">
                <p class="vmplayer__now-playing-label">
                    <?php esc_html_e( 'NOW PLAYING', 'vmplayer' ); ?>
                    <span class="vmplayer__live-badge" data-role="live-badge" hidden>
                        <?php esc_html_e( 'LIVE', 'vmplayer' ); ?>
                    </span>
                </p>
                <h3 class="vmplayer__track-title" data-role="track-title">
                    <?php echo esc_html( $active_station['name'] ); ?>
                </h3>
                <p class="vmplayer__artist" data-role="artist">&nbsp;</p>
            </div>

            <div class="vmplayer-popout__visualizer">
                <div class="vmplayer__visualizer" data-role="visualizer" aria-hidden="true">
                    <?php for ( $i = 0; $i < 20; $i++ ) : ?>
                        <span class="vmplayer__visualizer-bar"></span>
                    <?php endfor; ?>
                </div>
            </div>
        </div>

        <div class="vmplayer__stream-info" data-role="stream-info">
            <span class="vmplayer__stream-info-icon" aria-hidden="true">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M4 20V10m6 10V4m6 16v-8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                </svg>
            </span>
            <span data-role="genre"><?php echo esc_html( $active_station['genre'] ); ?></span>
            <span class="vmplayer__stream-info-sep" data-role="sep-bitrate" aria-hidden="true">&bull;</span>
            <span data-role="bitrate"></span>
            <span class="vmplayer__stream-info-sep" data-role="sep-samplerate" aria-hidden="true">&bull;</span>
            <span data-role="samplerate"></span>
            <span class="vmplayer__stream-info-sep" data-role="sep-channels" aria-hidden="true">&bull;</span>
            <span data-role="channels"></span>
            <span class="vmplayer__stream-info-sep is-hidden" data-role="sep-listeners" aria-hidden="true">&bull;</span>
            <span
                class="vmplayer__listener-count"
                data-role="listener-count"
                hidden
                aria-label="<?php esc_attr_e( 'Current listeners', 'vmplayer' ); ?>"
            >
                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 12a4 4 0 100-8 4 4 0 000 8zM4 22v-2a6 6 0 016-6h4a6 6 0 016 6v2H4z"/>
                </svg>
                <span data-role="listener-count-value">0</span>
            </span>
        </div>

        <p class="vmplayer__description" data-role="description">
            <?php echo wp_kses_post( $active_station['description'] ); ?>
        </p>

        <div class="vmplayer__streaming-via">
            <p class="vmplayer__streaming-via-label"><?php esc_html_e( 'STREAMING VIA', 'vmplayer' ); ?></p>
            <div class="vmplayer__format-badges" role="list">
                <span class="vmplayer__format-badge" data-format="shoutcast" role="listitem">SHOUTcast</span>
                <span class="vmplayer__format-badge" data-format="icecast" role="listitem">icecast</span>
                <span class="vmplayer__format-badge" data-format="hls" role="listitem">HLS</span>
                <span class="vmplayer__format-badge" data-format="direct" role="listitem">AUDIO MP3 AAC</span>
            </div>
        </div>

        <div class="vmplayer__transport vmplayer-popout__transport">
            <div class="vmplayer__volume">
                <button type="button" class="vmplayer__btn vmplayer__mute-toggle" data-role="mute-toggle"
                    aria-label="<?php esc_attr_e( 'Mute', 'vmplayer' ); ?>">
                    <svg class="vmplayer__icon-vol-on" width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <path d="M3 10v4h4l5 4V6l-5 4H3zM16 8a5 5 0 010 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    <svg class="vmplayer__icon-vol-off" width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <path d="M3 10v4h4l5 4V6l-5 4H3zM17 9l4 6M21 9l-4 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </button>
                <input type="range" min="0" max="100" value="100" step="1" class="vmplayer__volume-slider"
                    data-role="volume-slider" aria-label="<?php esc_attr_e( 'Volume', 'vmplayer' ); ?>" />
                <button type="button" class="vmplayer__btn vmplayer__vol-up" data-role="vol-up"
                    aria-label="<?php esc_attr_e( 'Set volume to maximum', 'vmplayer' ); ?>">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <path d="M3 10v4h4l5 4V6l-5 4H3zM16 8a5 5 0 010 8M19 5a9 9 0 010 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </button>
            </div>

            <div class="vmplayer__playback">
                <button type="button" class="vmplayer__btn vmplayer__prev" data-role="prev"
                    aria-label="<?php esc_attr_e( 'Previous station', 'vmplayer' ); ?>"
                    <?php if ( $single_station ) : ?>disabled aria-disabled="true"<?php endif; ?>>
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <path d="M6 6h2v12H6V6zm3.5 6l8.5 6V6l-8.5 6z"/>
                    </svg>
                </button>
                <button type="button" class="vmplayer__btn vmplayer__play-toggle" data-role="play-toggle" data-state="paused"
                    aria-label="<?php esc_attr_e( 'Play', 'vmplayer' ); ?>">
                    <svg class="vmplayer__icon-play" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <path d="M8 5v14l11-7L8 5z"/>
                    </svg>
                    <svg class="vmplayer__icon-pause" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <path d="M6 5h4v14H6V5zm8 0h4v14h-4V5z"/>
                    </svg>
                </button>
                <button type="button" class="vmplayer__btn vmplayer__next" data-role="next"
                    aria-label="<?php esc_attr_e( 'Next station', 'vmplayer' ); ?>"
                    <?php if ( $single_station ) : ?>disabled aria-disabled="true"<?php endif; ?>>
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <path d="M6 18l8.5-6L6 6v12zM16 6h2v12h-2V6z"/>
                    </svg>
                </button>
            </div>
        </div>

        <div class="vmplayer-popout__footer">
            <div class="vmplayer__follow">
                <span class="vmplayer__follow-label"><?php esc_html_e( 'FOLLOW US', 'vmplayer' ); ?></span>
                <div class="vmplayer__social" data-role="social">
                    <a href="<?php echo esc_url( ! empty( $social['facebook'] ) ? $social['facebook'] : '#' ); ?>" class="vmplayer__social-link<?php echo empty( $social['facebook'] ) ? ' is-hidden' : ''; ?>" data-platform="facebook" target="_blank" rel="noopener noreferrer" aria-label="Facebook">
                        <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M22 12c0-5.5-4.5-10-10-10S2 6.5 2 12c0 5 3.7 9.1 8.4 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.3v7C18.3 21.1 22 17 22 12z"/></svg>
                    </a>
                    <a href="<?php echo esc_url( ! empty( $social['bsky'] ) ? $social['bsky'] : '#' ); ?>" class="vmplayer__social-link<?php echo empty( $social['bsky'] ) ? ' is-hidden' : ''; ?>" data-platform="bsky" target="_blank" rel="noopener noreferrer" aria-label="Bsky">
                        <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M12 10.8C10.9 8.7 7.7 4.7 4.8 2.6 2 .6 1 1 .3 1.3.2 1.6 0 3.4 0 4.5c0 1.1.6 9.2 1 10.5.5 1.7 2.3 2.3 3.9 2.1.1 0 .1 0 .2 0-.1 0-.1 0-.2 0-2.4.3-4.5 1.2-1.7 4.3 3 3.4 4.1-.7 4.7-2.8.6 2 1.3 6.1 4.8 2.8 2.6-2.9.6-3.9-1.8-4.3-.1 0-.1 0-.2 0 .1 0 .1 0 .2 0 1.6.3 3.4-.4 3.9-2.1.4-1.3 1-9.4 1-10.5 0-1.1-.2-2.9-.3-3.2-.7-.3-1.7-.7-4.5 1.3-2.9 2.1-6.1 6.1-7.2 8.2z"/></svg>
                    </a>
                    <a href="<?php echo esc_url( ! empty( $social['instagram'] ) ? $social['instagram'] : '#' ); ?>" class="vmplayer__social-link<?php echo empty( $social['instagram'] ) ? ' is-hidden' : ''; ?>" data-platform="instagram" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
                        <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M12 2.2c3.2 0 3.6 0 4.8.1 1.2.1 1.8.3 2.2.4.6.2 1 .5 1.4.9.4.4.7.9.9 1.4.2.4.3 1 .4 2.2.1 1.2.1 1.6.1 4.8s0 3.6-.1 4.8c-.1 1.2-.3 1.8-.4 2.2-.2.6-.5 1-.9 1.4-.4.4-.9.7-1.4.9-.4.2-1 .3-2.2.4-1.2.1-1.6.1-4.8.1s-3.6 0-4.8-.1c-1.2-.1-1.8-.3-2.2-.4-.6-.2-1-.5-1.4-.9-.4-.4-.7-.9-.9-1.4-.2-.4-.3-1-.4-2.2C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.8c.1-1.2.3-1.8.4-2.2.2-.6.5-1 .9-1.4.4-.4.9-.7 1.4-.9.4-.2 1-.3 2.2-.4C8.4 2.2 8.8 2.2 12 2.2M12 0C8.7 0 8.3 0 7.1.1 5.8.1 5 .3 4.3.6c-.8.3-1.5.7-2.1 1.4C1.5 2.6 1.1 3.3.8 4.1.5 4.8.3 5.6.2 6.9.1 8.1 0 8.5 0 11.8s0 3.7.1 4.9c.1 1.3.3 2.1.6 2.8.3.8.7 1.5 1.4 2.1.7.7 1.3 1.1 2.1 1.4.7.3 1.5.5 2.8.6C8.3 24 8.7 24 12 24s3.7 0 4.9-.1c1.3-.1 2.1-.3 2.8-.6.8-.3 1.5-.7 2.1-1.4.7-.7 1.1-1.3 1.4-2.1.3-.7.5-1.5.6-2.8.1-1.2.1-1.6.1-4.9s0-3.7-.1-4.9c-.1-1.3-.3-2.1-.6-2.8-.3-.8-.7-1.5-1.4-2.1C21.4 1.5 20.7 1.1 19.9.8 19.2.5 18.4.3 17.1.2 15.9.1 15.5 0 12 0zm0 5.8A6.2 6.2 0 105.8 12 6.2 6.2 0 0012 5.8zm0 10.2a4 4 0 114-4 4 4 0 01-4 4zm7.8-10.4a1.4 1.4 0 11-1.4-1.4 1.4 1.4 0 011.4 1.4z"/></svg>
                    </a>
                    <a href="<?php echo esc_url( ! empty( $social['youtube'] ) ? $social['youtube'] : '#' ); ?>" class="vmplayer__social-link<?php echo empty( $social['youtube'] ) ? ' is-hidden' : ''; ?>" data-platform="youtube" target="_blank" rel="noopener noreferrer" aria-label="YouTube">
                        <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M23.5 6.2a3 3 0 00-2.1-2.1C19.5 3.6 12 3.6 12 3.6s-7.5 0-9.4.5A3 3 0 00.5 6.2 31.2 31.2 0 000 12a31.2 31.2 0 00.5 5.8 3 3 0 002.1 2.1c1.9.5 9.4.5 9.4.5s7.5 0 9.4-.5a3 3 0 002.1-2.1A31.2 31.2 0 0024 12a31.2 31.2 0 00-.5-5.8zM9.6 15.6V8.4l6.2 3.6-6.2 3.6z"/></svg>
                    </a>
                    <a href="<?php echo esc_url( ! empty( $social['whatsapp'] ) ? $social['whatsapp'] : '#' ); ?>" class="vmplayer__social-link<?php echo empty( $social['whatsapp'] ) ? ' is-hidden' : ''; ?>" data-platform="whatsapp" target="_blank" rel="noopener noreferrer" aria-label="WhatsApp">
                        <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M17.5 14.4c-.3-.1-1.7-.9-2-1-.3-.1-.5-.1-.7.2-.2.3-.8.9-.9 1.1-.2.2-.4.3-.7.1-.3-.1-1.2-.4-2.4-1.4-.9-.8-1.5-1.8-1.6-2.1-.2-.3 0-.4.1-.6.1-.1.3-.4.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5-.1-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5H8c-.2 0-.5.1-.7.4-.2.3-1 1-1 2.4 0 1.4 1 2.8 1.2 3 .1.2 2 3.1 4.9 4.4.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.5-.1 1.7-.7 2-1.4.2-.7.2-1.2.2-1.3-.1-.2-.3-.3-.5-.4zM12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.5 1.3 4.9L2 22l5.3-1.4c1.4.8 3 1.2 4.7 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2z"/></svg>
                    </a>
                    <a href="<?php echo esc_url( ! empty( $social['x'] ) ? $social['x'] : '#' ); ?>" class="vmplayer__social-link<?php echo empty( $social['x'] ) ? ' is-hidden' : ''; ?>" data-platform="x" target="_blank" rel="noopener noreferrer" aria-label="X">
                        <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M18.9 1.5h3.6l-7.9 9 9.3 12.3h-7.3l-5.7-7.5-6.6 7.5H.8l8.5-9.7L.1 1.5h7.5l5.1 6.8 6.2-6.8zm-1.2 19.2h2L6.3 3.4H4.2l13.5 17.3z"/></svg>
                    </a>
                </div>
                <button type="button" class="vmplayer__btn vmplayer__kebab" data-role="kebab"
                    aria-label="<?php esc_attr_e( 'More options', 'vmplayer' ); ?>">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <circle cx="12" cy="5" r="2"/>
                        <circle cx="12" cy="12" r="2"/>
                        <circle cx="12" cy="19" r="2"/>
                    </svg>
                </button>
            </div>
        </div>

        <div class="vmplayer-popout__supports">
            <?php esc_html_e( 'Supports:', 'vmplayer' ); ?>
            <span>Shoutcast</span>
            <span class="vmplayer__sep" aria-hidden="true">&bull;</span>
            <span>Icecast</span>
            <span class="vmplayer__sep" aria-hidden="true">&bull;</span>
            <span>HLS</span>
            <span class="vmplayer__sep" aria-hidden="true">&bull;</span>
            <span>MP3</span>
            <span class="vmplayer__sep" aria-hidden="true">&bull;</span>
            <span>AAC</span>
            <span class="vmplayer__sep" aria-hidden="true">&bull;</span>
            <span>OGG</span>
            <span class="vmplayer__sep" aria-hidden="true">&bull;</span>
            <span>Opus</span>
        </div>

    </div>

    <div class="vmplayer-popout__compact" data-role="compact-bar" hidden>
        <div class="vmplayer-popout__compact-marquee">
            <span class="vmplayer-popout__compact-title" data-role="compact-title">
                <?php echo esc_html( $active_station['name'] ); ?>
            </span>
        </div>
        <button type="button" class="vmplayer__btn vmplayer-popout__compact-play"
            data-role="compact-play-toggle" data-state="paused"
            aria-label="<?php esc_attr_e( 'Play', 'vmplayer' ); ?>">
            <svg class="vmplayer__icon-play" width="18" height="18" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path d="M8 5v14l11-7L8 5z"/>
            </svg>
            <svg class="vmplayer__icon-pause" width="18" height="18" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path d="M6 5h4v14H6V5zm8 0h4v14h-4V5z"/>
            </svg>
        </button>
        <input type="range" min="0" max="100" value="100" step="1"
            class="vmplayer__volume-slider vmplayer-popout__compact-volume"
            data-role="compact-volume" aria-label="<?php esc_attr_e( 'Volume', 'vmplayer' ); ?>" />
        <button type="button" class="vmplayer__btn vmplayer-popout__compact-restore"
            data-role="restore" aria-label="<?php esc_attr_e( 'Restore full player', 'vmplayer' ); ?>"
            title="<?php esc_attr_e( 'Restore full player', 'vmplayer' ); ?>">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path d="M5 15v4h4M19 9V5h-4M5 15l6-6M19 9l-6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            </svg>
        </button>
    </div>

</div>
