{% extends "base.html" %}
{% block title %}Login Attempts (7 days){% endblock %}
{% block body_class %}themed-bg{% endblock %}

{% block content %}
<div class="container">
  <h1 class="page-title">Security · Login Attempts (7 days)</h1>

  <div class="card" style="padding:20px; width:100%;">

    <p class="muted" style="margin:0 0 16px;">
      Showing successful and failed logins from the last week. Records older than 7 days are automatically removed.
    </p>

    <div class="table-wrap" style="overflow-x:auto;">
      <table class="table" style="width:100%; border-collapse:separate; border-spacing:0 6px;">
        <thead>
          <tr>
            <th style="padding:10px 14px; text-align:left;">Date / Time</th>
            <th style="padding:10px 14px; text-align:left;">Username</th>
            <th style="padding:10px 14px; text-align:left;">IP</th>
            <th style="padding:10px 14px; text-align:left;">Status</th>
          </tr>
        </thead>
        <tbody>
          {% for a in attempts %}
          <tr style="background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.08);">
            <td style="padding:10px 14px;">{{ a.timestamp|date:"Y-m-d H:i:s" }}</td>
            <td style="padding:10px 14px;">{{ a.username }}</td>
            <td style="padding:10px 14px;">{{ a.ip_address|default:"—" }}</td>
            <td style="padding:10px 14px;">
              {% if a.success %}
                <span class="badge badge-success">Success</span>
              {% else %}
                <span class="badge badge-danger">Failed</span>
              {% endif %}
            </td>
          </tr>
          {% empty %}
          <tr><td colspan="4" class="muted" style="padding:12px 14px;">No login attempts in the last 7 days.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

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