{% if selectedIds is not defined %}
    {% set selectedIds = [] %}
{% endif %}


{# Handle original ids param which is from the initial page load #}
{% if not sprig.isRequest %}
    {% set selectedIds = _originalIds %}
{% endif %}


{# Grab the ids from parent context #}
{% if selectedIds[_fieldHandle] is defined and selectedIds[_fieldHandle] is not empty %}
    {% set selectedIds = selectedIds[_fieldHandle] %}
{% endif %}


{# Convert to array #}
{% if selectedIds is not iterable %}
    {% set selectedIds = selectedIds|split(',') %}
{% endif %}


{# Filter out duplicates and empties #}
{% set selectedIds = selectedIds|filter|unique %}


{# Process the removed ID if there is one #}
{% if removedId is defined %}
    {% set selectedIds = selectedIds|filter((v, k) => v != removedId) %}
{% endif %}


{# Run the queries for the actual display of the index #}
{% set page = page ?? 1 %}
{% set sort = sort ?? 'dateCreated desc' %}
{% set query = query ?? '' %}

{% set assetsQuery = craft.assets
    .limit(12)
    .search(query)
    .orderBy(sort)
    .folderId(_folderId)
%}

{% set pageInfo = sprig.paginate(assetsQuery, page) %}
{% set vendorAssets = pageInfo.pageResults %}


{# Panel middle #}
<div id="field-{{ _fieldId }}-assets-index-container"
     class="flex-1 overflow-y-auto py-6 px-4 sm:px-6"
>
    {# Search and filters #}
    <div class="grid grid-cols-3 sm:grid-cols-4 gap-4 mb-4">
        {# Search #}
        <div class="col-span-2 sm:col-span-3">
            <label for="query" class="block text-sm font-medium text-gray-700">Search</label>
            <div class="mt-1 relative rounded-md shadow-sm">
                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                    {# Heroicon name: search #}
                    <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                        <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
                    </svg>
                </div>
                <input sprig
                       s-trigger="keyup changed delay:250ms"
                       s-replace="#field-{{ _fieldId }}-assets-index-results"
                       s-val:selected-ids="{{ selectedIds|join(',') }}"
                       x-ref="searchInput"
                       type="text" name="query" id="query"
                       class="block w-full pl-10 sm:text-sm border border-gray-300 focus:border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-action-500"
                       placeholder="Search files"
                       value="{{ query }}"
                >
            </div>
        </div>

        {# Sort #}
        <div class="col-span-1">
            <label for="sort" class="block text-sm font-medium text-gray-700">Sort</label>
            <select sprig
                    id="sort"
                    name="sort"
                    class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-action-500 sm:text-sm rounded-md"
            >
                <option value="title asc" {{ sort == 'title asc' ? 'selected' }}>A-Z</option>
                <option value="title desc" {{ sort == 'title desc' ? 'selected' }}>Z-A</option>
                <option value="dateCreated desc" {{ sort == 'dateCreated desc' ? 'selected' }}>Date Created (↓)</option>
                <option value="dateCreated asc" {{ sort == 'dateCreated asc' ? 'selected' }}>Date Created (↑)</option>
                <option value="dateUpdated desc" {{ sort == 'dateUpdated desc' ? 'selected' }}>Date Updated (↓)</option>
                <option value="dateUpdated asc" {{ sort == 'dateUpdated asc' ? 'selected' }}>Date Updated (↑)</option>
            </select>
        </div>
    </div>

    {# Results #}
    <div id="field-{{ _fieldId }}-assets-index-results">
        {% if vendorAssets %}
            {# Results list #}
            <ul class="grid gap-4 grid-cols-3 sm:grid-cols-4">
                {% for vendorAsset in vendorAssets %}

                    <li class="col-span-1 flex flex-col">
                        <label for="field-{{ _fieldId }}-assets-index-{{ vendorAsset.id }}-checkbox"
                               class="relative cursor-pointer bg-white rounded-md overflow-hidden shadow hover:bg-gray-50{{ selectedIds|length == _fieldLimit and vendorAsset.id not in selectedIds ? ' opacity-20' }}"
                        >

                            {# Image #}
                            <div class="flex-1 flex flex-col">
                                <div class="aspect-w-1 aspect-h-1 relative">
                                    {% if vendorAsset.kind == 'image' %}
                                        <img class="object-cover" src="{{ vendorAsset.url({ width: 500, height: 500 }) }}" alt="{{ vendorAsset.title }}">
                                    {% else %}
                                        <div class="object-cover">
                                            <svg class="text-gray-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
                                            </svg>
                                            <div class="absolute top-1/2 right-1/2 h-7 w-12 -mt-3.5 -mr-6 text-gray-400 text-lg font-bold text-center">{{ vendorAsset.extension|upper }}</div>
                                        </div>
                                    {% endif %}
                                </div>
                            </div>

                            {# Checkbox and title #}
                            <div class="flex-1 flex flex-col p-2 border-t">
                                <div class="flex items-start">
                                    <div class="h-5 flex items-center">
                                        <input sprig
                                               id="field-{{ _fieldId }}-assets-index-{{ vendorAsset.id }}-checkbox"
                                               type="checkbox"
                                               value="{{ vendorAsset.id }}"
                                               x-on:htmx:before-request="trackScroll"
                                               s-val:page="{{ page }}"
                                               s-val:sort="{{ sort }}"
                                               s-val:query="{{ query }}"
                                               {% if vendorAsset.id in selectedIds %}
                                                   checked
                                                   s-val:selected-ids="{{ selectedIds|filter(v => v != vendorAsset.id)|join(',') }}"
                                               {% else %}
                                                   s-val:selected-ids="{{ selectedIds|push(vendorAsset.id)|join(',') }}"
                                               {% endif %}
                                               {% if selectedIds|length == _fieldLimit and vendorAsset.id not in selectedIds %}
                                                   disabled
                                               {% endif %}
                                               class="asset-toggle focus:ring-action-500 h-4 w-4 text-action-600 border-gray-300 rounded"
                                        >
                                    </div>
                                    <div class="ml-3 text-sm truncate">
                                        <span class="font-medium text-gray-700">{{ vendorAsset.title }}</span>
                                    </div>
                                </div>
                            </div>
                        </label>
                    </li>
                {% endfor %}
            </ul>

            {# Pagination #}
            {% include '_market/_includes/pagination' with {
                vals: {
                    'selected-ids': selectedIds|join(',')
                },
                itemType: 'files'
            } %}
        {% elseif query %}
            {# No results #}
            <div class="rounded-md shadow-md bg-red-100 border border-red-300 p-4">
                <div class="flex">
                    <div class="flex-shrink-0">
                        {# Heroicon name: emoji-sad #}
                        <svg class="h-5 w-5 text-red-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zm-7.536 5.879a1 1 0 001.415 0 3 3 0 014.242 0 1 1 0 001.415-1.415 5 5 0 00-7.072 0 1 1 0 000 1.415z" clip-rule="evenodd" />
                        </svg>
                    </div>
                    <div class="ml-3">
                        <h3 class="text-sm font-medium text-red-800">
                            Oh no!
                        </h3>
                        <div class="mt-2 text-sm text-red-700 space-y-2">
                            <p>We couldn’t find anything for <strong>“{{ query }}”</strong>, try being less specific or using different keywords.</p>
                        </div>
                        <div class="mt-4">
                            <div class="-mx-2 -my-1.5 flex">
                                <button sprig
                                        s-val:query=""
                                        s-val:selected-ids="{{ selectedIds|join(',') }}"
                                        type="button"
                                        class="bg-red-100 px-2 py-1.5 rounded-md text-sm font-medium text-red-800 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-red-100 focus:ring-red-600"
                                >
                                    Reset search
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% else %}
            {# No assets at all yet #}
            <div class="rounded-md shadow-md bg-orange-100 border border-orange-300 p-4">
                <div class="flex">
                    <div class="flex-shrink-0">
                        {# Heroicon name: light-bulb #}
                        <svg class="h-5 w-5 text-orange-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                            <path d="M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954 0c.27.213.462.519.476.859h4.002z" />
                        </svg>
                    </div>
                    <div class="ml-3">
                        <h3 class="text-sm font-medium text-orange-800">
                            Nothing here …
                        </h3>
                        <div class="mt-2 text-sm text-orange-700 space-y-2">
                            <p>You don’t have any files yet, go ahead and upload some using the button below.</p>
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}
    </div>
</div>

{# Panel footer #}
<div class="flex-none h-48 border-t">
    <div class="flex justify-between py-6 px-4 sm:px-6">

        {# Left half #}
        <div id="field-{{ _fieldId }}-uploader"
             hx-post="{{ actionUrl('assets/upload') }}"
             hx-trigger="change"
             hx-encoding="multipart/form-data"
             class="flex flex-grow justify-start"
             x-on:htmx:before-request="uploading = true"
             x-on:htmx:before-on-load="uploaderOnLoad"
             x-on:htmx:xhr:progress="uploaderOnProgress"
        >

            {{ csrfInput() }}
            {{ hiddenInput('folderId', _folderId) }}

            <div>
                <label for="field-{{ _fieldId }}-uploader-input"
                       class="cursor-pointer inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-action-600 hover:bg-action-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-action-500"
                >
                    <span x-show="uploading" class="h-3">
                        <svg class="animate-spin -ml-1 -mt-1 mr-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                            <path class="opacity-25" stroke="currentColor" stroke-width="3" d="M10,1.5 C12.3472102,1.5 14.4722102,2.45139491 16.0104076,3.98959236 C17.5486051,5.52778981 18.5,7.65278981 18.5,10 C18.5,12.3472102 17.5486051,14.4722102 16.0104076,16.0104076 C14.4722102,17.5486051 12.3472102,18.5 10,18.5 C7.65278981,18.5 5.52778981,17.5486051 3.98959236,16.0104076 C2.45139491,14.4722102 1.5,12.3472102 1.5,10 C1.5,7.65278981 2.45139491,5.52778981 3.98959236,3.98959236 C5.52778981,2.45139491 7.65278981,1.5 10,1.5 Z"></path>
                            <path class="opacity-75" fill="currentColor" d="M5.04093691,14.9404144 C3.77966158,13.6744079 3,11.9282538 3,10 C3,6.13400675 6.13400675,3 10,3 L10,-6.03961325e-14 C4.4771525,-6.03961325e-14 0,4.4771525 0,10 C0,12.721285 1.08698573,15.1886909 2.85045872,16.9917192 L5.04093691,14.9404144 L5.04093691,14.9404144 Z"></path>
                        </svg>
                    </span>

                    {# Heroicon name: plus #}
                    <svg x-show="!uploading" class="-ml-1 mr-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
                    </svg>
                    <span>{{ 'Upload'|t('market') }}</span>
                    <input id="field-{{ _fieldId }}-uploader-input" type="file" name="assets-upload" class="sr-only">
                </label>
            </div>

            <div class="flex-1 ml-4 h-full items-center flex">
                <div class="htmx-indicator h-3 relative w-full rounded-full overflow-hidden">
                    <div class="w-full h-full bg-gray-200 absolute"></div>
                    <div id="field-{{ _fieldId }}-uploader-progress" class="h-full bg-action-500 relative w-0"></div>
                </div>
            </div>
        </div>

        {# Right half #}
        <div>
            <button x-on:click.prevent="open = false"
                    type="button"
                    class="ml-4 bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-action-500"
            >
                Cancel
            </button>
            <button sprig
                    s-val:selected-ids="{{ selectedIds|join(',') }}"
                    s-swap="none"
                    x-on:htmx:after-request="onSave('{{ selectedIds|join(',') }}')"
                    id="field-{{ _fieldId }}-assets-index-save"
                    type="button"
                    class="inline-flex items-center ml-4 py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-action-600 hover:bg-action-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-action-500"
            >
                <span class="htmx-indicator h-3">
                    <svg class="animate-spin -ml-1 -mt-1 mr-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                        <path class="opacity-25" stroke="currentColor" stroke-width="3" d="M10,1.5 C12.3472102,1.5 14.4722102,2.45139491 16.0104076,3.98959236 C17.5486051,5.52778981 18.5,7.65278981 18.5,10 C18.5,12.3472102 17.5486051,14.4722102 16.0104076,16.0104076 C14.4722102,17.5486051 12.3472102,18.5 10,18.5 C7.65278981,18.5 5.52778981,17.5486051 3.98959236,16.0104076 C2.45139491,14.4722102 1.5,12.3472102 1.5,10 C1.5,7.65278981 2.45139491,5.52778981 3.98959236,3.98959236 C5.52778981,2.45139491 7.65278981,1.5 10,1.5 Z"></path>
                        <path class="opacity-75" fill="currentColor" d="M5.04093691,14.9404144 C3.77966158,13.6744079 3,11.9282538 3,10 C3,6.13400675 6.13400675,3 10,3 L10,-6.03961325e-14 C4.4771525,-6.03961325e-14 0,4.4771525 0,10 C0,12.721285 1.08698573,15.1886909 2.85045872,16.9917192 L5.04093691,14.9404144 L5.04093691,14.9404144 Z"></path>
                    </svg>
                </span>
                Save
            </button>
        </div>
    </div>
</div>