<div{{ attributes.defaults(stimulus_controller('monitor_list')) }} class="overflow-scroll">
    {% 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 }} monitor..." />
        </div>
    {% endif %}
    <table id="monitor_list" class="divide-y divide-gray-200 dark:divide-gray-800 bg-gray-50 overflow-hidden rounded-lg table-auto w-full" {{ turbo_stream_listen('App\\Monitor\\Framework\\Entity\\Monitor') }}
        {{ stimulus_target('monitor_list', 'monitorList') }}
    >
        <thead>
        <tr class="bg-orange-500/80 text-gray-800 dark:text-stone-800 text-xs font-medium uppercase">
            <th scope="col"
                class="px-6 py-3 text-start truncate">
                Title
            </th>
            <th scope="col"
                class="px-6 py-3 text-start">
                ID
            </th>
            {% if null != parentMonitorId %}
            <th scope="col"
                class="hidden md:table-cell px-6 py-3 text-start">
                Search Count
            </th>
            {% else %}
            <th scope="col"
                class="hidden md:table-cell px-6 py-3 text-start">
                Episodes
            </th>
            {% endif %}
            <th scope="col"
                class="hidden md:table-cell px-6 py-3 text-start">
                Created at
            </th>
            <th scope="col"
                class="hidden md:table-cell px-6 py-3 text-start">
                Last Search Date
            </th>
            <th scope="col"
                class="hidden md:table-cell px-6 py-3 text-start">
                Type
            </th>
            <th scope="col"
                class="px-6 py-3 text-start">
                Status
            </th>
            <th class="hidden md:table-cell"></th>
        </tr>
        </thead>
        <tbody id="monitors" class="dark:text-white divide-y divide-gray-200 dark:divide-gray-900">
        {% if this.monitors.items|length > 0 %}
            {% for monitor in this.monitors.items %}
                <twig:MonitorListRow :monitor="monitor" isWidget="{{ this.isWidget }}" />
            {% endfor %}
            {% if this.isWidget and this.monitors.items|length > 5 %}
                <tr  id="monitor_view_all">
                    <td colspan="100%" class="py-2 whitespace-nowrap bg-orange-500/80 uppercase text-xs font-medium text-center truncate dark:text-black">
                        <a href="{{ path('app.monitors') }}">View All Monitors</a>
                    </td>
                </tr>
            {% endif %}
        {% else %}
            <tr id="active_monitors_no_monitors">
                <td class="px-6 py-4 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-900 text-center text-xs uppercase font-medium" colspan="100%">
                    No monitors
                </td>
            </tr>
        {% endif %}
        </tbody>
    </table>

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

