{{- /*gotype: crud-generator/html_components.ItemDisplay*/ -}}
{{ define "itemDisplay" }}
    {{ if .HasImages}}
        <script src="/static/cropper.min.js"></script>
        <link href="/static/cropper.min.css" rel="stylesheet"/>
    {{end}}
    <div id="itemDisplay">
        <button {{template "buttonStyle"}} id="backButton"
                                           data-hx-get="{{.BackUrl}}"
                                           data-hx-target="body"
                                           data-hx-push-url="true"
        >Back
        </button>

        <button {{template "buttonStyle"}}
                data-hx-get="{{.EditItemUrl}}"
                data-hx-target="body"
                data-hx-push-url="true"
                id="editButton">Edit
        </button>

        <button {{template "buttonStyle"}}
                data-hx-delete="{{.DeleteItemUrl}}"
                data-hx-target="body"
                data-hx-push-url="{{.DeletePushUrl}}"
                data-hx-confirm="Are you sure you want to delete this item?"
                id="deleteButton">Delete
        </button>
        <dl class="max-w-md text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700">
            {{ range .Columns}}
                <div class="flex flex-col pb-3">
                    <dt class="mb-1 text-gray-500 md:text-lg dark:text-gray-400">{{.Label}}</dt>
                    <dd class="text-lg font-semibold">
                        {{ if eq .Type "text"}}
                            {{.Value}}
                        {{ end }}
                        {{ if eq .Type "textarea"}}
                            <div id="{{.Label}}-text" class="whitespace-pre-line" aria-readonly="true">{{.Value}}</div>
                                <button type="button" {{template "buttonStyle"}}>Read More</button>
                            <script>
                                (() => {
                                    // shorten the long text of label-text
                                    const text = document.getElementById("{{.Label}}-text");
                                    const innerText = text.innerText;
                                    if (text.innerText.length > 100) {
                                        const shortenedText = text.innerText.substring(0, 100) + "...";
                                        let isShortened = true
                                        text.innerText = shortenedText
                                        const button = document.getElementById("{{.Label}}-text").nextElementSibling;
                                        button.onclick = () => {
                                            if (isShortened) {
                                                text.innerText = innerText;
                                                button.innerText = "Read Less";
                                                isShortened = false;
                                            } else {
                                                text.innerText = text.innerText.substring(0, 100) + "...";
                                                button.innerText = "Read More";
                                                isShortened = true;
                                            }
                                        };
                                    }
                                })()
                            </script>
                        {{ end }}
                        {{ if eq .Type "image"}}
                            <div id="{{.Label}}-imageDisplay">
                                {{template "imageDisplay" .}}
                            </div>
                        {{ end }}
                        {{ if eq .Type "datetime"}}
                            {{.Value}}
                        {{ end }}
                    </dd>
                </div>
            {{ end }}
            {{ range .SubItems }}
                <div>
                    <button {{template "buttonStyle"}}
                            data-hx-get="{{.Url}}"
                            data-hx-target="body"
                            data-hx-push-url="true"
                    >{{.Label}}</button>
                </div>
            {{ end }}
        </dl>
    </div>
{{end}}