@section('title', __('general.page_widget_mini_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_mini')],
    ];

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

    /* Cada mini tem tamanho proprio: sem a medida no codigo o player estica e desmonta */
    $models = collect([
        ['n' => '01', 'w' => 450, 'h' => 90],
        ['n' => '02', 'w' => 378, 'h' => 60],
        ['n' => '03', 'w' => 248, 'h' => 164, 'radius' => 5],
    ])->map(function ($model) use ($hash) {
        return [
            'label' => __('general.widgets_model_n', ['number' => $model['n']]),
            'size' => __('general.widgets_size', ['w' => $model['w'], 'h' => $model['h']]),
            'img' => '/players/style-mini' . $model['n'] . '.png',
            'url' => rtrim(config('app.url'), '/') . '/player-mini/' . $model['n'] . '/' . $hash,
            'width' => $model['w'],
            'height' => $model['h'],
            'radius' => $model['radius'] ?? null,
        ];
    });
@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-object-ungroup"></i> {{ __('general.widgets_players_mini') }}</h2>
                    <p class="sec__desc">{{ __('general.widgets_mini_sub') }}</p>
                </div>

                <div class="sec__body">
                    <div class="wggrid wggrid--mini">
                        @foreach($models as $model)
                            <button class="wgcard wgcard--mini" type="button"
                                    data-model
                                    data-name="{{ $model['label'] }}"
                                    data-url="{{ $model['url'] }}"
                                    data-mode="iframe"
                                    data-width="{{ $model['width'] }}"
                                    data-height="{{ $model['height'] }}"
                                    data-radius="{{ $model['radius'] }}"
                                    data-auto="1"
                                    data-volume="1">
                                <span class="wgcard__shot">
                                    <img src="{{ $model['img'] }}" alt="{{ $model['label'] }}" loading="lazy">
                                </span>

                                <span class="wgcard__foot">
                                    <span>
                                        <span class="wgcard__name">{{ $model['label'] }}</span>
                                        <span class="wgcard__size">{{ $model['size'] }}</span>
                                    </span>

                                    <span class="wgcard__cta">
                                        <i class="fa-solid fa-code"></i> {{ __('general.widgets_generate_code') }}
                                    </span>
                                </span>
                            </button>
                        @endforeach
                    </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')