<div class="tailwind-admin"
     id="tab-htmx-errors">
    <div class="tw-bg-gray-100 tw-dark:bg-gray-900">
        <div class="tw-max-w-(--breakpoint-2xl) tw-mx-auto tw-p-4 tw-md:p-6">
            <div class="tw-rounded-2xl tw-border tw-border-gray-200 tw-bg-white tw-dark:border-gray-800
tw-dark:bg-white/[0.03]">
                <div class="tw-mt-5 tw-flex tw-flex-col tw-gap-2 tw-px-5 tw-sm:flex-row tw-sm:items-center
            tw-sm:justify-between tw-sm:px-6">
                    <div>
                        <h3 class="tw-text-lg tw-font-semibold tw-text-gray-800 tw-dark:text-white/90">
                            {__('Latest errors')}
                        </h3>
                    </div>
                    <div class="tw-flex tw-flex-col tw-gap-3 tw-sm:flex-row tw-sm:items-center">
                        <form hx-get="{stbIO uri='getErrorTable'}"
                              hx-trigger="keyup changed delay:500ms from:#errorSearch"
                              hx-target="#errorTable"
                              hx-swap="innerHTML">
                            <div class="tw-relative">
                                <span class="tw-pointer-events-none tw-absolute tw-top-1/2 tw-left-4 tw--translate-y-1/2">
                                    <svg class="tw-fill-gray-500 tw-dark:fill-gray-400"
                                         width="20"
                                         height="20"
                                         viewBox="0 0 20 20"
                                         fill="none"
                                         xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd"
                                              clip-rule="evenodd"
                                              d="M3.04199 9.37381C3.04199 5.87712 5.87735 3.04218 9.37533 3.04218C12.8733 3.04218 15.7087 5.87712 15.7087 9.37381C15.7087 12.8705 12.8733 15.7055 9.37533 15.7055C5.87735 15.7055 3.04199 12.8705 3.04199 9.37381ZM9.37533 1.54218C5.04926 1.54218 1.54199 5.04835 1.54199 9.37381C1.54199 13.6993 5.04926 17.2055 9.37533 17.2055C11.2676 17.2055 13.0032 16.5346 14.3572 15.4178L17.1773 18.2381C17.4702 18.531 17.945 18.5311 18.2379 18.2382C18.5308 17.9453 18.5309 17.4704 18.238 17.1775L15.4182 14.3575C16.5367 13.0035 17.2087 11.2671 17.2087 9.37381C17.2087 5.04835 13.7014 1.54218 9.37533 1.54218Z"
                                              fill=""/>
                                    </svg>
                                </span>
                                <label for="errorSearch" class="tw-mb-0!">
                                    <input id="errorSearch"
                                           name="search"
                                           type="text"
                                           placeholder="{__('Search...')}"
                                           class="tw-dark:bg-dark-900 tw-shadow-theme-xs tw-focus:border-brand-300
                               tw-focus:ring-brand-500/10 tw-dark:focus:border-brand-800 tw-h-[42px]
                               tw-w-full tw-rounded-lg tw-border tw-border-gray-300 tw-bg-transparent
                               tw-py-2.5 tw-pr-4 tw-pl-[42px] tw-text-sm tw-text-gray-800
                               tw-placeholder:text-gray-400 tw-focus:ring-3 tw-focus:outline-hidden
                               tw-xl:w-[300px] tw-dark:border-gray-700 tw-dark:bg-gray-900
                               tw-dark:text-white/90 tw-dark:placeholder:text-white/30"/>
                                </label>
                            </div>
                        </form>
                    </div>
                </div>
                <div hx-get="{stbIO uri='getErrorTable' page=1}"
                     hx-trigger="hxTabClicked from:#tab-htmx-errors"
                     hx-swap="innerHTML"
                     hx-sync="body:queue all"
                     hx-indicator="body.htmx-indicator"
                     id="errorTable"></div>
            </div>
        </div>
    </div>
</div>
