<?php
    if($station->contentplayer == ""){
        ?>
            <style>
                .staticpage{
                    background: linear-gradient(45deg, #3849a8, #f7b835);
                    padding: 22px 35px 10px 35px;
                    display: block;
                    z-index: 1;
                    position: absolute;
                    height: calc(100vh - 312px);
                    color: white;
                    text-align: center;
                    width: 100%;
                    max-width: 450px;
                    left: 50%;
                    transform: translateX(-50%);
                }
                .staticpage > .logo{
                    width: 200px;
                    border-radius: 15px;
                    margin-bottom: 20px;
                }
                .staticpage > p{
                    margin: 0;
                }
                .staticpage > p.titleRadio{
                    font-weight: 600;
                }
            </style>
            <div class="staticpage">
                <img src="<?php echo $station->logo; ?>" class="logo" alt="logo radio">
                <p class="titleRadio"><?php echo $station->name; ?></p>
                <p class="subtitleRadio"><?php echo $station->slogan; ?></p>
            </div>
        <?php
    }else{
        ?>
            <iframe src="<?php echo $station->contentplayer; ?>" class="contentplayer" frameborder="0"></iframe>
        <?php
    }
?>

<div class="footer_player" <?php if($is_mobile){ ?> style="bottom: 84px;" <? } ?>>
    <div class="row align-items-center">
        <div class="col-2" style="width: 70px;">
            <img src="<?php echo $station->logo; ?>" alt="<?php echo $station->name; ?>" style="width: 60px;">
        </div>
        <div class="col">
            <div id="artist" style="font-weight: 700; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;"><?php echo $station->name; ?></div>
            <div id="playerStatus" style="text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical ;overflow: hidden;"><?php echo $station->slogan; ?></div>
        </div>
        <div class="col-2" style="text-align: center; margin-top: 1px; margin-right: 5px; width: 67px;">
            <button id="playPauseBtn" data-stream-hls="<?php echo $station->streamhls; ?>" data-stream-fallback="<?php echo $station->stream; ?>" data-station-name="<?php echo htmlspecialchars($station->name); ?>" data-station-logo="<?php echo $station->logo; ?>" data-station-slogan="<?php echo htmlspecialchars($station->slogan); ?>">
                <i class="material-icons play-icon" id="play-pause" style="font-size: 35px; border-radius: 10px; border: 2px solid #ffffff; padding: 4px 5px 4px 4px; margin-top: -2px; background: #f7b835; color: #2a377e;">play_arrow</i>
                <i class="material-icons pause-icon" id="play-pause" style="display:none; font-size: 35px; border-radius: 10px; border: 2px solid #ffffff; padding: 4px 5px 4px 4px; margin-top: -2px; background: #f7b835; color: #2a377e;">pause</i>
            </button>
        </div>
    </div>
</div>

<audio id="hlsAudioPlayer" preload="none"></audio>