{{- /*gotype: crud-generator/html_components.TableRow*/ -}}
{{ define "tableRow" }}
    {{$rowId := .Id}}
    {{$entityUrl := .EntityUrl}}
    <tr id="row-{{.Id}}" class="border-b dark:border-gray-700">
        {{ range .Columns }}
            <td class="px-4 py-3 cursor-pointer"
                data-hx-get="{{$entityUrl}}/{{$rowId}}"
                data-hx-target="body"
                data-hx-push-url="true">
                {{ if eq .Type "text"}}
                    {{.Value}}
                {{ end }}
                {{ if eq .Type "image"}}
                    <img src="{{.Value}}?height=24" alt="Column image" style="max-height: 24px">
                {{ end }}
            </td>
        {{ end }}
        <td class="px-4 py-3 flex items-center justify-end">
            <button id="{{.Id}}-dropdown-button"
                    aria-label="Row actions"
                    aria-expanded="false"
                    aria-controls="{{.Id}}-dropdown"
                    data-dropdown-toggle="{{.Id}}-dropdown"
                    class="rowDropdownTrigger inline-flex items-center p-0.5 text-sm font-medium text-center text-gray-500 hover:text-gray-800 rounded-lg focus:outline-none dark:text-gray-400 dark:hover:text-gray-100"
                    type="button">
                <svg class="w-5 h-5" aria-hidden="true" fill="currentColor"
                     viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z"/>
                </svg>
            </button>
            <div id="{{.Id}}-dropdown"
                 class="hidden z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 dark:divide-gray-600">
                <ul class="py-1 text-sm text-gray-700 dark:text-gray-200"
                    aria-labelledby="apple-imac-27-dropdown-button">
                    <li>
                        <a href="#"
                           class="editItemLink block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
                           data-hx-get="{{.EditItemUrl}}"
                           data-hx-headers='{"From-Table": "true"}'
                           data-hx-target="body"
                           data-hx-push-url="true"
                           id="editItemLink-{{.Id}}"
                        >
                            Edit
                        </a>
                    </li>
                </ul>
                <div class="py-1">
                    <div
                            class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white cursor-pointer"
                            data-hx-delete="{{.DeleteItemUrl}}"
                            data-hx-confirm="Are you sure you want to delete this item?"
                            data-hx-target="#tableDisplay"
                            data-hx-trigger="click"
                            data-hx-push-url="false"
                    >
                        Delete
                    </div>
                </div>
                <script>
                    (() => {
                        if ((typeof Dropdown) === 'undefined') {
                            return
                        }
                        new Dropdown(document.getElementById('{{.Id}}-dropdown'), document.getElementById('{{.Id}}-dropdown-button'))
                    })()
                </script>
            </div>
        </td>
    </tr>
{{ end }}