{{#
	@name Peak toolbar
	@desc The Peak toolbar component displaying debug information.
#}}

<!-- /components/_toolbar.antlers.html -->
{{ if environment == 'local' }}
    <aside
        class="fixed z-50 top-1 right-1 flex text-xs divide-x divide-white shadow-sm divide-solid motion-safe:transition-opacity hover:opacity-100"
        x-data="{ toolbarVisible: $persist(true).as('toolbarVisible') }"
        x-ref="toolbar"
        :class="{ 'opacity-100': toolbarVisible, 'opacity-0': !toolbarVisible }"
        x-cloak
    >
        <span title="Current Tailwind breakpoint" class="flex items-center p-2 space-x-1 text-yellow-800 bg-yellow-200">
            {{ svg:breakpoint class="w-4 h-4 fill-current" alt="" aria-hidden="true" }}
            <span class="breakpoint"></span>
        </span>

        {{ if logged_in == true }}
            <a href="{{ edit_url }}" title="Edit entry in CP" aria-label="Edit entry in CP" target="_blank" class="flex items-center p-2 space-x-1 text-gray-800 bg-gray-200 hover:bg-gray-300">
                {{ svg:edit class="w-4 h-4 fill-current" alt="" aria-hidden="true" }}
                <span>Edit</span>
            </a>
        {{ /if }}

        <button
            @click="toolbarVisible = !toolbarVisible"
            title="Toggle toolbar visibility" aria-label="Toggle toolbar visibility" class="flex items-center justify-center px-2 bg-gray-200 hover:bg-gray-300"
        >
            <div x-show="!toolbarVisible">
                {{ svg:invisible class="w-5 h-5 fill-current" alt="" aria-hidden="true" }}
            </div>
            <div x-show="toolbarVisible">
                {{ svg:visible class="w-5 h-5 fill-current" alt="" aria-hidden="true" }}
            </div>
        </button>

        <button
            @click="$refs.toolbar.remove()"
            title="Remove toolbar" aria-label="Remove toolbar" class="flex items-center justify-center px-2 bg-gray-200 hover:bg-gray-300"
        >
            {{ svg:trash class="w-4 h-4 text-yellow-800 stroke-current" alt="" aria-hidden="true" }}
        </button>
    </aside>
{{ /if }}
<!-- End: /components/_toolbar.antlers.html -->