{% extends "user-settings.html" %}

{% import '_form_macros.html' as macros %}

{% block head %}
  {{ super() }}
  {{ macros.selectize_css() }}
{% endblock %}
{% block settings_content %}
  <div class="card-body border-bottom">
    <img src="{{ gravatar(user.mail if user.mail else 'default', 100) }}" class="pb-2" alt="user avatar"/>
    {% set buttontext = _('Change Avatar')%}
    {%- if OPENID is defined %}
    <form method="GET" action="https://www.libravatar.org/openid/login/">
      <input type="hidden" name="openid_identifier" value="{{ OPENID % (user.username) }}">
      <input name="change-avatar" type="submit" value="{{ buttontext }}" class="btn btn-sm btn-outline-primary">
    </form>
    {%- else %}
    <a href="https://www.libravatar.org/accounts/login/" class="btn btn-sm btn-outline-primary">{{ buttontext }}</a>
    {%- endif %}
  </div>
<form class="needs-validation" action="{{ url_for('.user_settings_profile', username=user.username) }}" method="post" novalidate>
    {{ form.csrf_token }}
    <div class="card-body">
      <div class="form-row">
        <div class="form-group col">{{ macros.with_errors(form.firstname) }}</div>
        <div class="form-group col">{{ macros.with_errors(form.lastname) }}</div>
      </div>
      <div class="form-group">{{ macros.with_errors(form.pronouns) }}</div>
      <div class="form-group">{{ macros.with_errors(form.locale, class="custom-select") }}</div>
      <div class="form-group">{{ macros.with_errors(form.timezone, class="custom-select") }}</div>
      <div class="form-group">{{ macros.with_errors(form.mail) }}</div>
      <div class="form-group">{{ macros.with_errors(form.website_url) }}</div>
      <div class="form-group">{{ macros.with_errors(form.ircnick) }}</div>
      <div class="form-group">{{ macros.with_errors(form.github) }}</div>
      <div class="form-group">{{ macros.with_errors(form.gitlab) }}</div>
      <div class="form-group">{{ macros.with_errors(form.rhbz_mail) }}</div>
      <div class="form-group form-check">{{ macros.with_errors(form.is_private) }}</div>
    </div>
    <div class="card-footer d-flex justify-content-between">
      <div>{{ macros.non_field_errors(form) }}</div>
      <button class="btn btn-primary" id="submit" type="submit" tabindex="9">{{_("Save")}}</button>
    </div>
</form>
{% endblock %}

{% block scripts %}
  {{ super () }}
  {{ macros.unsaved_changes() }}
  {{ macros.selectize() }}
  <script nonce="{{ csp_nonce() }}">
  $('#ircnick').selectize({
    plugins: ['remove_button'],
    delimiter: ',',
    persist: false,
    create: function(input) {
        return {
            value: input,
            text: input
        }
    }
  });
  $('#pronouns').selectize({
    delimiter: ',',
    options: [
      {value:"she / her / hers", text:"she / her / hers"},
      {value:"he / him / his", text:"he / him / his"},
      {value:"they / them / theirs", text:"they / them / theirs"},
    ],
    persist: false,
    maxItems: 1,
    create: function(input) {
        return {
            value: input,
            text: input
        }
    }
  });
  $('#locale').selectize({
    sortField	: [{field: 'value', direction: 'asc'}],
  });
  $('#timezone').selectize({
    sortField	: [{field: 'value', direction: 'asc'}],
  });
  </script>
{% endblock %}
