<script>
    import { isPanelOpen, togglePanel } from './panel.js';

    // Get the open state from the store
    let isOpen = $derived($isPanelOpen);

    function handleClick() {
        togglePanel();
    }

    function handleKeydown(event) {
        if (event.key === 'Enter' || event.key === ' ') {
            event.preventDefault();
            togglePanel();
        }
    }
</script>

<li
    class="wmd-button wmd-help-button"
    class:active={isOpen}
    role="button"
    tabindex="0"
    title={gettext('Formatting help')}
    aria-label={gettext('Toggle formatting help')}
    aria-expanded={isOpen}
    onclick={handleClick}
    onkeydown={handleKeydown}
>
</li>

<style>
    .wmd-help-button {
        margin-left: auto;
    }

    .wmd-help-button.active::before {
        color: var(--wmd-button-hover-color);
        background: var(--wmd-button-hover-bg);
    }
</style>
