{{ define "title"}}{{ t "page.settings.title" }}{{ end }}

{{ define "page_header"}}
<section class="page-header" aria-labelledby="page-header-title">
    <h1 id="page-header-title">{{ t "page.settings.title" }}</h1>
    {{ template "settings_menu" dict "user" .user }}
</section>
{{ end }}

{{ define "content"}}
<form method="post" autocomplete="off" action="{{ routePath "/settings" }}">
    <input type="hidden" name="csrf" value="{{ .csrf }}">

    {{ if .errorMessage }}
        <div role="alert" class="alert alert-error">{{ .errorMessage }}</div>
    {{ end }}

    <fieldset>
        <legend>{{ t "form.prefs.fieldset.reader_settings" }}</legend>

        <label for="form-cjk-reading-speed">{{ t "form.prefs.label.cjk_reading_speed" }}</label>
        <input type="number" name="cjk_reading_speed" id="form-cjk-reading-speed" value="{{ .form.CJKReadingSpeed }}" min="1">

        <label for="form-default-reading-speed">{{ t "form.prefs.label.default_reading_speed" }}</label>
        <input type="number" name="default_reading_speed" id="form-default-reading-speed" value="{{ .form.DefaultReadingSpeed }}" min="1">

        <label for="form-media-playback-rate">{{ t "form.prefs.label.media_playback_rate" }}</label>
        <input type="number" name="media_playback_rate" id="form-media-playback-rate" value="{{ .form.MediaPlaybackRate }}" min="0.25" max="4" step="any" />

        <label><input type="checkbox" name="show_reading_time" value="1" {{ if .form.ShowReadingTime }}checked{{ end }}> {{ t "form.prefs.label.show_reading_time" }}</label>

        <label><input type="radio" name="mark_read_behavior" value="{{ .readBehaviors.NoAutoMarkAsRead }}"
                      {{ if eq .form.MarkReadBehavior .readBehaviors.NoAutoMarkAsRead }}checked{{end}}                          > {{ t "form.prefs.label.mark_read_manually" }}</label>
        <label><input type="radio" name="mark_read_behavior" value="{{ .readBehaviors.MarkAsReadOnView }}"
                      {{ if eq .form.MarkReadBehavior .readBehaviors.MarkAsReadOnView }}checked{{end}}                          > {{ t "form.prefs.label.mark_read_on_view" }}</label>
        <label><input type="radio" name="mark_read_behavior" value="{{ .readBehaviors.MarkAsReadOnViewButWaitForPlayerCompletion }}"
                      {{ if eq .form.MarkReadBehavior .readBehaviors.MarkAsReadOnViewButWaitForPlayerCompletion }}checked{{end}}> {{ t "form.prefs.label.mark_read_on_view_or_media_completion" }}</label>
        <label><input type="radio" name="mark_read_behavior" value="{{ .readBehaviors.MarkAsReadOnlyOnPlayerCompletion }}"
                      {{ if eq .form.MarkReadBehavior .readBehaviors.MarkAsReadOnlyOnPlayerCompletion }}checked{{end}}          > {{ t "form.prefs.label.mark_read_on_media_completion" }}</label>

        <div class="buttons">
            <button type="submit" class="button button-primary" data-label-loading="{{ t "form.submit.saving" }}">{{ t "action.update" }}</button>
        </div>
    </fieldset>

    <fieldset>
        <legend>{{ t "form.prefs.fieldset.application_settings" }}</legend>

        <label for="form-language">{{ t "form.prefs.label.language" }}</label>
        <select id="form-language" name="language">
        {{ range $key, $value := .languages }}
            <option value="{{ $key }}" {{ if eq $key $.form.Language }}selected="selected"{{ end }}>{{ $value }}</option>
        {{ end }}
        </select>

        <label for="form-timezone">{{ t "form.prefs.label.timezone" }}</label>
        <select id="form-timezone" name="timezone">
        {{ range $value := .timezones }}
            <option value="{{ $value }}" {{ if eq $value $.form.Timezone }}selected="selected"{{ end }}>{{ $value }}</option>
        {{ end }}
        </select>

        <label for="form-theme">{{ t "form.prefs.label.theme" }}</label>
        <select id="form-theme" name="theme">
        {{ range $key, $value := .themes }}
            <option value="{{ $key }}" {{ if eq $key $.form.Theme }}selected="selected"{{ end }}>{{ $value }}</option>
        {{ end }}
        </select>

        <div class="form-label-row">
            <label for="form-display-mode">{{ t "form.prefs.label.display_mode" }}</label>
            &nbsp;
            <a href="https://developer.mozilla.org/en-US/docs/Web/Manifest/display" aria-label="{{ t "action.documentation" (t "form.prefs.label.display_mode") }}" {{ if $.user.OpenExternalLinksInNewTab }}target="_blank"{{ end }}>
                {{ icon "external-link" }}
            </a>
        </div>
        <select id="form-display-mode" name="display_mode">
            <option value="fullscreen" {{ if eq "fullscreen" $.form.DisplayMode }}selected="selected"{{ end }}>{{ t "form.prefs.select.fullscreen" }}</option>
            <option value="standalone" {{ if eq "standalone" $.form.DisplayMode }}selected="selected"{{ end }}>{{ t "form.prefs.select.standalone" }}</option>
            <option value="minimal-ui" {{ if eq "minimal-ui" $.form.DisplayMode }}selected="selected"{{ end }}>{{ t "form.prefs.select.minimal_ui" }}</option>
            <option value="browser" {{ if eq "browser" $.form.DisplayMode }}selected="selected"{{ end }}>{{ t "form.prefs.select.browser" }}</option>
        </select>

        <label for="form-default-home-page">{{ t "form.prefs.label.default_home_page" }}</label>
        <select id="form-default-home-page" name="default_home_page">
        {{ range $key, $value := .default_home_pages }}
            <option value="{{ $key }}" {{ if eq $key $.form.DefaultHomePage }}selected="selected"{{ end }}>{{ t $value }}</option>
        {{ end }}
        </select>

        <label for="form-entry-direction">{{ t "form.prefs.label.entry_sorting" }}</label>
        <select id="form-entry-direction" name="entry_direction">
            <option value="asc" {{ if eq "asc" $.form.EntryDirection }}selected="selected"{{ end }}>{{ t "form.prefs.select.older_first" }}</option>
            <option value="desc" {{ if eq "desc" $.form.EntryDirection }}selected="selected"{{ end }}>{{ t "form.prefs.select.recent_first" }}</option>
        </select>

        <label for="form-entry-order">{{ t "form.prefs.label.entry_order" }}</label>
        <select id="form-entry-order" name="entry_order">
            <option value="published_at" {{ if eq "published_at" $.form.EntryOrder }}selected="selected"{{ end }}>{{ t "form.prefs.select.publish_time" }}</option>
            <option value="created_at" {{ if eq "created_at" $.form.EntryOrder }}selected="selected"{{ end }}>{{ t "form.prefs.select.created_time" }}</option>
        </select>

        <label for="form-categories-sorting-order">{{ t "form.prefs.label.categories_sorting_order" }}</label>
        <select id="form-categories-sorting-order" name="categories_sorting_order">
        {{ range $key, $value := .categories_sorting_options }}
            <option value="{{ $key }}" {{ if eq $key $.form.CategoriesSortingOrder }}selected="selected"{{ end }}>{{ t $value }}</option>
        {{ end }}
        </select>

        <label for="form-gesture-nav">{{ t "form.prefs.label.gesture_nav" }}</label>
        <select id="form-gesture-nav" name="gesture_nav">
            <option value="none" {{ if eq "none" $.form.GestureNav }}selected="selected"{{ end }}>{{ t "form.prefs.select.none" }}</option>
            <option value="tap" {{ if eq "tap" $.form.GestureNav }}selected="selected"{{ end }}>{{ t "form.prefs.select.tap" }}</option>
            <option value="swipe" {{ if eq "swipe" $.form.GestureNav }}selected="selected"{{ end }}>{{ t "form.prefs.select.swipe" }}</option>
        </select>

        <label for="form-entries-per-page">{{ t "form.prefs.label.entries_per_page" }}</label>
        <input type="number" name="entries_per_page" id="form-entries-per-page" value="{{ .form.EntriesPerPage }}" min="1" max="{{ .maxEntriesPerPage }}">

        <label><input type="checkbox" name="keyboard_shortcuts" value="1" {{ if .form.KeyboardShortcuts }}checked{{ end }}> {{ t "form.prefs.label.keyboard_shortcuts" }}</label>

        <label><input type="checkbox" name="entry_swipe" value="1" {{ if .form.EntrySwipe }}checked{{ end }}> {{ t "form.prefs.label.entry_swipe" }}</label>

        <label><input type="checkbox" name="always_open_external_links" value="1" {{ if .form.AlwaysOpenExternalLinks }}checked{{ end }}> {{ t "form.prefs.label.always_open_external_links" }}</label>

        <label><input type="checkbox" name="open_external_links_in_new_tab" value="1" {{ if .form.OpenExternalLinksInNewTab }}checked{{ end }}> {{ t "form.prefs.label.open_external_links_in_new_tab" }}</label>

        <label for="form-custom-css">{{t "form.prefs.label.custom_css" }}</label>
        <textarea id="form-custom-css" name="custom_css" class="code-input" cols="40" rows="10" spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="off">{{ .form.CustomCSS }}</textarea>

        <label for="form-external-font-hosts">{{t "form.prefs.label.external_font_hosts" }}</label>
        <input type="text" id="form-external-font-hosts" name="external_font_hosts" class="code-input" spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="off" value="{{ .form.ExternalFontHosts }}">
        <div class="form-help">{{t "form.prefs.help.external_font_hosts" }}</div>

        <label for="form-custom-js">{{t "form.prefs.label.custom_js" }}</label>
        <textarea id="form-custom-js" name="custom_js" class="code-input" cols="40" rows="10" spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="off">{{ .form.CustomJS }}</textarea>

        <div class="buttons">
            <button type="submit" class="button button-primary" data-label-loading="{{ t "form.submit.saving" }}">{{ t "action.update" }}</button>
        </div>
    </fieldset>

    <fieldset>
        <legend>{{ t "form.prefs.fieldset.global_feed_settings" }}</legend>
        <div class="form-label-row">
            <label for="form-block-filter-rules">
                {{ t "form.feed.label.block_filter_entry_rules" }}
            </label>
            &nbsp;
            <a href=" https://miniflux.app/docs/rules.html#filtering-rules" aria-label="{{ t "action.documentation" (t "form.feed.label.block_filter_entry_rules") }}" {{ if $.user.OpenExternalLinksInNewTab }}target="_blank"{{ end }}>
                {{ icon "external-link" }}
            </a>
        </div>
        <textarea id="form-block-filter-rules" name="block_filter_entry_rules" class="code-input" cols="40" rows="10" spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="off">{{ .form.BlockFilterEntryRules }}</textarea>

        <div class="form-label-row">
            <label for="form-keep-filter-rules">
                {{ t "form.feed.label.keep_filter_entry_rules" }}
            </label>
            &nbsp;
            <a href=" https://miniflux.app/docs/rules.html#filtering-rules" aria-label="{{ t "action.documentation" (t "form.feed.label.keep_filter_entry_rules") }}" {{ if $.user.OpenExternalLinksInNewTab }}target="_blank"{{ end }}>
                {{ icon "external-link" }}
            </a>
        </div>
        <textarea id="form-keep-filter-rules" name="keep_filter_entry_rules" class="code-input" cols="40" rows="10" spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="off">{{ .form.KeepFilterEntryRules }}</textarea>

        <div class="buttons">
            <button type="submit" class="button button-primary" data-label-loading="{{ t "form.submit.saving" }}">{{ t "action.update" }}</button>
        </div>
    </fieldset>
</form>

{{ end }}