{% extends "base.html" %}
{% import "settings_tabs.html" as t %}
{% block title %}Profile{% endblock %}
{% block tabs %}{% call t::tabs("profile") %}{% endblock %}
{% block content %}
<div class="head"><h1>Profile <small>{{ me.username }}</small></h1></div>
{% if let Some(n) = notice %}<p class="note">{{ n }}</p>{% endif %}
{% if let Some(e) = error %}<p class="error">{{ e }}</p>{% endif %}
<form class="card" method="post" action="/settings">
  <input type="hidden" name="_csrf" value="{{ shell.csrf }}">
  <label for="display_name">Display name</label><input type="text" id="display_name" name="display_name" value="{{ me.display_name }}">
  <label for="email">Email</label><input type="email" id="email" name="email" value="{{ me.email }}">
  <p class="small mute">Your email is never shown on your profile.</p>
  <label for="bio">Bio</label><textarea id="bio" name="bio" rows="3" maxlength="280">{{ me.bio }}</textarea>
  <label for="website">Website</label><input type="url" id="website" name="website" value="{{ me.website }}" placeholder="https://">
  <label for="location">Location</label><input type="text" id="location" name="location" value="{{ me.location }}" maxlength="80">
  <p class="small mute">Shown on <a href="/{{ me.username }}">your profile</a>, with a picture drawn from your username.</p>
  <button type="submit">SAVE</button>
</form>
<form class="card" method="post" action="/settings/appearance">
  <input type="hidden" name="_csrf" value="{{ shell.csrf }}">
  <h2>Appearance</h2>
  <fieldset class="choices">
    <legend class="small mute">Theme, remembered in this browser</legend>
    {% for (value, label) in themes %}
    <label class="choice"><input type="radio" name="theme" value="{{ value }}"{% if theme == *value %} checked{% endif %}> {{ label }}</label>
    {% endfor %}
  </fieldset>
  <button type="submit">SAVE</button>
</form>
<form class="card" method="post" action="/settings/password">
  <input type="hidden" name="_csrf" value="{{ shell.csrf }}">
  <h2>Change password</h2>
  <label for="current">Current password</label><input type="password" id="current" name="current" autocomplete="current-password" required>
  <label for="password">New password</label><input type="password" id="password" name="password" autocomplete="new-password" required minlength="10">
  <p class="small mute">Changing it signs out every other session.</p>
  <button type="submit">CHANGE PASSWORD</button>
</form>
{% endblock %}