{{- /*gotype: assistant/components.Accordion*/ -}}
{{ define "singleAccordion"}}
    <div id="{{.Name}}-accordion" data-accordion="collapse">
        <h2 id="{{.Name}}-collapse">
            <button type="button" id="{{.Name}}-collapse-button"
                    class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-b-0 border-gray-200 rounded-t-xl focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3"
                    style="background-color: rgb(243 244 246);"
                    data-accordion-target="#{{.Name}}-collapse-target" aria-expanded="true"
                    aria-controls="{{.Name}}-collapse-target"
                    hx-get="{{ .Url }}"
                    hx-target="#{{.Name}}-content"
                    hx-trigger="{{.Name}}-trigger-event"
            >
                <span>Body</span>
                <svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true"
                     xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M9 5 5 1 1 5"/>
                </svg>
            </button>
        </h2>
        <div id="{{.Name}}-collapse-target" class="hidden" aria-labelledby="{{.Name}}-collapse">
            <div class="p-2 md:p-5 border border-b-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900">
                <p class="mb-2 text-gray-500 dark:text-gray-400" id="{{.Name}}-content">
                </p>
            </div>
        </div>
    </div>
    <script>
        (() => {
            const name = '{{.Name}}'

            function createBodyAccordion() {
                let openedOnce = false
                return new Accordion(document.getElementById(`${name}-accordion`), [
                    {
                        id: `${name}-collapse`,
                        triggerEl: document.getElementById(`${name}-collapse`),
                        targetEl: document.getElementById(`${name}-collapse-target`),
                        active: false
                    }
                ], {
                    onOpen: () => {
                        if (openedOnce) {
                            return
                        }
                        htmx.trigger(document.getElementById(`${name}-collapse-button`), `${name}-trigger-event`)
                        openedOnce = true
                    }
                })
            }

            document.querySelector('body').onload = function () {
                setTimeout(() => {
                    {{ if .IsClosed }}
                    document.getElementById(`${name}-collapse-button`).click()
                    {{ end }}
                    createBodyAccordion()
                }, 1)
            }
            if ((typeof Accordion) === 'undefined') {
                return
            }
            createBodyAccordion()
        })()
    </script>
{{ end }}