{#
/**
 * @file
 * Accessibility block: icon button + slide-in drawer (replaces the CKEditor body field).
 */
#}
<div{{ attributes.addClass('flex items-center') }}>
  {{ title_prefix }}
  {{ title_suffix }}

  <button id="accessibility-trigger" type="button"
          title="{{ 'Accessibility Tools'|t }}" aria-label="{{ 'Accessibility Tools'|t }}"
          class="p-2 hover:text-navy transition-colors flex items-center justify-center rounded-full hover:bg-gray-100 cursor-pointer border border-transparent hover:border-gray-200">
    <span class="material-symbols-outlined text-[20px]">accessibility</span>
  </button>

  <div id="accessibility-drawer"
     style="position:fixed;top:0;bottom:0;right:0;width:100%;max-width:24rem;z-index:100;background:#fff;box-shadow:0 25px 50px -12px rgba(0,0,0,.25);display:flex;flex-direction:column;justify-content:space-between;text-align:left;transform:translateX(100%);transition:transform .3s;">
    <div class="p-6 overflow-y-auto">
      <div class="flex items-center justify-between border-b border-gray-100 pb-4 mb-6">
        <h3 class="text-navy text-lg font-bold tracking-tight">{{ 'Accessibility Tools'|t }}</h3>
        <button id="accessibility-close" type="button"
                class="text-gray-400 hover:text-gray-600 p-1 rounded-full hover:bg-gray-100 flex items-center justify-center">
          <span class="material-symbols-outlined text-2xl">close</span>
        </button>
      </div>

      <div class="space-y-8">
        <div>
          <h4 class="text-xs font-bold text-gray-500 uppercase tracking-widest mb-3">{{ 'Contrast Adjustment'|t }}</h4>
          <div class="grid grid-cols-2 gap-3">
            <button id="btn-high-contrast" type="button" class="flex flex-col items-center gap-2 p-4 border border-gray-200 rounded-xl hover:border-navy transition-all">
              <span class="material-symbols-outlined text-2xl text-navy">contrast</span>
              <span class="text-xs font-bold text-gray-700">{{ 'High Contrast'|t }}</span>
            </button>
            <button id="btn-normal-contrast" type="button" class="flex flex-col items-center gap-2 p-4 border border-navy bg-navy/5 rounded-xl transition-all">
              <span class="material-symbols-outlined text-2xl text-navy">brightness_5</span>
              <span class="text-xs font-bold text-gray-700">{{ 'Normal'|t }}</span>
            </button>
          </div>
        </div>

        <div>
          <h4 class="text-xs font-bold text-gray-500 uppercase tracking-widest mb-3">{{ 'Text Size'|t }}</h4>
          <div class="grid grid-cols-3 gap-2">
            <button id="btn-decrease-text" type="button" class="py-2.5 border border-gray-200 rounded-lg text-sm font-bold text-gray-700 hover:border-navy hover:bg-gray-50 transition-all">A-</button>
            <button id="btn-reset-text" type="button" class="py-2.5 border border-gray-200 rounded-lg text-sm font-bold text-gray-700 hover:border-navy hover:bg-gray-50 transition-all">{{ 'Reset'|t }}</button>
            <button id="btn-increase-text" type="button" class="py-2.5 border border-gray-200 rounded-lg text-sm font-bold text-gray-700 hover:border-navy hover:bg-gray-50 transition-all">A+</button>
          </div>
        </div>

        <div>
          <h4 class="text-xs font-bold text-gray-500 uppercase tracking-widest mb-3">{{ 'Additional Settings'|t }}</h4>
          <div class="space-y-3">
            <button id="btn-toggle-spacing" type="button" class="w-full flex items-center justify-between px-4 py-3 border border-gray-200 rounded-xl hover:border-navy transition-all text-sm font-semibold text-gray-700">
              <span>{{ 'Text Spacing'|t }}</span><span class="material-symbols-outlined text-base">format_letter_spacing</span>
            </button>
            <button id="btn-toggle-height" type="button" class="w-full flex items-center justify-between px-4 py-3 border border-gray-200 rounded-xl hover:border-navy transition-all text-sm font-semibold text-gray-700">
              <span>{{ 'Line Height'|t }}</span><span class="material-symbols-outlined text-base">format_line_spacing</span>
            </button>
            <button id="btn-toggle-images" type="button" class="w-full flex items-center justify-between px-4 py-3 border border-gray-200 rounded-xl hover:border-navy transition-all text-sm font-semibold text-gray-700">
              <span>{{ 'Hide Images'|t }}</span><span class="material-symbols-outlined text-base">hide_image</span>
            </button>
            <button id="btn-toggle-cursor" type="button" class="w-full flex items-center justify-between px-4 py-3 border border-gray-200 rounded-xl hover:border-navy transition-all text-sm font-semibold text-gray-700">
              <span>{{ 'Big Cursor'|t }}</span><span class="material-symbols-outlined text-base">mouse</span>
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="p-6 border-t border-gray-100">
      <button id="btn-screen-reader" type="button" class="w-full bg-navy hover:bg-navy-mid text-white py-3.5 font-bold text-sm rounded-xl transition-colors flex items-center justify-center gap-2">
        <span class="material-symbols-outlined text-lg">record_voice_over</span>
        <span id="sr-label"
            data-label-off="{{ 'Enable Screen Reader'|t }}"
            data-label-on="{{ 'Screen Reader Active (hover to speak)'|t }}">{{ 'Enable Screen Reader'|t }}</span>
      </button>
    </div>
  </div>
</div>