@php
/**
 * Shared media-library picker modal. Emitted ONCE per page by media_field_html()
 * (the first field renders it; the rest reuse it). Every [data-media-field] on the
 * page opens this one dialog. assets/js/qm-media-picker.js owns the behaviour;
 * the endpoint (tenant vs admin scope) is carried on data-media-endpoint.
 *
 * @var string $endpoint  list/upload/delete base, e.g. '/vendor/media' or '/admin/media'
 */
$endpoint = $endpoint ?? '/vendor/media';
$isAdmin  = str_starts_with($endpoint, '/admin');
@endphp
<div class="qm-media-modal" id="qm-media-modal" data-media-modal data-media-endpoint="{{ $endpoint }}" hidden aria-hidden="true">
    <div class="qm-media-modal-backdrop" data-media-close></div>
    <div class="qm-media-modal-box" role="dialog" aria-modal="true" aria-label="{{ t_raw('media.title') }}">
        <div class="qm-media-modal-head">
            <h2 class="qm-media-modal-title"><i class="fas fa-photo-video" aria-hidden="true"></i> {{ t_raw('media.title') }}</h2>
            <button type="button" class="qm-media-modal-close" data-media-close aria-label="{{ t_raw('media.close') }}"><i class="fas fa-times" aria-hidden="true"></i></button>
        </div>
        <div class="qm-media-tabs" role="tablist" aria-label="{{ t_raw('media.title') }}">
            <button type="button" class="qm-media-tab is-active" data-media-tab="library" role="tab" aria-selected="true"><i class="fas fa-th" aria-hidden="true"></i> {{ t_raw('media.tab_library') }}</button>
            <button type="button" class="qm-media-tab" data-media-tab="upload" role="tab" aria-selected="false"><i class="fas fa-cloud-upload-alt" aria-hidden="true"></i> {{ t_raw('media.tab_upload') }}</button>
        </div>

        <div class="qm-media-pane is-active" data-media-pane="library" role="tabpanel">
            <div class="qm-media-toolbar">
                <div class="qm-media-search-wrap">
                    <i class="fas fa-search" aria-hidden="true"></i>
                    <input type="search" class="form-control qm-media-search" data-media-search placeholder="{{ t_raw('media.search_placeholder') }}" aria-label="{{ t_raw('media.search_placeholder') }}">
                </div>
                <div class="qm-media-filters" data-media-kind-filter role="group">
                    <button type="button" class="qm-media-chip is-active" data-kind="">{{ t_raw('media.filter_all') }}</button>
                    <button type="button" class="qm-media-chip" data-kind="image">{{ t_raw('media.filter_images') }}</button>
                    <button type="button" class="qm-media-chip" data-kind="video">{{ t_raw('media.filter_videos') }}</button>
                </div>
            </div>
            <div class="qm-media-grid" data-media-grid aria-busy="false"></div>
            <div class="qm-media-more" data-media-more hidden>
                <button type="button" class="qm-btn qm-btn-outline" data-media-more-btn>{{ t_raw('media.load_more') }}</button>
            </div>
            <p class="qm-media-state" data-media-state hidden></p>
            @php // Multi-select footer: tick several tiles, then add them in one go. Hidden unless the
                  // field that opened the modal declared data-multi.
@endphp
            <div class="qm-media-addbar" data-media-addbar hidden>
                <button type="button" class="qm-btn" data-media-add disabled>{{ t_raw('media.add_selected', [':n' => 0]) }}</button>
            </div>
        </div>

        <div class="qm-media-pane" data-media-pane="upload" role="tabpanel">
            <label class="qm-media-drop" data-media-drop>
                <input type="file" data-media-file hidden>
                <i class="fas fa-cloud-upload-alt qm-media-drop-icon" aria-hidden="true"></i>
                <span class="qm-media-drop-text">{{ t_raw('media.drop_here') }} <span class="qm-media-drop-browse">{{ t_raw('media.browse') }}</span></span>
            </label>
            <div class="qm-media-progress" data-media-progress hidden>
                <span class="qm-media-spinner" aria-hidden="true"></span> <span data-media-progress-text>{{ t_raw('media.uploading') }}</span>
            </div>
        </div>
    </div>
</div>