@section('title', __('general.header_web_players_title'))

@section('head')
    <link rel="stylesheet" href="{{ assetv('/assets/css/pages/siteconfig.css') }}">
    <link rel="stylesheet" href="{{ assetv('/assets/css/pages/radioplayers.css') }}">
    <link rel="stylesheet" href="{{ assetv('/assets/css/pages/radiowidgets.css') }}">
@endsection

@php
    $breadcrumb = [
        ['label' => __('general.header_nav_web')],
        ['label' => __('general.header_web_players_title'), 'url' => route('radio.widgets.r')],
        ['label' => __('general.widgets_players_box')],
    ];

    $hash = str_replace('/', 'brascsep', EncryptBras($siteData->stream_port));

    /* o box ocupa a caixa que o site der; 420 e a altura de referencia */
    $boxUrl = rtrim(config('app.url'), '/') . '/player/box/' . $hash;
@endphp

@include('includes/header-novo')

<main class="app-main">

    @include('includes.breadcrumb')

    @include('includes.flash')

    <header class="page-head">
        <div>
            <h1 class="page-title">{{ __('general.header_web_players_title') }}</h1>
            <p class="page-sub">{{ __('general.widgets_page_sub') }}</p>
        </div>
    </header>

    <div class="wglayout"
         data-player-cards
         data-msg-copied="{{ __('general.action_copied') }}"
         data-msg-copy-error="{{ __('general.widgets_copy_error') }}"
         data-popup-label="{{ __('radio.players_popup_link') }}">

        @include('widgets.side')

        <div>
            <section class="sec">
                <div class="sec__head">
                    <h2 class="sec__title"><i class="fa-solid fa-tv"></i> {{ __('general.widgets_players_box') }}</h2>
                    <p class="sec__desc">{{ __('general.widgets_box_sub') }}</p>
                </div>

                <div class="sec__body">
                    <div class="wggrid wggrid--wide">
                        <button class="wgcard wgcard--wide" type="button"
                                data-model
                                data-name="{{ __('general.widgets_players_box') }}"
                                data-url="{{ $boxUrl }}"
                                data-mode="iframe"
                                data-width="100%"
                                data-height="420"
                                data-auto="1"
                                data-volume="1">
                            <span class="wgcard__shot">
                                <img src="/players/stylebox.png" alt="{{ __('general.widgets_players_box') }}" loading="lazy">
                            </span>

                            <span class="wgcard__foot">
                                <span>
                                    <span class="wgcard__name">{{ __('general.widgets_players_box') }}</span>
                                    <span class="wgcard__size">{{ __('radio.players_size_responsive') }}</span>
                                </span>

                                <span class="wgcard__cta">
                                    <i class="fa-solid fa-code"></i> {{ __('general.widgets_generate_code') }}
                                </span>
                            </span>
                        </button>
                    </div>
                </div>
            </section>
        </div>

    </div>

    @include('includes.player-code-modal')

</main>

@section('scripts')
    <script src="{{ assetv('/assets/js/pages/radio-players.js') }}"></script>
@endsection

@include('includes/footer-novo')