{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %} Login history / security log. Every authenticated account sees its own;
   an account that administers others (createNewUser) can additionally pick
   one of those from the dropdown -- fetchLoginHistory re-checks ownership
   server-side regardless of what this page offers in the list. {% endcomment %}

{% block title %}Login history{% endblock %}

{% block content %}
<div ng-controller="securityLogController">

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Login history</h1>
      <p class="text-muted mb-0 small">
        Successful and failed sign-in attempts, kept for 90 days.
      </p>
    </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="card">
    <div class="card-body">

      <div class="d-flex flex-wrap gap-2 align-items-center mb-3">
        {% if canViewOthers %}
        <select class="form-select" style="max-width:280px" ng-model="targetUser" ng-change="load()">
          <option value="">My own account ({{ userName }})</option>
          {% for row in manageableUsers %}
          <option value="{{ row }}">{{ row }}</option>
          {% endfor %}
        </select>
        {% endif %}
        <button type="button" class="btn btn-outline-secondary btn-sm" ng-click="load()" ng-disabled="busy">
          <i class="fas fa-rotate me-1"></i>Refresh
        </button>
      </div>

      <div ng-show="busy" class="text-center py-4" ng-cloak>
        <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
        Loading login history&hellip;
      </div>

      <div class="table-responsive" ng-show="!busy && events.length" ng-cloak>
        <table class="table table-hover align-middle">
          <thead>
            <tr>
              <th scope="col">When</th>
              <th scope="col">Result</th>
              <th scope="col">IP address</th>
              <th scope="col">2FA</th>
              <th scope="col">User agent</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="e in events">
              <td class="text-nowrap" ng-bind="e.timestamp"></td>
              <td>
                <span class="badge rounded-pill"
                      ng-class="e.result === 'success' ? 'text-bg-success' : 'text-bg-danger'"
                      ng-bind="e.result"></span>
                <span class="small text-muted ms-1" ng-show="e.reason" ng-bind="e.reason"></span>
              </td>
              <td ng-bind="e.ipAddress"></td>
              <td>
                <i class="fas fa-shield-halved text-success" ng-show="e.twoFactorUsed" title="2FA used"></i>
              </td>
              <td class="small text-muted text-truncate" style="max-width:320px" ng-bind="e.userAgent"></td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="text-center text-muted py-4" ng-show="!busy && !events.length" ng-cloak>
        No login attempts recorded yet.
      </div>

    </div>
  </div>
</div>
{% endblock %}

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