@section('title', $wgTitle)

@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' => $wgLabel],
    ];

    $wgUrl = 'https://' . $siteServer->name . '/widget/' . $wgSlug . '/' . $siteData->id;
    $wgRatio = $wgRatio ?? null;

    /**
     * Video nao aceita altura fixa: numa coluna estreita a imagem estica. Quando
     * o widget tem proporcao, o codigo sai com a caixa que a segura e o iframe
     * preenche a caixa. A previa usa a mesma medida, entao o cliente ve na tela
     * exatamente o que vai colar.
     */
    $wgEmbed = $wgRatio
        ? '<div style="position:relative;padding-bottom:' . $wgRatio . '%;height:0;overflow:hidden;border-radius:20px;">'
            . '<iframe src="' . $wgUrl . '" style="position:absolute;top:0;left:0;width:100%;height:100%;"'
            . ' border="0" frameborder="0" allow="autoplay; clipboard-write" allowtransparency="true"></iframe></div>'
        : '<iframe src="' . $wgUrl . '" style="width:100%;height:' . $wgHeight . 'px;border-radius:20px;"'
            . ' border="0" frameborder="0" allow="autoplay; clipboard-write" allowtransparency="true"></iframe>';
@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 {{ $wgIcon }}"></i> {{ $wgLabel }}</h2>
                    <p class="sec__desc">{{ $wgSub }}</p>
                </div>

                <div class="sec__body">
                    <div class="wgdemo {{ $wgRatio ? 'wgdemo--ratio' : '' }}"
                         style="{{ $wgRatio ? 'aspect-ratio: 100 / ' . $wgRatio : '' }}">
                        <iframe src="{{ $wgUrl }}" style="{{ $wgRatio ? '' : 'height: ' . $wgHeight . 'px' }}"
                                loading="lazy" title="{{ __('general.widgets_preview') }}"
                                allow="autoplay; clipboard-write" allowtransparency="true"></iframe>
                    </div>

                    <div class="wgbar">
                        <p class="wgbar__text">{{ __('general.widgets_embed_bar') }}</p>

                        {{-- o trecho ja vem pronto: o widget com proporcao usa caixa propria --}}
                        <button class="btn btn--primary wgbar__act" type="button"
                                data-model
                                data-name="{{ $wgLabel }}"
                                data-url="{{ $wgUrl }}"
                                data-mode="iframe"
                                data-width="100%"
                                data-height="{{ $wgRatio ? 340 : $wgHeight }}"
                                data-code="{{ $wgEmbed }}">
                            <i class="fa-solid fa-code"></i> {{ __('general.widgets_generate_code') }}
                        </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')