{% extends "base.html" %}
{% block title %}Profile — Supavision{% endblock %}
{% block content %}
<div class="page-header">
  <h2>My Account</h2>
  <p class="page-subtitle">Manage your account settings and active sessions.</p>
</div>

{# ── Account Info ── #}
<div class="settings-section">
  <h4>Account</h4>
  <div class="profile-info">
    <div class="profile-field">
      <span class="profile-field-label">Email</span>
      <span class="profile-field-value">{{ profile_user.email }}</span>
    </div>
    <div class="profile-field">
      <span class="profile-field-label">Name</span>
      <span class="profile-field-value">
        <form hx-post="/profile/name" hx-swap="none"
              data-success-msg="Name updated" data-error-msg="Failed to update name"
              style="display:flex; gap: var(--sp-2); align-items:center;">
          <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
          <input type="text" name="name" value="{{ profile_user.name }}"
                 maxlength="100" class="form-input"
                 style="flex:1; min-width:0;" placeholder="Your name">
          <button type="submit" class="btn btn-sm btn-outline">Save</button>
        </form>
      </span>
    </div>
    <div class="profile-field">
      <span class="profile-field-label">Role</span>
      <span class="profile-field-value"><span class="badge badge--type">{{ profile_user.role }}</span></span>
    </div>
    <div class="profile-field">
      <span class="profile-field-label">Member since</span>
      <span class="profile-field-value"><span data-timestamp="{{ profile_user.created_at }}">{{ profile_user.created_at }}</span></span>
    </div>
    <div class="profile-field">
      <span class="profile-field-label">Last login</span>
      <span class="profile-field-value">
        {% if profile_user.last_login_at %}
        <span data-timestamp="{{ profile_user.last_login_at }}">{{ profile_user.last_login_at }}</span>
        {% else %}
        —
        {% endif %}
      </span>
    </div>
  </div>
</div>

{# ── Change Password ── #}
<div class="settings-section">
  <h4>Change Password</h4>
  {% if password_error %}
  <div class="alert alert--danger mb-4">{{ password_error }}</div>
  {% endif %}
  {% if password_success %}
  <div class="alert alert--success mb-4">{{ password_success }}</div>
  {% endif %}
  <form method="post" action="/profile/password">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <div class="form-grid">
      <div class="form-group">
        <label class="form-label" for="current_password">Current Password</label>
        <input class="form-input" type="password" id="current_password" name="current_password" required>
      </div>
      <div class="form-group"></div>
      <div class="form-group">
        <label class="form-label" for="new_password">New Password</label>
        <input class="form-input" type="password" id="new_password" name="new_password" required minlength="8">
        <span class="form-hint">Minimum 8 characters.</span>
      </div>
      <div class="form-group">
        <label class="form-label" for="confirm_password">Confirm New Password</label>
        <input class="form-input" type="password" id="confirm_password" name="confirm_password" required minlength="8">
      </div>
    </div>
    <div class="form-actions">
      <button type="submit" class="btn">Update Password</button>
    </div>
  </form>
</div>

{# ── Active Sessions ── #}
<div class="settings-section">
  <h4>Active Sessions</h4>
  <p class="text-muted text-sm mb-4">These are the devices currently signed in to your account.</p>
  {% if sessions %}
  <table class="table">
    <thead>
      <tr>
        <th>IP Address</th>
        <th>Browser</th>
        <th>Created</th>
        <th>Last Active</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
    {% for s in sessions %}
      <tr>
        <td class="text-muted">{{ s.ip_address or '—' }}</td>
        <td class="text-sm text-muted">{{ s.user_agent[:50] if s.user_agent else '—' }}{% if s.user_agent and s.user_agent|length > 50 %}…{% endif %}</td>
        <td class="text-muted"><span data-timestamp="{{ s.created_at }}">{{ s.created_at }}</span></td>
        <td class="text-muted"><span data-timestamp="{{ s.last_activity_at }}">{{ s.last_activity_at }}</span></td>
        <td>
          {% if s.id == current_session_id %}
          <span class="badge badge--healthy">Current</span>
          {% else %}
          <button class="btn btn-sm btn-outline"
                  hx-post="/profile/sessions/{{ s.id }}/revoke" hx-swap="none"
                  data-success-msg="Session revoked" data-error-msg="Failed">
            Revoke
          </button>
          {% endif %}
        </td>
      </tr>
    {% endfor %}
    </tbody>
  </table>
  {% else %}
  <p class="text-muted">No active sessions found.</p>
  {% endif %}
</div>
{% endblock %}