<?php
/**
 * Compact player template.
 *
 * Rendered by the [vmplayer variant="compact"] shortcode.
 *
 * Two-row landscape layout approximately 140px tall, sized for
 * sidebars, footer strips, secondary content areas, and any other
 * placement where the main player is too large. Shares data-role
 * hooks with the main template so a single JS class drives both.
 *
 * Expected variables in scope:
 *   $stations       array Full stations array from Settings.
 *   $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;
}

// Data attributes drive the JS state. The compact variant uses the
// same container class conventions as the main variant so the JS
// module finds and manages every instance identically; the variant
// modifier class scopes the CSS.
$container_id   = 'vmplayer-' . wp_generate_uuid4();
$social         = isset( $active_station['social'] ) && is_array( $active_station['social'] ) ? $active_station['social'] : array();
$total_stations = is_array( $stations ) ? count( $stations ) : 0;
$single_station = $total_stations <= 1;

// Convenience flags exposed to the JS for feature toggling. 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
// and flip the toggle backwards.
$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
);
?>
<div
    id="<?php echo esc_attr( $container_id ); ?>"
    class="vmplayer vmplayer--compact"
    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( 'Streaming radio player', 'vmplayer' ); ?>"
>
    <div class="vmplayer__inner vmplayer-compact__inner">

        <div class="vmplayer-compact__row vmplayer-compact__row--top">

            <div class="vmplayer-compact__brand">
                <div class="vmplayer-compact__artwork" data-role="artwork">
                    <img
                        src="<?php echo esc_url( $active_station['logo_url'] ); ?>"
                        alt="<?php echo esc_attr( $active_station['name'] ); ?>"
                        data-role="artwork-img"
                        class="vmplayer-compact__artwork-img"
                    />
                </div>

                <div class="vmplayer-compact__brand-text">
                    <span class="vmplayer-compact__brand-name" data-role="brand-name">
                        <?php echo esc_html( $active_station['name'] ); ?>
                    </span>
                    <span class="vmplayer-compact__brand-tagline" data-role="brand-tagline">
                        <?php echo esc_html( $active_station['tagline'] ); ?>
                    </span>
                    <?php $display_total = max( 1, (int) $total_stations ); ?>
                    <span
                        class="vmplayer__station-counter vmplayer-compact__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-compact__controls-top">
                <button
                    type="button"
                    class="vmplayer__btn vmplayer__btn--icon vmplayer-compact__prev"
                    data-role="prev"
                    aria-label="<?php esc_attr_e( 'Previous station', 'vmplayer' ); ?>"
                    <?php echo $single_station ? 'disabled aria-disabled="true"' : ''; ?>
                >
                    <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 4v16M20 4L8 12l12 8V4z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </button>

                <button
                    type="button"
                    class="vmplayer__btn vmplayer__play-toggle vmplayer-compact__play"
                    data-role="play-toggle"
                    data-state="paused"
                    aria-label="<?php esc_attr_e( 'Play', 'vmplayer' ); ?>"
                >
                    <svg class="vmplayer__icon-play" width="22" height="22" 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="22" height="22" 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__btn--icon vmplayer-compact__next"
                    data-role="next"
                    aria-label="<?php esc_attr_e( 'Next station', 'vmplayer' ); ?>"
                    <?php echo $single_station ? 'disabled aria-disabled="true"' : ''; ?>
                >
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <path d="M18 4v16M4 4l12 8-12 8V4z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </button>

                <button
                    type="button"
                    class="vmplayer__btn vmplayer__btn--icon vmplayer-compact__popout"
                    data-role="popout"
                    aria-label="<?php esc_attr_e( 'Open pop-out 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="M14 3h7v7M21 3l-9 9M5 5h4v2H7v10h10v-2h2v4H5V5z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
                    </svg>
                </button>

                <button
                    type="button"
                    class="vmplayer__btn vmplayer__btn--icon vmplayer-compact__kebab"
                    data-role="kebab"
                    aria-label="<?php esc_attr_e( 'More options', 'vmplayer' ); ?>"
                    aria-haspopup="true"
                    aria-expanded="false"
                >
                    <svg width="16" height="16" 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-compact__row vmplayer-compact__row--bottom">

            <div class="vmplayer-compact__status">
                <span class="vmplayer__onair vmplayer-compact__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>
            </div>

            <div class="vmplayer-compact__nowplaying">
                <span class="vmplayer-compact__nowplaying-label" data-role="nowplaying-label">
                    <?php esc_html_e( 'NOW PLAYING', 'vmplayer' ); ?>
                </span>
                <span class="vmplayer-compact__nowplaying-text" data-role="nowplaying-text">
                    <span data-role="track-title">&nbsp;</span>
                </span>
                <span class="vmplayer-compact__live-badge" data-role="live-badge" hidden>
                    <?php esc_html_e( 'LIVE', 'vmplayer' ); ?>
                </span>
            </div>

            <div class="vmplayer-compact__meta">
                <span
                    class="vmplayer-compact__listener-count"
                    data-role="listener-count"
                    hidden
                    aria-label="<?php esc_attr_e( 'Current listeners', 'vmplayer' ); ?>"
                >
                    <svg width="12" height="12" 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>

                <span class="vmplayer-compact__format" data-role="format-badge">
                    <span data-role="format-label">MP3</span>
                </span>

                <div class="vmplayer-compact__volume">
                    <button
                        type="button"
                        class="vmplayer__btn vmplayer__mute-toggle vmplayer-compact__mute"
                        data-role="mute-toggle"
                        aria-label="<?php esc_attr_e( 'Mute', 'vmplayer' ); ?>"
                    >
                        <svg class="vmplayer__icon-vol-on" width="16" height="16" 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="16" height="16" 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"
                        class="vmplayer__volume-slider vmplayer-compact__volume-slider"
                        data-role="volume-slider"
                        min="0"
                        max="100"
                        value="80"
                        step="1"
                        aria-label="<?php esc_attr_e( 'Volume', 'vmplayer' ); ?>"
                    />
                </div>
            </div>

        </div>

        <audio data-role="audio" preload="none"></audio>

    </div>
</div>
