@section('title', $albumData->name)

@section('head')
    {{-- dropzone antes das nossas, senão o .dropzone que ela injeta vence e
         a área das fotos volta a ter a borda e o fundo padrão dela --}}
    <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/sitealbums.css') }}">
@endsection

@php
    $breadcrumb = [
        ['label' => __('site.menu_item_3')],
        ['label' => __('site.menu_item_3_sub_3'), 'url' => route('site.album.r')],
        ['label' => $albumData->name],
    ];

    $album = $albumData;
@endphp

@include('includes/header-novo')

<main class="app-main">

    @include('includes.breadcrumb')

    <header class="page-head">
        <div>
            <h1 class="page-title">{{ $albumData->name }}</h1>
            <p class="page-sub">{{ trans_choice('site.page_album_photo_count', $allPhotos->total(), ['n' => $allPhotos->total()]) }}</p>
        </div>

        <div class="page-head__acts">
            <a class="btn btn--ghost" href="{{ route('site.album.r') }}">
                <i class="fa-solid fa-arrow-left"></i> {{ __('site.menu_item_3_sub_3') }}
            </a>
            <button class="btn btn--danger albdel" type="button">
                <i class="fa-solid fa-trash"></i> {{ __('site.page_album_remove') }}
            </button>
        </div>
    </header>

    @include('includes.flash')

    {{-- fotos ocupam a coluna larga, os ajustes do álbum ficam ao lado --}}
    <div class="albedit">

        <section class="sec photos"
                 data-album="{{ $albumData->id }}"
                 data-url-upload="{{ route('site.album.r.mediaUpload') }}"
                 data-url-ajax="{{ route('site.album.r.ajax') }}"
                 data-url-remove="{{ route('site.album.d.list') }}"
                 data-msg-delete-title="{{ __('site.page_album_photo_alert_title') }}"
                 data-msg-delete-text="{{ __('site.page_album_photo_alert_text') }}"
                 data-msg-delete-btn="{{ __('site.btn_remove') }}"
                 data-msg-delete-many-one="{{ __('site.page_album_photo_selected_one') }}"
                 data-msg-delete-many="{{ __('site.page_album_photo_selected') }}"
                 data-msg-album-title="{{ __('site.page_album_alert_title') }}"
                 data-msg-album-text="{{ __('site.page_album_alert_text') }}">

            <div class="sec__head photos__head">
                <h2 class="sec__title">
                    <i class="fa-solid fa-image"></i> {{ __('site.page_album_photos') }}
                    <span class="photos__count">{{ $allPhotos->total() }}</span>
                </h2>

                <div class="photos__tools">
                    <div class="photos__bulk" hidden>
                        <span class="photos__n"></span>
                        <button class="btn btn--danger btn--sm photos__del" type="button">
                            <i class="fa-solid fa-trash"></i> {{ __('site.btn_remove') }}
                        </button>
                    </div>

                    <button class="btn btn--primary albup" type="button">
                        <i class="fa-solid fa-cloud-arrow-up"></i> {{ __('site.page_album_upload') }}
                    </button>
                </div>
            </div>

            {{-- a área toda recebe arquivo arrastado, o botão acima é só o atalho --}}
            <form class="photos__body albdrop" action="{{ route('site.album.r.mediaUpload') }}">
                @if($allPhotos->count() == 0)
                    <div class="cempty cempty--flat">
                        <span class="apierr__ico"><i class="fa-solid fa-image"></i></span>
                        <p class="apierr__text">{{ __('site.page_album_photos_empty') }}</p>
                        <p class="albdrop__hint">{{ __('site.page_album_drop_here') }}</p>
                    </div>
                @else
                    <p class="lhint">
                        <i class="fa-solid fa-arrows-up-down-left-right"></i>
                        {{ __('site.page_album_photo_order_hint') }}
                        <span class="lhint__sep">&middot;</span>
                        {{ __('site.page_album_drop_anywhere') }}
                    </p>

                    <div class="photogrid">
                        @foreach($allPhotos as $photo)
                            <figure class="photo {{ $photo->star === '1' ? 'is-cover' : '' }}" data-id="{{ $photo->id }}">
                                <label class="photo__pick">
                                    <input type="checkbox" class="photo__box">
                                    <span class="pickmark"><i class="fa-solid fa-check"></i></span>
                                </label>

                                <img class="photo__img" src="https://{{ $serverData->name }}/contents{{ str_replace('.webp', '_t.jpg', $photo->img) }}" alt="" loading="lazy">

                                <span class="photo__badge"><i class="fa-solid fa-star"></i> {{ __('site.page_album_cover') }}</span>

                                <span class="photo__hover">
                                    <button class="photo__act photo__star" type="button" title="{{ __('site.page_album_set_cover') }}">
                                        <i class="fa-solid fa-star"></i>
                                    </button>
                                    <button class="photo__act photo__act--del photo__del" type="button" title="{{ __('site.btn_remove') }}">
                                        <i class="fa-solid fa-trash"></i>
                                    </button>
                                </span>

                                <figcaption class="photo__foot">
                                    <input class="photo__text" type="text" value="{{ $photo->description }}"
                                           maxlength="255" placeholder="{{ __('site.page_album_photo_caption') }}">
                                </figcaption>
                            </figure>
                        @endforeach
                    </div>
                @endif
            </form>

            @if($allPhotos->hasPages())
                <div class="photos__pages">{{ $allPhotos->links('vendor.pagination.painel') }}</div>
            @endif
        </section>

        <form class="albform" method="POST" action="{{ route('site.album.u.do', $albumData->id) }}" data-msg-saving="{{ __('site.configs_saving') }}">
            <section class="sec">
                <div class="sec__head">
                    <h2 class="sec__title"><i class="fa-solid fa-sliders"></i> {{ __('site.page_album_block') }}</h2>
                </div>

                <div class="sec__body">
                    @include('includes.album-form')
                </div>

                <div class="albform__foot">
                    <button class="btn btn--primary albform__submit" type="submit">
                        @include('includes.spinner')
                        <span class="btn__label">{{ __('general.action_save_changes') }}</span>
                    </button>
                </div>
            </section>
        </form>
    </div>

    <form class="albdel__form" method="POST" action="{{ route('site.album.d', $albumData->id) }}">@method('DELETE')</form>

</main>

@section('scripts')
    <script>
        var LNG_DROPHERE = @json(__('site.page_album_drop_here'));
        var LNG_CANCELUP = @json(__('site.site_file_cancel'));
        var LNG_CANCELEDUP = @json(__('site.site_file_canceled'));
        var LNG_REMOVE = @json(__('site.btn_remove'));
    </script>
    <script src="/assets/js/plugins/dropzone/min/dropzone.min.js"></script>
    <script src="{{ assetv('/assets/js/site-albums.js') }}"></script>
@endsection

@include('includes/footer-novo')