{% load i18n %}

<template id="trix-toolbar">
    <div class="bg-gray-50 flex flex-row border group-[.errors]:border-t-red-600 group-[.errors]:border-x-red-600 px-3 py-2 relative rounded-t-md shadow-sm w-full dark:bg-white/[.02] dark:border-gray-700 dark:group-[.errors]:border-t-red-500 dark:group-[.errors]:border-x-red-500">
        <div data-trix-button-group="text-tools" class="bg-white border border-md flex flex-row mr-4 rounded-md shadow-sm dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400">
            {% spaceless %}
                <button type="button" data-trix-attribute="p" data-trix-key="p" title="{% trans "Paragraph" %}" tabindex="-1" class="border-r cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-gray-700">
                    <span class="material-symbols-outlined">format_paragraph</span>
                </button>

                <button type="button" data-trix-attribute="underlined" data-trix-key="u" title="{% trans "Underlined" %}" tabindex="-1" class="border-r cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-gray-700">
                    <span class="material-symbols-outlined">format_underlined</span>
                </button>

                <button type="button" data-trix-attribute="bold" data-trix-key="b" title="{% trans "Bold" %}" tabindex="-1" class="border-r cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-gray-700">
                    <span class="material-symbols-outlined">format_bold</span>
                </button>

                <button type="button" data-trix-attribute="italic" data-trix-key="i" title="{% trans "Italic" %}" tabindex="-1" class="border-r cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-gray-700">
                    <span class="material-symbols-outlined">format_italic</span>
                </button>

                <button type="button" data-trix-attribute="strike" title="{% trans "Strike" %}" tabindex="-1" class="border-r cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-gray-700">
                    <span class="material-symbols-outlined">format_strikethrough</span>
                </button>

                <button type="button" data-trix-attribute="href" data-trix-action="link" data-trix-key="k" title="{% trans "Link" %}" tabindex="-1" class="flex cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600">
                    <span class="material-symbols-outlined">link</span>
                </button>
            {% endspaceless %}
        </div>

        <div data-trix-button-group="block-headings" class="bg-white border border-md flex flex-row mr-4 rounded-md shadow-sm dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400">
            {% spaceless %}
                <button type="button" data-trix-attribute="heading1" title="{% trans "Heading" %} 1" tabindex="-1" class="border-r cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-gray-700">
                    <span class="material-symbols-outlined">format_h1</span>
                </button>

                <button type="button" data-trix-attribute="heading2" title="{% trans "Heading" %} 2" tabindex="-1" class="border-r cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-gray-700">
                    <span class="material-symbols-outlined">format_h2</span>
                </button>

                <button type="button" data-trix-attribute="heading3" title="{% trans "Heading" %} 3" tabindex="-1" class="border-r cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-gray-700">
                    <span class="material-symbols-outlined">format_h3</span>
                </button>

                <button type="button" data-trix-attribute="heading4" title="{% trans "Heading" %} 4" tabindex="-1" class="cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-gray-700">
                    <span class="material-symbols-outlined">format_h4</span>
                </button>
            {% endspaceless %}
        </div>

        <div data-trix-button-group="block-tools" class="bg-white border border-md flex flex-row mr-4 rounded-md shadow-sm dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400">
            {% spaceless %}
                <button type="button" data-trix-attribute="quote" title="{% trans "Quote" %}" tabindex="-1" class="border-r cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-gray-700">
                    <span class="material-symbols-outlined">format_quote</span>
                </button>

                <button type="button" data-trix-attribute="code" title="{% trans "Code" %}" tabindex="-1" class="border-r cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-gray-700">
                    <span class="material-symbols-outlined">code</span>
                </button>

                <button type="button" data-trix-attribute="bullet" title="{% trans "Unordered list" %}" tabindex="-1" class="border-r cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-gray-700">
                    <span class="material-symbols-outlined">format_list_bulleted</span>
                </button>

                <button type="button"  data-trix-attribute="number" title="{% trans "Ordered list" %}" tabindex="-1" class="border-r cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-gray-700">
                    <span class="material-symbols-outlined">format_list_numbered</span>
                </button>

                <button type="button" data-trix-action="increaseNestingLevel" title="{% trans "Indent increase" %}" tabindex="-1" class="border-r cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-gray-700">
                    <span class="material-symbols-outlined">format_indent_increase</span>
                </button>

                <button type="button" data-trix-action="decreaseNestingLevel" title="{% trans "Indent decrease" %}" tabindex="-1" class="cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600">
                    <span class="material-symbols-outlined">format_indent_decrease</span>
                </button>
            {% endspaceless %}
        </div>

        <div data-trix-button-group="history-tools" class="bg-white border border-md flex flex-row ml-auto rounded-md shadow-sm dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400">
            <button type="button" data-trix-action="undo" data-trix-key="z" title="{% trans "Undo" %}" tabindex="-1" class="border-r cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-gray-700">
                <span class="material-symbols-outlined">undo</span>
            </button>

            <button type="button" data-trix-action="redo" data-trix-key="shift+z" title="{% trans "Redo" %}" tabindex="-1" class="cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600">
                <span class="material-symbols-outlined">redo</span>
            </button>
        </div>

        <div data-trix-dialogs>
            <div class="absolute bg-white border-b -bottom-px left-0 px-4 py-2 right-0 shadow-sm translate-y-full dark:bg-gray-900 dark:border-gray-700" data-trix-dialog="href" data-trix-dialog-attribute="href">
                <div class="flex flex-row">
                    <input type="url" name="href" class="border bg-white font-medium px-3 rounded-md shadow-sm text-gray-500 text-sm focus:ring focus:ring-primary-300 focus:border-primary-600 focus:outline-none group-[.errors]:border-red-600 group-[.errors]:focus:ring-red-200 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-primary-600/30 dark:group-[.errors]:border-red-500 dark:group-[.errors]:focus:ring-red-600/40" placeholder="{% trans "Enter an URL" %}" required data-trix-input>

                    <div class="bg-white border border-md flex flex-row ml-4 rounded-md shadow-sm dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400">
                        <button type="button" data-trix-method="setAttribute" title="{% trans "Link" %}" class="border-r cursor-pointer flex items-center h-8 justify-center text-gray-400 transition-colors w-8 hover:text-primary-600 dark:border-gray-700">
                            <span class="material-symbols-outlined">link</span>
                        </button>

                        <button type="button" data-trix-method="removeAttribute" title="{% trans "Unlink" %}" class="cursor-pointer flex items-center h-8 justify-center text-gray-400 transition-colors w-8 hover:text-primary-600 dark:border-gray-700">
                            <span class="material-symbols-outlined">link_off</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
