{% extends "users/settings/settings.html.j2" %}

{% block admin_settings %}
<div class="col s12"></div>

<div class="col s12 l4">
  <h4>Administrator Settings</h4>
  <p>Here the Confirmation Status of the user can be set manually and a special role can be assigned.</p>
</div>
<div class="col s12 l8">
  <br>
  <ul class="collapsible no-autoinit settings-collapsible">
    <li>
      <div class="collapsible-header" style="justify-content: space-between;">
        <span>Confirmation status</span>
        <i class="caret material-icons">keyboard_arrow_right</i>
      </div>
      <div class="collapsible-body">
        <div style="overflow: auto;">
          <p class="left"><i class="material-icons">check</i></p>
          <p class="left" style="margin-left: 10px;">
            Confirmed<br>
            <span class="light">Change confirmation status manually.</span>
          </p>
          <br class="hide-on-med-and-down">
          <div class="switch right">
            <label>
              <input {% if user.confirmed %}checked{% endif %} id="user-confirmed-switch" type="checkbox">
              <span class="lever"></span>
            </label>
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="collapsible-header" style="justify-content: space-between;">
        <span>Role</span>
        <i class="caret material-icons">keyboard_arrow_right</i>
      </div>
      <div class="collapsible-body">
        <form method="POST">
          {{ update_user_form.hidden_tag() }}
          {{ wtf.render_field(update_user_form.role, material_icon='manage_accounts') }}
          <div class="right-align">
            {{ wtf.render_field(update_user_form.submit, material_icon='send') }}
          </div>
        </form>
      </div>
    </li>
  </ul>
</div>
{% endblock admin_settings %}

{% block scripts %}
{{ super() }}
<script>
let userConfirmedSwitchElement = document.querySelector('#user-confirmed-switch');
userConfirmedSwitchElement.addEventListener('change', (event) => {
  let newConfirmed = userConfirmedSwitchElement.checked;
  nopaque.requests.admin.users.entity.confirmed.update({{ user.hashid|tojson }}, newConfirmed)
    .catch((response) => {
      userConfirmedSwitchElement.checked = !userConfirmedSwitchElement;
    });
});
</script>
{% endblock scripts %}