{{ define "title"}}{{ t "Settings" }}{{ end }}

{{ define "content"}}
<section class="page-header">
    <h1>{{ t "Settings" }}</h1>
    <ul>
        <li>
            <a href="{{ route "sessions" }}">{{ t "Sessions" }}</a>
        </li>
        {{ if .user.IsAdmin }}
        <li>
            <a href="{{ route "users" }}">{{ t "Users" }}</a>
        </li>
        {{ end }}
        <li>
            <a href="{{ route "about" }}">{{ t "About" }}</a>
        </li>
    </ul>
</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 "Username" }}</label>
    <input type="text" name="username" id="form-username" value="{{ .form.Username }}" required>

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

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

    <label for="form-language">{{ t "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 "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 "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="buttons">
        <button type="submit" class="button button-primary" data-label-loading="{{ t "Loading..." }}">{{ t "Update" }}</button>
    </div>
</form>

{{ end }}