{% from 'common/macros.html' import babycode_editor_component, badge_editor_single, sortable_list %}
{% extends 'base.html' %}
{% block title %}settings{% endblock %}
{% block content %}
{% set disable_avatar = not is_logged_in() %}
<div class='darkbg'>
  <h1>User settings</h1>
  <div class="settings-grid">
    <fieldset class="hfc">
      <legend>Set avatar</legend>
      <form class='avatar-form' method='post' action='{{ url_for('users.set_avatar', username=active_user.username) }}' enctype='multipart/form-data'>
        <img src='{{ active_user.get_avatar_url() }}'>
        <input id='file' type='file' name='avatar' accept='image/*' required>
        <div>
          <input type='submit' value='Save 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>
        <span>1MB maximum size. Avatar will be cropped to square.</span>
      </form>
    </fieldset>
    <fieldset class="hfc">
      <legend>Change password</legend>
      <form method='post' action='{{ url_for('users.change_password', username=active_user.username) }}'>
        <label for="new_password">New 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>
    </fieldset>
    <fieldset class="hfc">
      <legend>Personalization</legend>
      <form method='post'>
        <label for='theme'>Theme (beta)</label>
        <select autocomplete='off' id='theme' name='theme'>
          {% for theme in config.allowed_themes %}
            <option value="{{ theme }}" {{ 'selected' if get_prefers_theme() == theme }}>{{ theme | theme_name }}</option>
          {% endfor %}
        </select>
        <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='display_name'>Display name</label>
        <input type='text' id='display_name' name='display_name' value='{{ active_user.display_name }}' pattern="(?:[\w!#$%^*\(\)\-_=+\[\]\{\}\|;:,.?\s]{3,50})?" title='3-50 characters, no @, no <>, no &' placeholder='Optional. Will be shown in place of username.' autocomplete='off'></input>
        <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.'>
        <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>
        <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, banned_tags=SIG_BANNED_TAGS) }}
        <input type='submit' value='Save settings'>
      </form>
    </fieldset>
    <fieldset class="hfc">
      <legend>Badges</legend>
      <a href="{{ url_for('guides.guide_page', category='user-guides', slug='settings', _anchor='badges')}}">Badges help</a>
      <bitty-7-0 data-connect="{{ '/static/js/bitties/pyrom-bitty.js' | cachebust }} BadgeEditorForm" data-listeners="click input submit change">
        <form data-use="badgeEditorPrepareSubmit" data-init='loadBadgeEditor' method='post' enctype='multipart/form-data' action='{{ url_for('users.save_badges', username=active_user.username) }}'>
          <div>Loading badges&hellip;</div>
          <div>If badges fail to load, JS may be disabled.</div>
        </form>
      </bitty-7-0>
    </fieldset>
  </div>
  <div>
    <a class="linkbutton critical" href="{{ url_for('users.delete_page', username=active_user.username) }}">Delete account</a>
  </div>
</div>

<template id='badge-editor-template'>
{{ badge_editor_single(options=uploads) }}
</template>

<template id="badges-list-template">
{{ sortable_list(attr={'data-receive': 'addBadge'}) }}
</template>
{% endblock %}