{% 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 %}

<div class="sectioned">

<nav class="section-nav" aria-label="Sections">

  <a href="#profile">Profile</a>

  <a href="#picture">Picture</a>

  <a href="#appearance">Appearance</a>

  <a href="#password">Password</a>

</nav>

<div class="sections">

<form id="verify-email" method="post" action="/settings/email/verify" hidden><input type="hidden" name="_csrf" value="{{ shell.csrf }}"></form>

<form class="card" id="profile" 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. {% if me.email.is_empty() %}Add one to receive notification email and reset your password by email.{% else if me.email_verified %}<span class="sig sig-valid">✔</span> Verified.{% else %}<span class="sig sig-unsigned">○</span> Not verified yet{% if mail %}: use the link we sent, or <button type="submit" form="verify-email" class="linkish">send a new one</button>{% endif %}.{% endif %}</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 picture-card" id="picture" method="post" action="/settings/avatar" enctype="multipart/form-data">

  <input type="hidden" name="_csrf" value="{{ shell.csrf }}">

  <h2>Picture</h2>

  <div class="picture-row">

    <img class="avatar xl" src="/avatar/{{ me.username }}?v={{ me.avatar }}" alt="Your picture" width="96" height="96">

    <div>

      <label for="picture-file">Upload a photo</label>

      <input type="file" id="picture-file" name="picture" accept="image/png,image/jpeg,image/webp">

      <p class="small mute">PNG, JPEG or WebP, up to 5 MiB. It is cropped to the middle square and resized to 400×400.{% if me.avatar.is_empty() %} Until then you have a picture drawn from your username.{% endif %}</p>

      <button type="submit" name="action" value="upload">UPLOAD</button>

      {% if !me.avatar.is_empty() %}<button type="submit" name="action" value="remove" class="danger-btn">REMOVE</button>{% endif %}

    </div>

  </div>

</form>

<form class="card" id="appearance" 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" id="password" 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>

</div>

</div>

{% endblock %}