<div class="card shadow h-100">
  <div class="card-header">
    <div class="row align-items-center">
      <div class="col-12 col-sm-4 h5 mb-2 text-center text-sm-start mb-sm-0">
        <Icon value="bi-person-badge" />
        {% trans %}Access{% endtrans %}
      </div>
      <div class="col-12 col-sm-8 text-center text-sm-end">
        {% if user.username == username %}
          {% if user.mfa_status == user.MFA_DISABLED %}
            <a class="btn btn-primary btn-sm ms-1 mb-2 ssp-external d-print-none mb-sm-0"
               target="_blank"
               href="{{ enable_mfa_url }}">{% trans %}Enable MFA{% endtrans %}</a>
          {% endif %}
          <a class="btn btn-primary btn-sm ms-1 mb-2 ssp-external d-print-none mb-sm-0"
             target="_blank"
             href="{{ change_password_url }}">{% trans %}Change password{% endtrans %}</a>
        {% endif %}
        {% set clipboard_identity -%}
          # {% trans %}Access{% endtrans +%}
          {% trans %}Account{% endtrans %}: {{ user.username }}
          {% trans %}Account Type{% endtrans %}: {{ user.account_type | lower }}
          {% trans %}Account State{% endtrans %}: {{ user.state | lower }}
          {% trans %}MFA{% endtrans %}: {{ user.mfa_status.label }}
          {% trans %}UID{% endtrans %}: {{ user.uid }}
          {% trans %}GID{% endtrans %}: {{ user.gid }}
          {% trans %}AD UPN{% endtrans %}: {{ user.upn }}
          {% trans %}LDAP DN{% endtrans %}: {{ user.dn }}
        {% endset %}
        <CopyButton class="ms-1 mb-2 d-print-none mb-sm-0" text={{ clipboard_identity }} label={{ _("Copy") }} />
      </div>
    </div>
  </div>
  {# Card body #}
  <div class="card-body">
    <div class="row">
      <!-- Account -->
      <div class="row mb-2">
        <div class="col-4 ssp-label">{% trans %}Account{% endtrans %}</div>
        <div class="col-8 ssp-hover-zone">
          <CopyButton class="ssp-hover-show" text={{ user.username }} />
          {{ user.username }}
        </div>
      </div>
      <!-- Account Type -->
      <div class="row mb-2">
        <div class="col-4 ssp-label">{% trans %}Type{% endtrans %}</div>
        <div class="col-8 ssp-hover-zone">
          <CopyButton class="ssp-hover-show" text={{ user.account_type | lower }} />
          {# Include badge with user state #}
          {% set state_bg_table = {"ENABLED": "bg-success", "DISABLED": "bg-danger"} %}
          {% set state_label_table = {'ENABLED':  _('enabled'), 'DISABLED': _('disabled')} %}
          <span class="badge {{ state_bg_table.get(user.state, 'bg-secondary') }}"
                title="{{ state_label_table.get(user.state, user.state) }}">{{ user.account_type | lower }}</span>
        </div>
      </div>
      <!-- MFA -->
      <div class="row mb-2">
        <div class="col-4 ssp-label">
          <span class="ssp-tooltip"
                data-bs-toggle="tooltip"
                data-bs-placement="right"
                title="{{ _("Microsoft Entra ID Multi-Factor Authentication") }}">{% trans %}MFA{% endtrans %}</span>
        </div>
        <div class="col-8 ssp-hover-zone">
          <EnabledBadge value={{ user.mfa_status }} />
        </div>
      </div>
      <!-- UID / GID -->
      <div class="row mb-2 ssp-nerd-only">
        <div class="col-4 ssp-label">{% trans %}UID / GID{% endtrans %}</div>
        <div class="col-8 ssp-hover-zone">
          <CopyButton class="ssp-hover-show" text={{ [user.uid, user.gid] | join(" / ") }} />
          {{ user.uid }} / {{ user.gid }}
        </div>
      </div>
      <!-- AD UPN -->
      <div class="row mb-2 ssp-nerd-only">
        <div class="col-4 ssp-label">
          <span class="ssp-tooltip"
                data-bs-toggle="tooltip"
                data-bs-placement="right"
                title="{{ _("User Principal Name in Microsoft Active Directory") }}">{% trans %}AD UPN{% endtrans %}</span>
        </div>
        <div class="col-8 ssp-hover-zone">
          {% if user.upn %}
            <CopyButton class="ssp-hover-show" text={{ user.upn }} />
            {{ user.upn }}
          {% else %}
            -
          {% endif %}
        </div>
      </div>
      <!-- LDAP DN -->
      <div class="row mb-2 ssp-nerd-only">
        <div class="col-4 ssp-label">
          <span class="ssp-tooltip"
                data-bs-toggle="tooltip"
                data-bs-placement="right"
                title="{{ _("The Distinguished Name is a unique identifier for an entry in an LDAP directory. It shows the full path to the object in the directory tree, from the specific item up to the root.") }}">
            {% trans %}LDAP DN{% endtrans %}
          </span>
        </div>
        <div class="col-8 ssp-hover-zone">
          <CopyButton class="ssp-hover-show" text={{ user.dn }} />
          <div class="text-truncate">{{ user.dn }}</div>
        </div>
      </div>
    </div>
  </div>
</div>
