{% extends "tethys_portal/user/profile.html" %}

{% load django_bootstrap5 %}

{% block title %}{{ block.super }} - User Settings{% endblock %}

{% block styles %}
  {{ block.super }}
  <style>
    a:hover {
      cursor:pointer;
    }
  </style>
{% endblock %}

{% block edit_button %}
{% endblock %}

{% block name_parameters %}
  <div class="col-xl-8">
    <div class="row">
      <div class="col">
        {% bootstrap_field form.first_name layout='horizontal' label_class='ps-0 fw-bold' horizontal_label_class='col-sm-4' horizontal_field_class='col-sm-8 ps-0' %}
      </div>
    </div>
    <div class="row">
      <div class="col">
        {% bootstrap_field form.last_name layout='horizontal' label_class='ps-0 fw-bold' horizontal_label_class='col-sm-4' horizontal_field_class='col-sm-8 ps-0' %}
      </div>
    </div>
  </div>
{% endblock %}

{% block email_parameters %}
  <div class="col-xl-8">
    <div class="row">
      <div class="col">
        {% bootstrap_field form.email layout='horizontal' label_class='ps-0 fw-bold' horizontal_label_class='col-sm-4' horizontal_field_class='col-sm-8 ps-0' %}
      </div>
    </div>
  </div>
{% endblock %}

{% block credential_parameters %}
<div class="profile-parameters col-xl-8">
  <div class="row">
    <div class="col">
      <div class="row mb-3">
        <label class="col-sm-4 col-form-label ps-0 fw-bold" for="id_username">Username:</label>
        <div class="col-sm-8 ps-0"><input class="form-control" type="text" value="{{ user.username }}" aria-label="{{ user.username }}" disabled readonly id="id_username" title="Usernames cannot be changed."></div>
      </div>
    </div>
  </div>
  <dl class="row">
    {% if user.has_usable_password %}
    <dt class="col-sm-4">Password:</dt>
    <dd class="col-sm-8"><a href="{% url 'user:change_password' %}" class="btn btn-outline-primary btn-sm">Change Password</a></dd>
    
    <dt class="col-sm-4">2-Step Verification: </dt>
    <dd class="col-sm-8"><a class="btn btn-outline-primary btn-sm" href="{% url 'mfa_home' %}">Configure</a></dd>
    {% endif %}
  </dl>
</div>
{% endblock %}

{% block social_parameters %}
<div class="profile-parameters col-xl-8">
  <dl class="row">
    <dt class="col-sm-4">Connected:</dt>
    {{association.provider}}
    {% if backends.associated %}
      {% if user.has_usable_password or backends.associated|length > 1 %}
        {% include 'tethys_portal/user/social_labels.html' with backends=backends.associated action='disconnect' %}
      {% else %}
        {% include 'tethys_portal/user/social_labels.html' with backends=backends.associated %}
      {% endif %}
    {% else %}
      <dd class="col-sm-8">None</dd>
    {% endif %}
    </span>
    <dt class="col-sm-4">Not Connected:</dt>
    {% if backends.not_associated %}
      {% include 'tethys_portal/user/social_labels.html' with backends=backends.not_associated action='connect' %}
    {% else %}
      <dd class="col-sm-8">None</dd>
    {% endif %}
  </dl>
</div>
{% endblock %}

{% block extend_account_parameters %}
<dt class="col-sm-4">Delete Account:</dt>
<dd class="col-sm-8"><a class="btn btn-outline-danger btn-sm" href="{% url 'user:delete' %}">Delete Account</a></dd>
{% endblock %}

{% block extend_storage_parameters %}
  <dt class="col-sm-4">Manage Storage:</dt>
  <dd class="col-sm-8"><a class="btn btn-outline-primary btn-sm" href="{% url 'user:manage_storage' %}">Manage Storage</a></dd>
{% endblock %}

{% block profile_sections %}
  <form role="form" class="row" method="post">
    {% csrf_token %}
    {{ block.super }}
    <div class="profile-section last">
      <div id="settings-buttons" class="row">
        <div class="col-md-12">
          <div class="btn-toolbar float-end mb-3" role="toolbar">
            <a href="{% url 'user:profile' %}" class="btn btn-outline-secondary btn-lg me-2">Cancel</a>
            <button type="submit" id="user-settings-submit" class="btn btn-outline-success btn-lg" name="user-settings-submit">Save</button>
          </div>
        </div>
      </div>
    </div>
  </form>
{% endblock %}