<tr{{ attributes }} id="monitor_{{ monitor.id }}" class="hover:bg-gray-200">
    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-stone-800 truncate">
        <a href="{{ path('app_search_result', {imdbId: monitor.imdbId, mediaType: monitor.monitorType|as_download_type}) }}"
           class="mr-1 hover:underline rounded-md"
        >
            {{ monitor.title }}
        </a>
    </td>
    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
        {{ monitor|monitor_media_id }}
    </td>
    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
        {{ monitor.searchCount }}
    </td>
    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
        {{ monitor.createdAt|date('m/d/Y h:i a') }}
    </td>
    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
        {{ monitor.lastSearch|date('m/d/Y h:i a') }}
    </td>
    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
        {% if monitor.monitorType == "tvshow" %}
            <twig:StatusBadge color="blue" number="300" text="black" status="{{ monitor.monitorType|monitor_type }}" />
        {% elseif monitor.monitorType == "tvseason" %}
            <twig:StatusBadge color="orange" number="300" text="black" status="{{ monitor.monitorType|monitor_type }}" />
        {% else %}
            <twig:StatusBadge color="fuchsia" number="300" text="black" status="{{ monitor.monitorType|monitor_type }}" />
        {% endif %}
    </td>
    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
        {% if monitor.status == "New" %}
            <twig:StatusBadge color="orange" status="{{ monitor.status }}" />
        {% elseif monitor.status == "In Progress" or monitor.status == "Active" %}
            <twig:StatusBadge color="purple" status="{{ monitor.status }}" />
        {% else %}
            <twig:StatusBadge color="green" status="{{ monitor.status }}" />
        {% endif %}
    </td>
    <td class="px-6 py-4 flex flex-row align-middle justify-center">
        {% set delete_button = component('ux:icon', {name: 'ic:twotone-cancel', width: '18px', class: 'rounded-full align-middle text-red-600' }) %}
        <twig:Modal heading="But wait!" button_text="{{ delete_button }}" submit_action="{{ stimulus_action('monitor_list', 'deleteMonitor', 'click', {id: monitor.id}) }}" show_cancel show_submit>
            Are you sure you want to delete this monitor?<br />
            <div class="mt-2 border-2 border-orange-500 overflow-hidden rounded-lg">
                <table class="table-auto">
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-stone-800 truncate">
                            {{ monitor.title }}
                        </td>
                        {% if monitor|monitor_media_id != "-" %}
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
                                {{ monitor|monitor_media_id }}
                            </td>
                        {% endif %}
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
                            {% if monitor.monitorType == "tvshow" %}
                                <twig:StatusBadge color="blue" number="300" text="black" status="{{ monitor.monitorType|monitor_type }}" />
                            {% elseif monitor.monitorType == "tvseason" %}
                                <twig:StatusBadge color="orange" number="300" text="black" status="{{ monitor.monitorType|monitor_type }}" />
                            {% else %}
                                <twig:StatusBadge color="fuchsia" number="300" text="black" status="{{ monitor.monitorType|monitor_type }}" />
                            {% endif %}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
                            {% if monitor.status == "New" %}
                                <twig:StatusBadge color="orange" status="{{ monitor.status }}" />
                            {% elseif monitor.status == "In Progress" or monitor.status == "Active" %}
                                <twig:StatusBadge color="purple" status="{{ monitor.status }}" />
                            {% else %}
                                <twig:StatusBadge color="green" status="{{ monitor.status }}" />
                            {% endif %}
                        </td>
                    </tr>
                </table>
            </div>
        </twig:Modal>
    </td>
</tr>
