{{- /*gotype: crud-generator/html_components.Table*/ -}}
{{ define "table" }}
    <div id="tableDisplay" aria-live="polite">
        {{$entityUrl := .EntityUrl}}
        <div>
            {{ if .ShowBack }}
                <button {{template "buttonStyle"}}
                        data-hx-get="{{.BackUrl}}"
                        data-hx-target="body"
                        data-hx-push-url="true"
                >Back
                </button>
            {{ end }}
        </div>
        <form data-hx-get="{{$entityUrl}}"
              data-hx-target="body"
              data-hx-swap="outerHTML"
              data-hx-push-url="true"
              data-hx-include="input, select"
        >
            <input type="hidden" name="orderBy" value="{{.OrderBy}}">
            <input type="hidden" name="orderDirection" value="{{.OrderDirection}}">
            <input type="hidden" name="pageNumber" value="{{.Pagination.Page}}">

            <div id="itemTable" class="mx-auto max-w-screen-2xl sm:px-4 lg:px-12">
                <!-- Start coding here -->
                <div class="bg-white dark:bg-gray-800 relative shadow-md sm:rounded-lg overflow-hidden">
                    <div class="flex flex-col md:flex-row items-center justify-between space-y-3 md:space-y-0 md:space-x-4 p-4">
                        <div class="w-full md:w-auto flex flex-col md:flex-row space-y-2 md:space-y-0 items-stretch md:items-center justify-end md:space-x-3 flex-shrink-0">
                            <button type="button"
                                    data-hx-get="{{.CreateItemUrl}}"
                                    data-hx-target="body"
                                    data-hx-push-url="false"
                                    id="createItemButton"
                                    class="flex items-center justify-center text-white bg-blue-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-primary-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-primary-800"
                            >
                                <svg class="h-3.5 w-3.5 mr-2" fill="currentColor" viewbox="0 0 20 20"
                                     xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                    <path clip-rule="evenodd" fill-rule="evenodd"
                                          d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"/>
                                </svg>
                                Add
                            </button>
                        </div>
                        <div>
                            {{ template "selectInput" .FilterSelect}}
                        </div>
                        <label for="table-search" class="sr-only">Search</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 rtl:inset-r-0 start-0 flex items-center ps-3 pointer-events-none">
                                <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true"
                                     xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                          stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
                                </svg>
                            </div>
                            <input id="filterValueInput" name="filterValue" value="{{.FilterValue}}" type="text"
                                   class="block p-2 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg w-80 bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                                   placeholder="Filter input">
                        </div>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
                            <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                            <tr>
                                {{ range .Headers}}
                                    <th scope="col" class="px-4 py-3">
                                        <a
                                                href="#"
                                                data-hx-get="{{$entityUrl}}?orderBy={{.}}&orderDirection={{if eq $.OrderDirection "desc"}}asc{{else}}desc{{end}}"
                                                data-hx-params="not orderBy,orderDirection"
                                        >
                                            <div class="flex items-center">
                                                {{.}}
                                                <svg class="w-3 h-3 ms-1.5" aria-hidden="true"
                                                     xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                                     viewBox="0 0 24 24">
                                                    <path d="M8.574 11.024h6.852a2.075 2.075 0 0 0 1.847-1.086 1.9 1.9 0 0 0-.11-1.986L13.736 2.9a2.122 2.122 0 0 0-3.472 0L6.837 7.952a1.9 1.9 0 0 0-.11 1.986 2.074 2.074 0 0 0 1.847 1.086Zm6.852 1.952H8.574a2.072 2.072 0 0 0-1.847 1.087 1.9 1.9 0 0 0 .11 1.985l3.426 5.05a2.123 2.123 0 0 0 3.472 0l3.427-5.05a1.9 1.9 0 0 0 .11-1.985 2.074 2.074 0 0 0-1.846-1.087Z"/>
                                                </svg>
                                            </div>
                                        </a>
                                    </th>
                                {{end}}
                                <th scope="col" class="px-4 py-3">
                                    <span class="sr-only">Actions</span>
                                </th>
                            </tr>
                            </thead>
                            <tbody>
                            {{ range .Rows }}
                                {{ template "tableRow" . }}
                            {{ end }}
                            </tbody>
                        </table>
                        <nav class="flex items-center flex-column flex-wrap md:flex-row justify-between pt-4 py-2 px-2"
                             aria-label="Table navigation">
                        <span class="text-sm font-normal text-gray-500 dark:text-gray-400 mb-4 md:mb-0 block w-full md:inline md:w-auto">Showing <span
                                    class="font-semibold text-gray-900 dark:text-white">{{.Pagination.CurrenItemStart}}-{{.Pagination.CurrentItemEnd}}</span> of <span
                                    class="font-semibold text-gray-900 dark:text-white">{{.Pagination.TotalNumberOfItems}}</span></span>
                            <ul class="inline-flex -space-x-px rtl:space-x-reverse text-sm h-8">
                                <li>
                                    {{if .Pagination.PreviousDisabled}}
                                        <div
                                                class="{{ template "disabledPaginationButtonStyle"}} rounded-s-lg">
                                            Previous
                                        </div>
                                    {{ else }}
                                        <a href="#"
                                           id="previous"
                                           data-hx-get="{{$entityUrl}}?pageNumber={{.Pagination.PreviousPage}}"
                                           data-hx-params="not pageNumber"
                                           class="{{template "paginationButtonStyle"}} rounded-s-lg">Previous</a>
                                    {{ end }}
                                </li>
                                <li>
                                    {{ if .Pagination.NextDisabled }}
                                        <div
                                                class="{{ template "disabledPaginationButtonStyle"}} rounded-e-lg">
                                            Next
                                        </div>
                                    {{ else }}
                                        <a href="#"
                                           id="next"
                                           data-hx-get="{{$entityUrl}}?pageNumber={{.Pagination.NextPage}}"
                                           data-hx-params="not pageNumber"
                                           class="{{template "paginationButtonStyle"}} rounded-e-lg">Next</a>
                                    {{ end }}
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </form>
    </div>
{{end}}

{{ define "disabledPaginationButtonStyle" }}
    flex items-center justify-center px-3 h-8 ms-0 leading-tight text-gray-500 bg-gray-300 border border-gray-300 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400
{{end}}

{{define "paginationButtonStyle"}}
    flex items-center justify-center px-3 h-8 ms-0 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white
{{end}}