{#- Reader toolbar: chapter picker, previous/next, mode switch, report. Expects: chapter, s -#}
<div class="bk-reader__toolbar">
    {%- if chapter.prev -%}
        <a class="bk-btn bk-btn--outline bk-btn--sm bk-btn--icon" href="{{ chapter.prev.url }}" rel="prev" aria-label="{{ t('Previous chapter') }}">{{ icon('chevron-left', 'size-4') }}</a>
    {%- else -%}
        <span class="bk-btn bk-btn--outline bk-btn--sm bk-btn--icon" aria-disabled="true">{{ icon('chevron-left', 'size-4') }}</span>
    {%- endif -%}
    <label class="min-w-0 flex-1 sm:max-w-64">
        <span class="sr-only">{{ t('Chapter') }}</span>
        <select class="bk-select !h-9 !rounded-full font-semibold" x-ref="select" @change="window.location.href = $event.target.value">
            {%- for item in chapter.chapters -%}
                <option value="{{ item.url }}"{% if item.current %} selected{% endif %}>{{ t('Chapter') }} {{ item.number }}</option>
            {%- endfor -%}
        </select>
    </label>
    {%- if chapter.next -%}
        <a class="bk-btn bk-btn--primary bk-btn--sm bk-btn--icon" href="{{ chapter.next.url }}" rel="next" aria-label="{{ t('Next chapter') }}">{{ icon('chevron-right', 'size-4') }}</a>
    {%- else -%}
        <span class="bk-btn bk-btn--outline bk-btn--sm bk-btn--icon" aria-disabled="true">{{ icon('chevron-right', 'size-4') }}</span>
    {%- endif -%}
    <div class="ml-auto flex items-center gap-2">
        {%- if s.switchable and chapter.pages|length > 1 -%}
            <div class="bk-segment" role="group" aria-label="{{ t('Reading mode') }}" x-cloak>
                <button type="button" :aria-pressed="(mode === 'vertical').toString()" @click="setMode('vertical')" title="{{ t('Vertical scroll') }}">{{ icon('list', 'size-4') }}<span class="hidden sm:inline">{{ t('Scroll') }}</span></button>
                <button type="button" :aria-pressed="(mode === 'paged').toString()" @click="setMode('paged')" title="{{ t('One page at a time') }}">{{ icon('book-open', 'size-4') }}<span class="hidden sm:inline">{{ t('Pages') }}</span></button>
            </div>
        {%- endif -%}
        {%- if s.show_report %}{% include '@theme/partials/report.twig' with { reading: true } %}{% endif -%}
    </div>
</div>