{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %} The signed-in account's own details. Deliberately narrow: name and email
   only. ACL, owner, state and website allowance are not editable here at any
   privilege level, so this page can never become a self-elevation path. {% endcomment %}

{% block title %}Profile{% endblock %}

{% block content %}
{% comment %} Current values are handed to the controller through data attributes so that
   Django does the escaping; never interpolate server text into a script body. {% endcomment %}
<div ng-controller="profileController" id="cpProfile"
     data-first-name="{{ firstName }}"
     data-last-name="{{ lastName }}"
     data-email="{{ email }}">

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Your profile</h1>
      <p class="text-muted mb-0 small">
        Signed in as <code>{{ profileUserName }}</code>.
      </p>
    </div>
    <div class="d-flex gap-2">
      <a href="/users/changePassword" class="btn btn-outline-secondary">
        <i class="fas fa-key me-1"></i>Change password
      </a>
      <a href="/base/twoFactorAuth" class="btn btn-outline-secondary">
        <i class="fas fa-shield-halved me-1"></i>Two-factor
      </a>
    </div>
  </div>

  <div class="alert alert-danger py-2 px-3" ng-show="errorMessage" ng-cloak role="alert">
    <i class="fas fa-triangle-exclamation me-1"></i>
    <span ng-bind="errorMessage"></span>
  </div>

  <div class="row g-4">
    <div class="col-lg-7">
      <div class="card h-100">
        <div class="card-body">
          <h2 class="h6 mb-3">Contact details</h2>

          <form novalidate ng-submit="save()">
            <div class="row g-3">
              <div class="col-sm-6">
                <label class="form-label" for="pfFirst">First name</label>
                <input type="text" class="form-control" id="pfFirst" maxlength="50"
                       ng-model="profile.firstName" autocomplete="given-name">
              </div>
              <div class="col-sm-6">
                <label class="form-label" for="pfLast">Last name</label>
                <input type="text" class="form-control" id="pfLast" maxlength="50"
                       ng-model="profile.lastName" autocomplete="family-name">
              </div>
              <div class="col-12">
                <label class="form-label" for="pfEmail">Email</label>
                <input type="email" class="form-control" id="pfEmail" maxlength="254"
                       ng-model="profile.email" autocomplete="email" required>
                <div class="form-text">
                  Used for password resets and panel notifications.
                </div>
              </div>
            </div>

            <button type="submit" class="btn btn-primary mt-4" ng-disabled="busy">
              <span ng-show="busy" class="spinner-border spinner-border-sm me-1"
                    role="status" aria-hidden="true"></span>
              <span ng-bind="busy ? 'Saving…' : 'Save profile'"></span>
            </button>
          </form>
        </div>
      </div>
    </div>

    <div class="col-lg-5">
      <div class="card h-100">
        <div class="card-body">
          <h2 class="h6 mb-3">Account</h2>
          <dl class="row small mb-4">
            <dt class="col-5">Username</dt>
            <dd class="col-7"><code>{{ profileUserName }}</code></dd>
            <dt class="col-5">Role</dt>
            <dd class="col-7">
              <span class="badge rounded-pill
                {% if roleName == 'admin' %}text-bg-danger
                {% elif roleName == 'reseller' %}text-bg-warning
                {% else %}text-bg-secondary{% endif %}">{{ roleName }}</span>
            </dd>
            <dt class="col-5">ACL</dt>
            <dd class="col-7">{{ aclName }}</dd>
            <dt class="col-5">Owner</dt>
            <dd class="col-7">{{ ownerName|default:"—" }}</dd>
            <dt class="col-5">Websites</dt>
            <dd class="col-7">{{ websites }}</dd>
            <dt class="col-5">Two-factor</dt>
            <dd class="col-7">
              {% if twoFA %}
                <span class="badge rounded-pill text-bg-success">Enabled</span>
              {% else %}
                <span class="badge rounded-pill text-bg-secondary">Not enabled</span>
              {% endif %}
            </dd>
            <dt class="col-5">Last login</dt>
            <dd class="col-7">{{ lastLogin }}</dd>
            <dt class="col-5">Member since</dt>
            <dd class="col-7">{{ dateCreated }}</dd>
          </dl>

          <p class="small text-muted mb-0">
            <i class="fas fa-lock me-1"></i>
            Your role, ACL and owner are shown here but cannot be edited from
            this page &mdash; nobody may change their own ACL, and only an
            administrator may change an account's owner.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{% static 'userManagement/userManagement.js' %}"></script>
{% endblock %}