{% from 'common/macros.html' import babycode_editor_component %}
{% extends 'base.html' %}
{% block title %}settings{% endblock %}
{% block content %}
{% set disable_avatar = not is_logged_in() %}
<div class='darkbg settings-container'>
  <h1>User settings</h1>
  <form class='avatar-form' method='post' action='{{ url_for('users.set_avatar', username=active_user.username) }}' enctype='multipart/form-data'>
    <span>Set avatar (1mb max)</span>
    <img src='{{ active_user.get_avatar_url() }}'>
    <input id='file' type='file' name='avatar' accept='image/*' required>
    <div>
      <input type='submit' value='Upload avatar' {{ 'disabled' if disable_avatar else '' }}>
      <input type='submit' value='Clear avatar' formaction='{{ url_for('users.clear_avatar', username=active_user.username) }}' formnovalidate {{ 'disabled' if active_user.is_default_avatar() else '' }}>
    </div>
  </form>
  <form method='post'>
    <label for='topic_sort_by'>Sort threads by:</label>
    <select id='topic_sort_by' name='topic_sort_by'>
      <option value='activity' {{ 'selected' if session['sort_by'] == 'activity' else '' }}>Latest activity</option>
      <option value='thread' {{ 'selected' if session['sort_by'] == 'thread' else '' }}>Thread creation date</option>
    </select>
    <label for='status'>Status</label>
    <input type='text' id='status' name='status' value='{{ active_user.status }}' maxlength=100 placeholder='Will be shown under your name. Max 100 characters.'>
    <label for='babycode-content'>Signature</label>
    {{ babycode_editor_component(ta_name='signature', prefill=active_user.signature_original_markup, ta_placeholder='Will be shown under each of your posts', optional=true) }}
    <input autocomplete='off' type='checkbox' id='subscribe_by_default' name='subscribe_by_default' {{ 'checked' if session.get('subscribe_by_default', default=true) else '' }}>
    <label for='subscribe_by_default'>Subscribe to thread by default when responding</label><br>
    <input type='submit' value='Save settings'>
  </form>
  <form method='post' action='{{ url_for('users.change_password', username=active_user.username) }}'>
    <label for="new_password">Change password</label><br>
    <input type="password" id="new_password" name="new_password" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_])(?!.*\s).{10,}" title="10+ chars with: 1 uppercase, 1 lowercase, 1 number, 1 special char, and no spaces" required autocomplete="new-password"><br>
    <label for="new_password2">Confirm new password</label><br>
    <input type="password" id="new_password2" name="new_password2" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_])(?!.*\s).{10,}" title="10+ chars with: 1 uppercase, 1 lowercase, 1 number, 1 special char, and no spaces" required autocomplete="new-password"><br>
    <input class="warn" type="submit" value="Change password">
  </form>
</div>
{% endblock %}