<div{{ attributes.defaults(stimulus_controller('download_list')) }} class="min-w-48 overflow-scroll" >
    {% set table_body_id = (type == "complete") ? "complete_downloads" : "active_downloads" %}

    {% if this.isWidget == false %}
        <div class="flex flex-row mb-2 justify-end">
            <twig:DownloadSearch search_path="app_search" placeholder="Find {{ type == "complete" ? "a" : "an" }} {{ type }} download..." />
        </div>
    {% endif %}

    <table id="downloads" class="divide-y divide-gray-200 bg-gray-50 overflow-hidden rounded-lg table-auto w-full" {{ turbo_stream_listen('App\\Download\\Framework\\Entity\\Download') }}>
        <thead>
        <tr class="bg-orange-500 bg-filter bg-blur-lg bg-opacity-80 text-gray-950">
            <th scope="col"
                class="px-6 py-3 text-start text-xs font-medium text-stone-500 uppercase dark:text-stone-800 truncate">
                Title
            </th>
            <th scope="col"
                class="px-6 py-3 text-start text-xs font-medium text-stone-500 uppercase dark:text-stone-800 truncate {{ isWidget == true ? "hidden" : "r-tablecell" }}">
                Filename
            </th>
            <th scope="col"
                class="px-6 py-3 text-start text-xs font-medium text-stone-500 uppercase dark:text-stone-800 truncate {{ isWidget == true ? "hidden" : "r-tablecell" }}">
                Media type
            </th>
            <th scope="col"
                class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase dark:text-stone-800">
                Progress
            </th>
            <th scope="col"
                class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase dark:text-stone-800">
            </th>
        </tr>
        </thead>
        <tbody id="{{ table_body_id }}" class="divide-y divide-gray-200 dark:divide-gray-50">
        {% if this.downloads.items|length > 0 %}
            {% for download in this.downloads.items %}
                <twig:DownloadListRow download="{{ download }}" isWidget="{{ isWidget }}" />
            {% endfor %}
            {% if this.isWidget == true and this.downloads.items|length > this.perPage %}
                <tr  id="download_view_all">
                    <td class="py-2 whitespace-nowrap bg-orange-300 uppercase text-xs font-medium text-center text-black truncate" colspan="100%">
                        <a href="{{ path('app_downloads') }}">View All Downloads</a>
                    </td>
                </tr>
            {% endif %}
        {% else %}
            <tr id="{{ table_body_id }}_no_downloads">
                <td class="px-6 py-4 whitespace-nowrap text-xs uppercase text-center font-medium text-gray-800 dark:text-stone-800" colspan="100%">
                    No downloads
                </td>
            </tr>
        {% endif %}
        </tbody>
    </table>

    {% if this.isWidget == false %}
        {% if this.downloads.items|length > 0 %}
            {% set paginator = this.downloads %}
            {% include 'partial/paginator.html.twig' %}
        {% endif %}
    {% endif %}
</div>

