{*
SPDX-FileCopyrightText: © 2023 Olivier Meunier <olivier@neokraft.net>

SPDX-License-Identifier: AGPL-3.0-only
*}
<details class="no-js:hidden relative"
  data-controller="menu request"
  data-request-url-value="{{ urlFor(`/api/profile`) }}"
  data-request-method-value="patch"
>
  <summary class="list-none hf:text-gray-700" role="button">
    {{- yield icon(name="o-font-family", class="inline-block", svgClass="h-6 w-6") -}}
    <span class="sr-only">{{ gettext("Display options") }}</span>
  </summary>
  <div class="
    absolute top-6 right-0 w-72 max-h-[calc(100vh-12rem)] overflow-y-auto
    overscroll-y-contain
    shadow-lg text-gray-900 bg-gray-50 border border-gray-300 rounded-md p-4
  ">
    <details class="flex flex-col gap-2 border-b pb-2"
      data-controller="styler-option"
      data-styler-option-styler-outlet="[data-controller~='styler']"
    >
      <summary class="flex items-center gap-2 p-2 -mx-2 rounded-sm border border-transparent hover:border-gray-300">{{- yield icon(name="o-font") -}}
        <span class="flex-grow font-semibold">{{ gettext("Font") }}</span>
        {{- yield icon(name="o-chevron-r") -}}
      </summary>

      <div class="flex flex-col gap-1 mt-1 -mx-2" role="menu">
      {{- range i, x := preferences.FontList() -}}
        <button class="
          capitalize py-1 px-2 text-left text-lg rounded-sm border border-transparent
          hf:border-gray-300 data-[current]:bg-gray-200 {{ x[1] }}
         "
         value="{{ x[0] }}" data-choice-value="{{ x[1] }}"
         data-styler-option-target="choices"
         data-action="styler-option#setChoice"
         {{ x[0] == preferences.ReaderFont().Value ? "data-current" : "" }}
         {{ x[0] == preferences.ReaderFont().Value ? `aria-current="true"` : "" }}
        >{{ replace(x[0], "-", " ", -1) }} </button>
      {{- end -}}
      </div>

      <input type="hidden"
       name="settings_reader_font"
       value="{{ preferences.ReaderFont().Value }}"
       data-styler-option-target="value"
       data-action="styler-option:setValue->request#fetch">
    </details>
    <div
      class="mt-4 flex items-center gap-2"
      data-controller="styler-option"
      data-styler-option-styler-outlet="[data-controller~='styler']"
      data-styler-option-values-value="{{- preferences.WidthList()|json() -}}"
    >
      {{- yield icon(name="o-width") -}} <span class="flex-grow">{{ gettext("Width") }}</span>
      <button class="btn-outlined py-1.5 w-9 rounded"
       aria-label="{{ gettext(`Decrease width`) }}"
       data-action="styler-option#decreaseValue">
        {{- yield icon(name="o-minus") -}}
      </button>
      <input class="p-1 text-center text-sm bg-gray-200 rounded-full" type="text" size="1" disabled
       name="settings_reader_width"
       value="{{ preferences.ReaderWidth().Value }}"
       aria-label="{{ gettext(`Current Width`) }}"
       aria-live="polite"
       data-styler-option-target="value"
       data-action="styler-option:setValue->request#fetch">
      <button class="btn-outlined py-1.5 w-9 rounded"
       aria-label="{{ gettext(`Increase width`) }}"
       data-action="styler-option#increaseValue">
        {{- yield icon(name="o-plus") -}}
      </button>
    </div>
    <div
      class="mt-4 flex items-center gap-2"
      data-controller="styler-option"
      data-styler-option-styler-outlet="[data-controller~='styler']"
      data-styler-option-values-value="{{- preferences.FontSizes()|json() -}}"
    >
      {{- yield icon(name="o-font-size") -}} <span class="flex-grow">{{ gettext("Size") }}</span>
      <button class="btn-outlined py-1.5 w-9 rounded"
       aria-label="{{ gettext(`Decrease font size`) }}"
       data-action="styler-option#decreaseValue">
        {{- yield icon(name="o-minus") -}}
      </button>
      <input class="p-1 text-center text-sm bg-gray-200 rounded-full" type="text" size="1" disabled
       name="settings_reader_font_size"
       value="{{ preferences.ReaderFontSize().Value }}"
       aria-label="{{ gettext(`Current font size`) }}"
       aria-live="polite"
       data-styler-option-target="value"
       data-action="styler-option:setValue->request#fetch">
      <button class="btn-outlined py-1.5 w-9 rounded"
       aria-label="{{ gettext(`Increase font size`) }}"
       data-action="styler-option#increaseValue">
        {{- yield icon(name="o-plus") -}}
      </button>
    </div>
    <div
      class="mt-4 flex items-center gap-2"
      data-controller="styler-option"
      data-styler-option-styler-outlet="[data-controller~='styler']"
      data-styler-option-values-value="{{- preferences.LineHeights()|json() -}}"
    >
      {{- yield icon(name="o-line-height") -}} <span class="flex-grow">{{ gettext("Line height") }}</span>
      <button class="btn-outlined py-1.5 w-9 rounded"
       aria-label="{{ gettext(`Decrease line height`) }}"
       data-action="styler-option#decreaseValue">
        {{- yield icon(name="o-minus") -}}
      </button>
      <input class="p-1 text-center text-sm bg-gray-200 rounded-full" type="text" size="1" disabled
       name="settings_reader_line_height"
       value="{{ preferences.ReaderLineHeight().Value }}"
       aria-label="{{ gettext(`Current line height`) }}"
       aria-live="polite"
       data-styler-option-target="value"
       data-action="styler-option:setValue->request#fetch">
      <button class="btn-outlined py-1.5 w-9 rounded"
       aria-label="{{ gettext(`Increase line height`) }}"
       data-action="styler-option#increaseValue">
        {{- yield icon(name="o-plus") -}}
      </button>
    </div>

    <div class="mt-4 flex items-center gap-2"
     data-controller="styler-option"
     data-styler-option-styler-outlet="[data-controller~='styler']"
    >
      {{- yield icon(name="o-text-justify") -}} <span class="flex-grow">{{ gettext("Justify") }}</span>
      <div class="btn-group">
        {{ _l := preferences.Justify() }}
        {{- range i := _l -}}
          {{ i = len(_l) - 1 - i }}
          {{ x := _l[i] }}
          <button class="btn-outlined data-[current]:bg-gray-200 data-[current]:text-app-fg"
           value="{{ i }}" data-choice-value="{{ x }}"
           aria-label="{{ i ? gettext(`Justify text`) : gettext(`Don't justify text`) }}"
           data-styler-option-target="choices"
           data-action="styler-option#setChoice"
           {{ x == preferences.ReaderJustify().Value ? "data-current" : "" }}
          >{{ i ? gettext("yes") : gettext("no") }}</button>
        {{- end -}}
      </div>
      <input type="hidden"
       name="settings_reader_justify"
       value="{{ preferences.ReaderJustify().Value }}"
       data-styler-option-target="value"
       data-action="styler-option:setValue->request#fetch">
    </div>

    <div class="mt-4 flex items-center gap-2"
     data-controller="styler-option"
     data-styler-option-styler-outlet="[data-controller~='styler']"
    >
      {{- yield icon(name="o-text-hyphen") -}} <span class="flex-grow">{{ gettext("Hyphenation") }}</span>
      <div class="btn-group">
        {{ _l := preferences.Hyphenation() }}
        {{- range i := _l -}}
          {{ i = len(_l) - 1 - i }}
          {{ x := _l[i] }}
          <button class="btn-outlined data-[current]:bg-gray-200 data-[current]:text-app-fg"
           value="{{ i }}" data-choice-value="{{ x }}"
           aria-label="{{ i ? gettext(`With hyphenation`) : gettext(`Without hyphenation`) }}"
           data-styler-option-target="choices"
           data-action="styler-option#setChoice"
           {{ x == preferences.ReaderHyphenation().Value ? "data-current" : "" }}
          >{{ i ? gettext("yes") : gettext("no") }}</button>
        {{- end -}}
      </div>
      <input type="hidden"
       value="{{ preferences.ReaderHyphenation().Value }}"
       name="settings_reader_hyphenation"
       data-styler-option-target="value"
       data-action="styler-option:setValue->request#fetch">
    </div>
  </div>
</details>