{% set value = '' %}
{% if element %}{% set value = element.getFieldValue(field.handle) %}{% endif %}
{% if heightClass is not defined %}{% set heightClass = 'h-96' %}{% endif %}
{% if showLabel is not defined %}{% set showLabel = true %}{% endif %}

<div>
    {% if showLabel %}
        <label for="field-{{ field.id }}" class="block text-sm font-medium text-gray-700">
            {{ field.name }}
            {% if field.required %}<span class="text-red-600">*</span>{% endif %}
        </label>
    {% endif %}

    {% if field.instructions %}
        <p class="text-xs text-gray-500">{{ field.instructions|md(inlineOnly = true) }}</p>
    {% endif %}

    <div x-data="Market.richtextField('{{ value|e('js') }}', '{{ field.id }}', '{{ heightClass }}')"
         x-init="() => init($refs.editor)"
         x-on:click.away="inFocus = false"
         x-on:keydown.cmd.k="openLinkPanel"
         class="mt-2 border shadow-sm sm:text-sm border-gray-300 rounded-md relative"
    >
        <template x-if="editor">
            <div class="bg-gray-50 border-b p-3 overflow-y-auto rounded-t-md">
                <nav class="relative z-0 inline-flex shadow-sm rounded-md">
                    {# H2 #}
                    <button type="button"
                            class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-action-500 focus:border-action-500"
                            x-on:click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
                            x-bind:class="{ 'bg-gray-100': editor.isActive('heading', { level: 2 }) }"
                    >
                        <svg class="p-1 w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                            <path fill="none" d="M0 0H24V24H0z"/>
                            <path d="M4 4v7h7V4h2v16h-2v-7H4v7H2V4h2zm14.5 4c2.071 0 3.75 1.679 3.75 3.75 0 .857-.288 1.648-.772 2.28l-.148.18L18.034 18H22v2h-7v-1.556l4.82-5.546c.268-.307.43-.709.43-1.148 0-.966-.784-1.75-1.75-1.75-.918 0-1.671.707-1.744 1.606l-.006.144h-2C14.75 9.679 16.429 8 18.5 8z"/>
                        </svg>
                    </button>

                    {# H3 #}
                    <button type="button"
                            class="-ml-px relative inline-flex items-center px-2 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-action-500 focus:border-action-500"
                            x-on:click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
                            x-bind:class="{ 'bg-gray-100': editor.isActive('heading', { level: 3 }) }"
                    >
                        <svg class="p-1 w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                            <path fill="none" d="M0 0H24V24H0z"/>
                            <path d="M22 8l-.002 2-2.505 2.883c1.59.435 2.757 1.89 2.757 3.617 0 2.071-1.679 3.75-3.75 3.75-1.826 0-3.347-1.305-3.682-3.033l1.964-.382c.156.806.866 1.415 1.718 1.415.966 0 1.75-.784 1.75-1.75s-.784-1.75-1.75-1.75c-.286 0-.556.069-.794.19l-1.307-1.547L19.35 10H15V8h7zM4 4v7h7V4h2v16h-2v-7H4v7H2V4h2z"/>
                        </svg>
                    </button>

                    {# Paragraph #}
                    <button type="button"
                            class="-ml-px relative inline-flex items-center px-2 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-action-500 focus:border-action-500"
                            x-on:click="editor.chain().focus().setParagraph().run()"
                            x-bind:class="{ 'bg-gray-100': editor.isActive('paragraph') }"
                    >
                        <svg class="p-1 w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                            <path fill="none" d="M0 0h24v24H0z"/>
                            <path d="M12 6v15h-2v-5a6 6 0 1 1 0-12h10v2h-3v15h-2V6h-3zm-2 0a4 4 0 1 0 0 8V6z"/>
                        </svg>
                    </button>

                    {# Bold #}
                    <button type="button"
                            class="-ml-px relative inline-flex items-center px-2 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-action-500 focus:border-action-500"
                            x-on:click="editor.chain().focus().toggleBold().run()"
                            x-bind:class="{ 'bg-gray-100': editor.isActive('bold') }"
                    >
                        <svg class="p-1 w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                            <path fill="none" d="M0 0h24v24H0z"/>
                            <path d="M8 11h4.5a2.5 2.5 0 1 0 0-5H8v5zm10 4.5a4.5 4.5 0 0 1-4.5 4.5H6V4h6.5a4.5 4.5 0 0 1 3.256 7.606A4.498 4.498 0 0 1 18 15.5zM8 13v5h5.5a2.5 2.5 0 1 0 0-5H8z"/>
                        </svg>
                    </button>

                    {# Italic #}
                    <button type="button"
                            class="-ml-px relative inline-flex items-center px-2 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-action-500 focus:border-action-500"
                            x-on:click="editor.chain().focus().toggleItalic().run()"
                            x-bind:class="{ 'bg-gray-100': editor.isActive('italic') }"
                    >
                        <svg class="p-1 w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                            <path fill="none" d="M0 0h24v24H0z"/>
                            <path d="M15 20H7v-2h2.927l2.116-12H9V4h8v2h-2.927l-2.116 12H15z"/>
                        </svg>
                    </button>

                    {# Bullet list #}
                    <button type="button"
                            class="-ml-px relative inline-flex items-center px-2 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-action-500 focus:border-action-500"
                            x-on:click="editor.chain().focus().toggleBulletList().run()"
                            x-bind:class="{ 'bg-gray-100': editor.isActive('bulletList') }"
                    >
                        <svg class="p-1 w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                            <path fill="none" d="M0 0h24v24H0z"/>
                            <path d="M8 4h13v2H8V4zM4.5 6.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm0 7a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm0 6.9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zM8 11h13v2H8v-2zm0 7h13v2H8v-2z"/>
                        </svg>
                    </button>

                    {# Ordered list #}
                    <button type="button"
                            class="-ml-px relative inline-flex items-center px-2 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-action-500 focus:border-action-500"
                            x-on:click="editor.chain().focus().toggleOrderedList().run()"
                            x-bind:class="{ 'bg-gray-100': editor.isActive('orderedList') }"
                    >
                        <svg class="p-1 w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                            <path fill="none" d="M0 0h24v24H0z"/>
                            <path d="M8 4h13v2H8V4zM5 3v3h1v1H3V6h1V4H3V3h2zM3 14v-2.5h2V11H3v-1h3v2.5H4v.5h2v1H3zm2 5.5H3v-1h2V18H3v-1h3v4H3v-1h2v-.5zM8 11h13v2H8v-2zm0 7h13v2H8v-2z"/>
                        </svg>
                    </button>

                    {# Quote #}
                    <button type="button"
                            class="-ml-px relative inline-flex items-center px-2 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-action-500 focus:border-action-500"
                            x-on:click="editor.chain().focus().toggleBlockquote().run()"
                            x-bind:class="{ 'bg-gray-100': editor.isActive('blockquote') }"
                    >
                        <svg class="p-1 w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                            <path fill="none" d="M0 0h24v24H0z"/>
                            <path d="M4.583 17.321C3.553 16.227 3 15 3 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 0 1-3.5 3.5c-1.073 0-2.099-.49-2.748-1.179zm10 0C13.553 16.227 13 15 13 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 0 1-3.5 3.5c-1.073 0-2.099-.49-2.748-1.179z"/>
                        </svg>
                    </button>

                    {# Add link #}
                    <button type="button"
                            class="-ml-px relative inline-flex items-center px-2 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-action-500 focus:border-action-500"
                            x-on:click="openLinkPanel"
                            x-bind:class="{ 'bg-gray-100': editor.isActive('link') }"
                    >
                        <svg class="p-1 w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                            <path fill="none" d="M0 0h24v24H0z"/>
                            <path d="M17.657 14.828l-1.414-1.414L17.657 12A4 4 0 1 0 12 6.343l-1.414 1.414-1.414-1.414 1.414-1.414a6 6 0 0 1 8.485 8.485l-1.414 1.414zm-2.829 2.829l-1.414 1.414a6 6 0 1 1-8.485-8.485l1.414-1.414 1.414 1.414L6.343 12A4 4 0 1 0 12 17.657l1.414-1.414 1.414 1.414zm0-9.9l1.415 1.415-7.071 7.07-1.415-1.414 7.071-7.07z"/>
                        </svg>
                    </button>

                    {# Remove link #}
                    <button type="button"
                            class="-ml-px relative inline-flex items-center px-2 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-action-500 focus:border-action-500"
                            x-on:click="editor.chain().focus().unsetLink().run()"
                            x-show="editor.isActive('link')"
                    >
                        <svg class="p-1 w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                            <path fill="none" d="M0 0h24v24H0z"/>
                            <path d="M17.657 14.828l-1.414-1.414L17.657 12A4 4 0 1 0 12 6.343l-1.414 1.414-1.414-1.414 1.414-1.414a6 6 0 0 1 8.485 8.485l-1.414 1.414zm-2.829 2.829l-1.414 1.414a6 6 0 1 1-8.485-8.485l1.414-1.414 1.414 1.414L6.343 12A4 4 0 1 0 12 17.657l1.414-1.414 1.414 1.414zm0-9.9l1.415 1.415-7.071 7.07-1.415-1.414 7.071-7.07zM5.775 2.293l1.932-.518L8.742 5.64l-1.931.518-1.036-3.864zm9.483 16.068l1.931-.518 1.036 3.864-1.932.518-1.035-3.864zM2.293 5.775l3.864 1.036-.518 1.931-3.864-1.035.518-1.932zm16.068 9.483l3.864 1.035-.518 1.932-3.864-1.036.518-1.931z"/>
                        </svg>
                    </button>

                    {# Undo #}
                    <button type="button"
                            class="-ml-px relative inline-flex items-center px-2 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-action-500 focus:border-action-500"
                            x-on:click="editor.chain().focus().undo().run()"
                    >
                        <svg class="p-1 w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                            <path fill="none" d="M0 0h24v24H0z"/>
                            <path d="M5.828 7l2.536 2.536L6.95 10.95 2 6l4.95-4.95 1.414 1.414L5.828 5H13a8 8 0 1 1 0 16H4v-2h9a6 6 0 1 0 0-12H5.828z"/>
                        </svg>
                    </button>

                    {# Redo #}
                    <button type="button"
                            class="-ml-px relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-action-500 focus:border-action-500"
                            x-on:click="editor.chain().focus().redo().run()"
                    >
                        <svg class="p-1 w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                            <path fill="none" d="M0 0h24v24H0z"/>
                            <path d="M18.172 7H11a6 6 0 1 0 0 12h9v2h-9a8 8 0 1 1 0-16h7.172l-2.536-2.536L17.05 1.05 22 6l-4.95 4.95-1.414-1.414L18.172 7z"/>
                        </svg>
                    </button>
                </nav>
            </div>
        </template>

        <div x-ref="editor"></div>

        <div x-show="showLinkPanel"
             x-cloak
             aria-labelledby="field-{{ field.id }}-link-panel-title"
             role="dialog"
             aria-modal="true"
             class="absolute inset-0 overflow-hidden z-60 rounded-md"
        >
            {# Overlay #}
            <div x-show="showLinkPanel"
                 x-transition:enter="ease-in-out duration-500"
                 x-transition:enter-start="opacity-0"
                 x-transition:enter-end="opacity-100"
                 x-transition:leave="ease-in-out duration-500"
                 x-transition:leave-start="opacity-100"
                 x-transition:leave-end="opacity-0"
                 class="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
                 x-on:click="closeLinkPanel"
                 aria-hidden="true"
            ></div>

            {# Panel #}
            <div x-show="showLinkPanel"
                 x-transition:enter="transform transition ease-in-out duration-500 sm:duration-700"
                 x-transition:enter-start="translate-x-full"
                 x-transition:enter-end="translate-x-0"
                 x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700"
                 x-transition:leave-start="translate-x-0"
                 x-transition:leave-end="translate-x-full"
                 class="absolute inset-y-0 right-0 pl-10 max-w-full flex"
                 x-on:keydown.window.escape="closeLinkPanel"
                 x-on:click.away="closeLinkPanel"
            >
                <div class="w-screen max-w-md">
                    <div class="h-full flex flex-col py-6 bg-white shadow-xl overflow-hidden">
                        {# Panel header #}
                        <div class="flex-shrink-0 px-6 border-b">
                            <div class="flex items-start justify-between mb-6">
                                <h2 class="text-lg font-medium text-gray-900" id="field-{{ field.id }}-link-panel-title">
                                    Add a link
                                </h2>
                                <div class="ml-3 h-7 flex items-center">
                                    <button x-on:click="closeLinkPanel"
                                            type="button"
                                            class="bg-white rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-action-500"
                                    >
                                        <span class="sr-only">Close link panel</span>
                                        {# Heroicon name: outline/x #}
                                        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                                        </svg>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div class="flex flex-col h-full">

                            {# Panel middle #}
                            <div id="field-{{ field.id }}-link-panel-container" class="relative flex-1 overflow-y-auto px-6">
                                <div class="absolute inset-0 px-6">

                                    <div class="space-y-4 py-6">

                                        {# TODO: fix scroll distances and swap them over #}
                                        {{ sprig('_market/_components/richtext-links', {
                                            _fieldId: field.id
                                        }, {
                                            class: 'space-y-4',
                                            'x-on:htmx:after-swap' : 'fixScroll'
                                        }) }}

                                        <div class="border-t pt-4">
                                            <label for="field-{{ field.id }}-link-panel-link-url" class="block text-sm font-medium text-gray-700">
                                                URL
                                            </label>
                                            <input type="text"
                                                   id="field-{{ field.id }}-link-panel-link-url"
                                                   x-model="linkUrl"
                                                   class="mt-1 block w-full shadow-sm sm:text-sm rounded-md border-gray-300 focus:ring-action-500 focus:border-action-500"
                                            >
                                        </div>

                                        <div>
                                            <div class="relative flex items-start">
                                                <div class="flex items-center h-5">
                                                    <input x-model="linkTarget"
                                                           id="field-{{ field.id }}-link-panel-link-target"
                                                           type="checkbox"
                                                           class="focus:ring-action-500 h-4 w-4 text-action-600 border-gray-300 rounded">
                                                </div>
                                                <div class="ml-3 text-sm">
                                                    <label for="field-{{ field.id }}-link-panel-link-target" class="font-medium text-gray-700">Open in a new window?</label>
                                                    <p class="text-gray-500">This will set the <code>target="_blank"</code> attribute on the link.</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {# Panel footer #}
                            <div class="flex-none h-16 border-t">
                                <div class="flex justify-between py-6 px-4 sm:px-6">
                                    <button x-on:click.prevent="closeLinkPanel"
                                            type="button"
                                            class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-action-500"
                                    >
                                        Cancel
                                    </button>
                                    <button x-on:click="setLink"
                                            type="button"
                                            class="px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-action-600 hover:bg-action-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-action-500"
                                    >
                                        Save
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <input type="hidden"
               id="field-{{ field.id }}"
               name="fields[{{ field.handle }}]"
               :value="content">
    </div>
</div>