
{% for form in formset %}
    <tr>
        <td
        class="px-4 py-2 text-left text-sm border-r border-gray-300 dark:border-gray-700 font-semibold text-gray-700 dark:text-gray-400">
        <input data-id="{{form.id.value}}" type="checkbox"
            class="instance-checkbox appearance-none w-4 h-4 border border-gray-400 dark:border-gray-600 rounded-sm bg-white dark:bg-gray-800 checked:bg-indigo-500 checked:border-transparent focus:ring-2 focus:ring-indigo-400">
    </td>
    {% with form.render_as_table_row as row_data  %}
        {{row_data.html|safe}}
    {% endwith %}
    <td
        class="px-4 py-2  sticky right-0 top-0 z-[5] w-10 dark:bg-slate-900 bg-white border-l text-sm text-gray-800 dark:text-gray-200   shadow">
        <div class="flex items-center justify-center gap-2">
            <!-- Update instance -->
            <a href="{% url 'od-update-instance' app.app_label model_admin.model_name form.id.value %}">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" class="size-4">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125" />
                </svg>
            </a>
            <!-- Delete instance -->
            <a href="{% url 'od-delete-instance' app.app_label model_admin.model_name form.id.value %}" class="text-rose-700">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" class="size-4">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
                </svg>
            </a>
        </div>
    </td>
</tr>
{% endfor %}

<!-- Render an outline if  -->
<script>
    tippy('[data-tippy-error]', {
        allowHTML: true,
        trigger: "mouseenter",
        maxWidth: 500,
        theme: 'tippy_error_theme',
        interactive: true,
        placement: 'right',
        animation: 'fade',
        arrow: true,
        popperOptions: {
            modifiers: [
                {
                    name: 'preventOverflow',
                    options: { boundary: 'viewport' },
                },
            ],
        },
    });
</script>