{% set currentVendor = market.vendors.getCurrentVendor() %}
{% set page = page ?? 1 %}
{% set sort = sort ?? 'dateCreated desc' %}
{% set limit = limit ?? 36 %}
{% if limit > 60 %}{% set limit = 60 %}{% endif %}
{% set query = query ?? '' %}

{% set folder = folder ?? 'main' %}
{% set folderId = currentVendor.filesFolderId %}
{% if folder == 'account' %}{% set folderId = currentVendor.accountFolderId %}{% endif %}

{% set urlParams = '?page='~page~'&limit='~limit~'&sort='~sort~'&folder='~folder~'&query='~query %}

{% do sprig.pushUrl(urlParams) %}

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

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

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

{% if selectedIds is defined and selectedIds is not iterable %}
    {% set selectedIds = selectedIds|split(',') %}
{% endif %}

{% set selectedIds = selectedIds|filter|unique %}

{% if successfulNotice is defined %}
    {% do craft.app.session.setNotice(successfulNotice) %}
    {% do sprig.redirect('/market/files'~urlParams) %}
{% endif %}

{# Header #}
<div x-data="Market.assetIndex()" id="files-index-header" class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
    <div class="lg:flex lg:items-center lg:justify-between mb-4">
        <div class="min-w-0">
            <h1 class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">
                {{ 'Files'|t('market') }}
            </h1>
        </div>

        {# Upload bar #}
        <div x-show="uploading" class="mt-5 flex-1 w-full lg:mt-0 lg:mx-8 h-full items-center flex">
            <div class="h-3 relative w-full rounded-full overflow-hidden">
                <div class="w-full h-full bg-gray-200 absolute"></div>
                <div id="file-uploader-progress" class="h-full bg-action-500 relative w-0"></div>
            </div>
        </div>

        {# Actions #}
        <div class="mt-5 flex lg:mt-0 lg:ml-4">

            {# Delete selected files #}
            {% if selectedIds %}
                <button sprig
                        s-action="market/files/delete-files"
                        s-method="post"
                        s-val:file-ids="{{ selectedIds|join(',') }}"
                        s-val:selected-ids=""
                        {% if selectedIds|length == 1 %}
                            s-confirm="Are you sure you want to delete this file?"
                            s-val:successful-notice="File deleted."
                        {% else %}
                            s-confirm="Are you sure you want to delete {{ selectedIds|length }} files?"
                            s-val:successful-notice="{{ selectedIds|length }} files deleted."
                        {% endif %}
                        x-on:htmx:before-request="deleting = true"
                        x-on:htmx:after-request="deleting = false"
                        :disabled="deleting"
                        type="button"
                        class="mr-4 inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-red-500"
                >
                    <span x-show="deleting" 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: trash #}
                    <svg x-show="!deleting" class="-ml-1 mr-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                        <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
                    </svg>
                    {{ 'Delete'|t('market') }}
                </button>
            {% endif %}

            {# Upload #}
            <div id="file-uploader"
                 hx-post="{{ actionUrl('assets/upload') }}"
                 hx-trigger="change"
                 hx-encoding="multipart/form-data"
                 hx-indicator="#files-index-header"
                 x-on:htmx:before-request="uploading = true"
                 x-on:htmx:before-on-load="uploaderOnLoad"
                 x-on:htmx:xhr:progress="uploaderOnProgress"
            >

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

                <label for="file-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="file-uploader-input"
                           type="file"
                           name="assets-upload"
                           class="sr-only"
                           :disabled="uploading"
                    >
                </label>
            </div>
        </div>
    </div>
</div>

<div x-data="{}"
     {% if sprig.isInclude %}x-init="$refs.searchInput.focus()"{% endif %}
     class="max-w-7xl mx-auto px-4 py-4 sm:px-6 md:px-8"
>

    {# Search and filters #}
    <div class="grid grid-cols-2 sm:grid-cols-6 gap-4 mb-4">

        {# Search #}
        <div class="sm:col-span-6 md: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="#results"
                       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>

        {# Folder #}
        <div class="sm:col-span-2 md:col-span-3 lg:col-span-1">
            <label for="folder" class="block text-sm font-medium text-gray-700">Folder</label>
            <select sprig id="folder" name="folder" 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="main" {{ folder == 'main' ? 'selected' }}>Main Folder</option>
                <option value="account" {{ folder == 'account' ? 'selected' }}>Account Folder</option>
            </select>
        </div>

        {# Sort #}
        <div class="sm:col-span-2 md:col-span-3 lg: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>

        {# Limit #}
        <div class="sm:col-span-2 md:col-span-3 lg:col-span-1">
            <label for="limit" class="block text-sm font-medium text-gray-700">Limit</label>
            <select sprig id="limit" name="limit" 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="12" {{ limit == 12 ? 'selected' }}>12</option>
                <option value="24" {{ limit == 24 ? 'selected' }}>24</option>
                <option value="36" {{ limit == 36 ? 'selected' }}>36</option>
                <option value="60" {{ limit == 60 ? 'selected' }}>60</option>
            </select>
        </div>
    </div>

    {# Results container #}
    <div id="results">
        {% if assets %}
            {# Results list #}
            <ul class="grid gap-4 grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
                {% for asset in assets %}
                    <li class="col-span-1 flex flex-col">
                        <label for="asset-checkbox-{{ asset.id }}"
                               class="relative cursor-pointer bg-white rounded-md overflow-hidden shadow hover:bg-gray-50">

                            {# Options menu #}
                            <div x-data="{ open: false }"
                                 x-on:keydown.window.escape="open = false"
                                 x-on:click.away="open = false"
                                 class="absolute top-2 right-2 z-10"
                            >
                                <button x-on:click.prevent="open = !open"
                                        type="button"
                                        class="group relative w-8 h-8 bg-white opacity-50 hover:opacity-100 focus:opacity-100 rounded-full inline-flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-action-500"
                                        id="asset-options-menu-{{ asset.id }}"
                                        aria-haspopup="true"
                                        x-bind:aria-expanded="open"
                                >
                                    <span class="sr-only">Open options menu</span>
                                    <span class="flex items-center justify-center h-full w-full rounded-full">
                                        {# Heroicon name: dots-vertical #}
                                        <svg class="w-5 h-5 text-action-400 group-hover:text-action-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                            <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path>
                                        </svg>
                                    </span>
                                </button>

                                <div x-show="open"
                                     x-cloak
                                     x-transition:enter="transition ease-out duration-100"
                                     x-transition:enter-start="transform opacity-0 scale-95"
                                     x-transition:enter-end="transform opacity-100 scale-100"
                                     x-transition:leave="transition ease-in duration-75"
                                     x-transition:leave-start="transform opacity-100 scale-100"
                                     x-transition:leave-end="transform opacity-0 scale-95"
                                     class="origin-top-right absolute z-10 top-10 right-0 w-28 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-100"
                                     role="menu" aria-orientation="vertical" aria-labelledby="asset-options-menu-{{ asset.id }}"
                                >
                                    <div class="py-1">
                                        <a href="{{ url('market/files/'~asset.id) }}"
                                           class="group flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:rounded-md focus:bg-gray-100 focus:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-action-500"
                                           role="menuitem"
                                        >
                                            {# Heroicon name: eye #}
                                            <svg class="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                                <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
                                                <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" />
                                            </svg>
                                            View
                                        </a>
                                    </div>
                                    <div class="py-1">
                                        <button sprig
                                                s-action="assets/delete-asset"
                                                s-method="post"
                                                s-val:asset-id="{{ asset.id }}"
                                                s-val:selected-ids=""
                                                s-confirm="Are you sure you want to delete this file?"
                                                s-val:successful-notice="File deleted."
                                                type="button"
                                                class="w-full group flex items-center px-4 py-2 text-sm text-red-700 hover:bg-red-100 hover:text-red-900 focus:rounded-md focus:bg-red-100 focus:text-red-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
                                                role="menuitem"
                                        >
                                            {# Heroicon name: trash #}
                                            <svg class="mr-3 h-5 w-5 text-red-400 group-hover:text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                                <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
                                            </svg>
                                            Delete
                                        </button>
                                    </div>
                                </div>
                            </div>

                            {# Image #}
                            <div class="flex-1 flex flex-col">
                                <div class="aspect-w-1 aspect-h-1 relative">
                                    {% if asset.kind == 'image' %}
                                        <img class="object-cover" src="{{ asset.url({ width: 500, height: 500 }) }}" alt="{{ asset.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">{{ asset.extension|upper }}</div>
                                        </div>
                                    {% endif %}
                                </div>
                            </div>

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

            {# Pagination #}
            {% include '_market/_includes/pagination' with {
                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">
                                <a href="{{ url('market/files') }}" 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
                                </a>
                            </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 add some!</p>
                        </div>
                        <div class="mt-4">
                            <div class="-mx-2 -my-1.5 flex">
                                <button type="button" class="bg-orange-100 px-2 py-1.5 rounded-md text-sm font-medium text-orange-800 hover:bg-orange-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-orange-100 focus:ring-orange-600">
                                    Upload
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}
    </div>

</div>