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

{{ define "content"}}
<section class="page-header">
    <h1>{{ t "page.settings.title" }}</h1>
    {{ template "settings_menu" dict "user" .user }}
</section>

<form method="post" autocomplete="off" action="{{ route "updateSettings" }}">
    <input type="hidden" name="csrf" value="{{ .csrf }}">

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

    <label for="form-username">{{ t "form.user.label.username" }}</label>
    <input type="text" name="username" id="form-username" value="{{ .form.Username }}" required>

    <label for="form-password">{{ t "form.user.label.password" }}</label>
    <input type="password" name="password" id="form-password" value="{{ .form.Password }}" autocomplete="new-password">

    <label for="form-confirmation">{{ t "form.user.label.confirmation" }}</label>
    <input type="password" name="confirmation" id="form-confirmation" value="{{ .form.Confirmation }}" autocomplete="new-password">

    <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 $key, $value := .timezones }}
        <option value="{{ $key }}" {{ if eq $key $.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>

    <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-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">

    <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="show_reading_time" value="1" {{ if .form.ShowReadingTime }}checked{{ end }}> {{ t "form.prefs.label.show_reading_time" }}</label>

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

    <label>{{t "form.prefs.label.custom_css" }}</label><textarea name="custom_css" cols="40" rows="5">{{ .form.CustomCSS }}</textarea>
    <div class="buttons">
        <button type="submit" class="button button-primary" data-label-loading="{{ t "form.submit.saving" }}">{{ t "action.update" }}</button>
    </div>
</form>

{{ if hasOAuth2Provider "google" }}
<div class="panel">
    {{ if hasKey .user.Extra "google_id" }}
        <a href="{{ route "oauth2Unlink" "provider" "google" }}">{{ t "page.settings.unlink_google_account" }}</a>
    {{ else }}
        <a href="{{ route "oauth2Redirect" "provider" "google" }}">{{ t "page.settings.link_google_account" }}</a>
    {{ end }}
</div>
{{ else if hasOAuth2Provider "oidc" }}
<div class="panel">
    {{ if hasKey .user.Extra "oidc_id" }}
        <a href="{{ route "oauth2Unlink" "provider" "oidc" }}">{{ t "page.settings.unlink_oidc_account" }}</a>
    {{ else }}
        <a href="{{ route "oauth2Redirect" "provider" "oidc" }}">{{ t "page.settings.link_oidc_account" }}</a>
    {{ end }}
</div>
{{ end }}

{{ end }}