@section('title', __('site.page_top_title'))

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

@php
    $breadcrumb = [
        ['label' => __('site.menu_item_3')],
        ['label' => __('site.menu_item_3_sub_11')],
    ];

    $base = 'https://' . $serverData->name . '/contents/' . session('siteID') . '/top/';
@endphp

@include('includes/header-novo')

<main class="app-main">

    @include('includes.breadcrumb')

    <header class="page-head">
        <div>
            <h1 class="page-title">{{ __('site.page_top_h1') }}</h1>
            <p class="page-sub">{{ __('site.page_top_sub') }}</p>
        </div>
        <a class="btn btn--primary" href="{{ route('site.top-music.c') }}">
            <i class="fa-solid fa-plus"></i> {{ __('site.page_top_new_title') }}
        </a>
    </header>

    @include('includes.flash')

    <div class="tplist"
         data-url-order="{{ route('site.top-music.u.pos') }}"
         data-msg-delete-title="{{ __('site.page_top_alert_title') }}"
         data-msg-delete-text="{{ __('site.page_top_alert_text') }}"
         data-msg-delete-btn="{{ __('site.btn_remove') }}">

        <div class="ltools">
            <form class="ltools__search" method="GET" action="{{ route('site.top-music.r') }}">
                <i class="fa-solid fa-magnifying-glass"></i>
                <input class="input" type="text" name="s" value="{{ $s }}" autocomplete="off"
                       placeholder="{{ __('site.page_top_search') }}">
            </form>
        </div>

        @if($s)
            <div class="pfilter">
                <span>{{ __('site.search_results') }} <strong>{{ $s }}</strong></span>
                <a href="{{ route('site.top-music.r') }}" title="{{ __('site.page_post_search_clear') }}">
                    <i class="fa-solid fa-xmark"></i>
                </a>
            </div>
        @endif

        @if($apiError)
            <div class="apierr">
                <span class="apierr__ico"><i class="fa-solid fa-plug-circle-xmark"></i></span>
                <p class="apierr__text">{{ $apiError }}</p>
            </div>
        @elseif($allTops->count() == 0)
            <div class="cempty">
                <span class="apierr__ico"><i class="fa-solid fa-ranking-star"></i></span>
                <p class="apierr__text">{{ __('site.page_top_empty') }}</p>
            </div>
        @else
            @unless($s)
                <p class="lhint"><i class="fa-solid fa-arrows-up-down-left-right"></i> {{ __('site.page_top_order_hint') }}</p>
            @endunless

            <div class="tptable {{ $s ? 'is-locked' : '' }}">
                @foreach($allTops as $music)
                    <article class="tprow" data-id="{{ $music->id }}" data-name="{{ $music->name }}">
                        {{-- a posição é o dado principal de um top, então vem primeiro --}}
                        <span class="tprank">{{ $loop->iteration }}</span>

                        <span class="tpcover">
                            <img src="{{ str_starts_with($music->img, '/') ? $music->img : $base . $music->img }}"
                                 alt="" loading="lazy">
                            <i class="fa-solid fa-music tpcover__ph"></i>
                        </span>

                        <div class="tprow__text">
                            <strong class="tprow__name" title="{{ $music->name }}">{{ $music->name }}</strong>
                            <span class="tprow__artist" title="{{ $music->artist }}">{{ $music->artist }}</span>
                        </div>

                        <span class="tprow__acts">
                            @if($music->video)
                                <a class="pact pact--perm" href="https://www.youtube.com/watch?v={{ $music->video }}"
                                   target="_blank" rel="noopener" title="{{ __('site.page_top_watch') }}">
                                    <i class="fa-brands fa-youtube"></i>
                                </a>
                            @endif
                            <a class="pact pact--edit" href="{{ route('site.top-music.u', $music->id) }}" title="{{ __('site.action_edit') }}">
                                <i class="fa-solid fa-pen"></i>
                            </a>
                            <button class="pact pact--del tprow__del" type="button" title="{{ __('site.btn_remove') }}">
                                <i class="fa-solid fa-trash"></i>
                            </button>
                        </span>

                        <form class="tprow__form" method="POST" action="{{ route('site.top-music.d', $music->id) }}">@method('DELETE')</form>
                    </article>
                @endforeach
            </div>
        @endif
    </div>

</main>

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

@include('includes/footer-novo')