{% load i18n %}

<template id="trix-error-template">
    <div class="errornote mb-3 px-3 py-2.5 leading-[18px] rounded-default bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400"></div>
</template>

<template id="trix-toolbar" data-upload-url="{% url 'trix-upload' %}">
    <div class="bg-base-50 flex flex-row flex-wrap border border-base-200 group-[.errors]:border-t-red-600 gap-4 group-[.errors]:border-x-red-600 px-3 py-2 relative rounded-default rounded-b-none shadow-xs w-full dark:bg-white/[.02] dark:border-base-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-base-200 border-md flex flex-row rounded-default shadow-xs shrink-0 dark:bg-base-900 dark:border-base-700 dark:text-font-default-dark">
            {% spaceless %}
                <button type="button" data-trix-attribute="p" data-trix-key="p" title="{% trans "Paragraph" %}" tabindex="-1" class="border-r border-base-200 cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-base-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 border-base-200 cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-base-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 border-base-200 cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-base-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 border-base-200 cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-base-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 border-base-200 cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-base-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-base-200 border-md flex flex-row rounded-default shadow-xs dark:bg-base-900 dark:border-base-700 dark:text-font-default-dark">
            {% spaceless %}
                <button type="button" data-trix-attribute="heading1" title="{% trans "Heading" %} 1" tabindex="-1" class="border-r border-base-200 cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-base-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 border-base-200 cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-base-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 border-base-200 cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-base-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-base-700">
                    <span class="material-symbols-outlined">format_h4</span>
                </button>
            {% endspaceless %}
        </div>

        <div data-trix-button-group="block-tools" class="bg-white border border-base-200 border-md flex flex-row rounded-default shadow-xs dark:bg-base-900 dark:border-base-700 dark:text-font-default-dark">
            {% spaceless %}
                <button type="button" data-trix-attribute="quote" title="{% trans "Quote" %}" tabindex="-1" class="border-r border-base-200 cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-base-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 border-base-200 cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-base-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 border-base-200 cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-base-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 border-base-200 cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-base-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 border-base-200 cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-base-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="file-tools" class="bg-white border border-base-200 border-md flex flex-row rounded-default shadow-xs dark:bg-base-900 dark:border-base-700 dark:text-font-default-dark">
            <button type="button" data-trix-action="attachFiles" title="{% trans "Attach files" %}" 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">image</span>
            </button>
        </div>

        <div class="lg:ml-auto">
            <div data-trix-button-group="history-tools" class="bg-white border border-base-200 border-md flex flex-row rounded-default shadow-xs dark:bg-base-900 dark:border-base-700 dark:text-font-default-dark">
                <button type="button" data-trix-action="undo" data-trix-key="z" title="{% trans "Undo" %}" tabindex="-1" class="border-r border-base-200 cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-base-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 border-base-200 -bottom-px left-0 px-4 py-2 right-0 shadow-xs translate-y-full dark:bg-base-900 dark:border-base-700" data-trix-dialog="href" data-trix-dialog-attribute="href">
                    <div class="flex flex-row">
                        <input type="url" name="href" class="border border-base-200 bg-white font-medium px-3 rounded-default shadow-xs text-base-500 text-sm focus:outline-2 focus:-outline-offset-2 focus:outline-primary-600 group-[.errors]:border-red-600 focus:group-[.errors]:outline-red-600 dark:bg-base-900 dark:border-base-700 dark:text-font-default-dark dark:group-[.errors]:border-red-500 dark:focus:group-[.errors]:outline-red-500" placeholder="{% trans "Enter an URL" %}" required data-trix-input>

                        <div class="bg-white border border-base-200 border-md flex flex-row ml-4 rounded-default shadow-xs dark:bg-base-900 dark:border-base-700 dark:text-font-default-dark">
                            <button type="button" data-trix-method="setAttribute" title="{% trans "Link" %}" class="border-r border-base-200 cursor-pointer flex items-center h-8 justify-center text-base-400 transition-colors w-8 hover:text-primary-600 dark:border-base-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-base-400 transition-colors w-8 hover:text-primary-600 dark:border-base-700">
                                <span class="material-symbols-outlined">link_off</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>