{% 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="#repositories">New repositories</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">
  <label for="bluesky">Bluesky</label><input type="text" id="bluesky" name="bluesky" value="{{ me.bluesky }}" placeholder="andy.bsky.social">
  <label for="mastodon">Mastodon</label><input type="text" id="mastodon" name="mastodon" value="{% if !me.mastodon.is_empty() %}@{{ me.mastodon }}{% endif %}" placeholder="@andy@mastodon.social">
  <label for="github">GitHub</label><input type="text" id="github" name="github" value="{{ me.github }}" placeholder="andymccall">
  <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="repositories" method="post" action="/settings/repositories">
  <input type="hidden" name="_csrf" value="{{ shell.csrf }}">
  <h2>New repositories</h2>
  <label for="default_bookmark">Default bookmark</label>
  <input type="text" id="default_bookmark" name="default_bookmark" value="{{ default_bookmark }}" placeholder="{{ site_bookmark }}" pattern="[A-Za-z0-9][A-Za-z0-9._-]{0,63}" autocomplete="off" spellcheck="false">
  <p class="small mute">The bookmark your new repositories start with, such as <code>develop</code>. Left empty, they take this site's: <code>{{ site_bookmark }}</code>. An organisation sets its own under its settings.</p>
  <button type="submit">SAVE</button>
</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>
  <fieldset class="choices">
    <legend class="small mute">Background, behind the dashboard: drifting marks for your repositories' last 30 days</legend>
    {% for (value, label) in backdrops %}
    <label class="choice"><input type="radio" name="backdrop" value="{{ value }}"{% if backdrop == *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 %}