{{- /*gotype: crud-generator/html_components.EditItem*/ -}}
{{ define "editItem" }}
    <h2>{{.Title}}</h2>
    <form class="p-4 md:p-5"
          id="editItemForm"
          data-hx-target="body"
            {{ if .IsCreate}}
                data-hx-post="{{ .Url}}"
            {{ end }}
            {{ if not .IsCreate}}
                data-hx-put="{{ .Url}}"
            {{ end }}
          data-hx-push-url="true"
            {{ if .HasFileUpload}}
                data-hx-encoding="multipart/form-data"
            {{ end }}
            {{ if .FromTable }}
                data-hx-headers='{"From-Table": "true"}'
            {{ end }}
    >
        {{ if .HasFileUpload}}
            <label for="progress" class="sr-only">File upload progress</label>
            <progress id="progress" value="0" max="100" style="width: 100%"
                      aria-label="File upload progress"
                      role="progressbar"></progress>

            <script>
                htmx.on('#editItemForm', 'htmx:xhr:progress', function (evt) {
                    let progressValue = evt.detail.loaded / evt.detail.total * 100;
                    htmx.find('#progress').setAttribute('value', progressValue)
                });
            </script>
        {{ end }}
        <div class="grid gap-4 mb-4 grid-cols-2">
            <div class="col-span-2">
                {{ range .Inputs }}
                    {{ if eq .Type "text" }}
                        {{ template "textInput" . }}
                    {{ end }}
                    {{ if eq .Type "textarea" }}
                        {{ template "textareaInput" . }}
                    {{ end }}
                    {{ if eq .Type "int" }}
                        {{ template "intInput" . }}
                    {{ end }}
                    {{ if eq .Type "float" }}
                        {{ template "floatInput" . }}
                    {{ end }}
                    {{ if eq .Type "enum" }}
                        {{ template "selectInput" . }}
                    {{ end }}
                    {{ if eq .Type "dateTime" }}
                        {{ template "dateTimeInput" . }}
                    {{ end }}
                    {{ if eq .Type "bool" }}
                        {{ template "booleanInput" . }}
                    {{ end }}
                    {{ if eq .Type "image" }}
                        {{ template "imageInput" . }}
                    {{ end }}
                {{ end }}
            </div>
        </div>
        <div class="flex flex-wrap">
            <div>
                <button type="submit"
                        class="text-white inline-flex items-center bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
                >
                    {{ if .IsCreate }}
                        <svg class="me-1 -ms-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
                             xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd"
                                  d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
                                  clip-rule="evenodd"></path>
                        </svg>
                    {{ end }}
                    {{ .SubmitButtonLabel }}
                </button>
            </div>

            <div class="px-5">
                <button
                        type="button"
                        class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600"
                        id="cancelEditButton"
                        data-hx-get="{{.CancelUrl}}"
                        data-hx-push-url="true"
                >
                    Cancel
                </button>
            </div>
        </div>
    </form>
{{ end }}