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

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

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

@include('includes/header-novo')

<main class="app-main">

    @include('includes.breadcrumb')

    @include('includes.flash')

    <header class="page-head">
        <div>
            <h1 class="page-title">{{ __('site.page_media_h1') }}</h1>
        </div>
        <button class="btn btn--primary med__toggle" type="button">
            <i class="fa-solid fa-cloud-arrow-up"></i> {{ __('site.page_media_upload_open') }}
        </button>
    </header>

    <div class="med"
         data-url-upload="{{ route('site.posts.r.mediaUpload') }}"
         data-url-remove="{{ route('site.posts.d.mediaRemoveM') }}"
         data-msg-selected-one="{{ trans_choice('site.page_media_selected', 1, ['n' => '%n%']) }}"
         data-msg-selected-many="{{ trans_choice('site.page_media_selected', 2, ['n' => '%n%']) }}"
         data-msg-delete-title="{{ __('site.page_media_alert_title_1') }}"
         data-msg-delete-text="{{ __('site.confirm_delete_text') }}"
         data-msg-delete-btn="{{ __('site.btn_remove') }}"
         data-msg-bulk-title="{{ __('site.page_media_alert_title_2') }}"
         data-msg-bulk-ask="{{ __('site.confirm_type_word', ['word' => __('site.page_post_bulk_word')]) }}"
         data-msg-none-selected="{{ __('site.page_media_none_selected') }}"
         data-msg-copied="{{ __('site.page_media_copied') }}"
         data-msg-removed="{{ __('site.page_media_removed') }}"
         data-msg-error="{{ __('site.page_media_remove_error') }}"
         data-word="{{ __('site.page_post_bulk_word') }}"
         data-drop="{{ __('site.site_file_upload') }}"
         data-drop-hint="{{ __('site.site_file_upload_2') }}"
         data-remove="{{ __('site.btn_remove') }}">

        <section class="sec med__upload" hidden>
            <div class="sec__head">
                <h2 class="sec__title"><i class="fa-solid fa-cloud-arrow-up"></i> {{ __('site.page_media_block_1') }}</h2>
            </div>
            <div class="sec__body">
                <div class="dropzone"></div>
                <p class="med__hint">{{ __('site.page_integration_img_size') }}</p>
            </div>
        </section>

        @if($allMedia->count())
            <div class="med__bar">
                <span class="med__count">{{ __('site.page_media_none_selected') }}</span>
                <div class="med__acts">
                    <button class="btn btn--ghost med__all" type="button"
                            data-msg-all="{{ __('site.page_media_select_all') }}"
                            data-msg-none="{{ __('site.page_media_block_btn_1') }}">
                        <i class="fa-solid fa-check-double"></i> <span class="med__all-label">{{ __('site.page_media_select_all') }}</span>
                    </button>
                    <button class="btn btn--danger med__remove" type="button" hidden>
                        <i class="fa-solid fa-trash"></i> {{ __('site.page_media_block_btn_2') }}
                    </button>
                </div>
            </div>
        @endif

        @if(!$allMedia->count())
            <div class="med__empty">
                <span class="apierr__ico"><i class="fa-solid fa-folder-open"></i></span>
                <p class="apierr__text">{{ __('site.page_media_no_record') }}</p>
            </div>
        @else
            <div class="med__grid">
                @foreach($allMedia as $media)
                    @php $url = 'https://' . $serverData->name . '/contents' . $media->source; @endphp
                    <figure class="mcard" data-id="{{ $media->id }}" data-url="{{ $url }}">
                        <button class="mcard__pick" type="button" title="{{ basename($media->source) }}">
                            <img src="{{ $url }}" alt="" loading="lazy">
                            <span class="mcard__mark"><i class="fa-solid fa-check"></i></span>
                        </button>

                        <figcaption class="mcard__foot">
                            <span class="mcard__name">{{ basename($media->source) }}</span>
                            <span class="mcard__acts">
                                <button class="mact mcard__zoom" type="button" title="{{ __('site.page_media_zoom') }}">
                                    <i class="fa-solid fa-magnifying-glass-plus"></i>
                                </button>
                                <button class="mact mcard__copy" type="button" title="{{ __('site.page_media_copy') }}">
                                    <i class="fa-solid fa-link"></i>
                                </button>
                                <button class="mact mact--del mcard__del" type="button" title="{{ __('site.btn_remove') }}">
                                    <i class="fa-solid fa-trash"></i>
                                </button>
                            </span>
                        </figcaption>
                    </figure>
                @endforeach
            </div>

            {{ $allMedia->links('vendor.pagination.painel') }}
        @endif

        <div class="mlight" hidden>
            <div class="mlight__stage">
                <img class="mlight__img" src="" alt="">
            </div>

            <div class="mlight__foot">
                <span class="mlight__name"></span>
                <span class="mlight__pos"></span>
            </div>

            <button class="mlight__close" type="button" aria-label="{{ __('site.page_media_close') }}">
                <i class="fa-solid fa-xmark"></i>
            </button>

            <button class="mlight__nav mlight__nav--prev" type="button" aria-label="{{ __('site.page_media_prev') }}">
                <i class="fa-solid fa-chevron-left"></i>
            </button>

            <button class="mlight__nav mlight__nav--next" type="button" aria-label="{{ __('site.page_media_next') }}">
                <i class="fa-solid fa-chevron-right"></i>
            </button>
        </div>
    </div>

</main>

@section('scripts')
    <script>
        // the bundled dropzone build reads these as its own defaults, so they
        // have to exist before the script is evaluated
        var LNG_DROPHERE = '{{ __('site.site_file_upload') }}<br><small>({{ __('site.site_file_upload_2') }})</small>';
        var LNG_CANCELUP = '{{ __('site.site_file_cancel') }}';
        var LNG_CANCELEDUP = '{{ __('site.site_file_canceled') }}';
        var LNG_REMOVE = '{{ __('site.btn_remove') }}';
    </script>
    <script src="/assets/js/plugins/dropzone/min/dropzone.min.js"></script>
    <script src="{{ assetv('/assets/js/site-media.js') }}"></script>
@endsection

@include('includes/footer-novo')