{% extends "base.html" %}
{% from "macros.html" import icon, btn, badge %}
{% block title %}{{ t('My Profile') }}{% endblock %}

{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title">{{ t('My Profile') }}</h1>
    <p class="page-subtitle">{{ request.user.email }}</p>
  </div>
</div>

<div class="dashboard-grid">

  {# Account form #}
  <form method="post" id="profile-form" action="{{ admin_prefix }}/me"
        data-block="#page-body" data-push-url data-disable data-indicator="#top-loader">
    {{ request.csrf_input() }}

    <div class="card" style="overflow:hidden">
      {% if errors_global %}
        <div class="alert alert-danger" style="margin: 24px 24px 0;">
          {{ icon('alert-triangle', 18) }} {{ errors_global }}
        </div>
      {% endif %}
      <div style="padding:14px 20px;background:var(--surface-2);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;font-size:0.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--fg-3)">
        {{ icon('user', 12) }} {{ t('Account Details') }}
      </div>
      <div style="padding:24px;display:flex;flex-direction:column;gap:20px">
        {% if form._fields.email %}
          <div class="form-group">
            <label class="form-label">{{ t(form._fields.email._label) }}</label>
            {{ form._fields.email.input(autocomplete='username') }}
            {% if form._fields.email._error %}
              <div class="form-error" style="margin-top:8px; color:var(--danger); font-size:0.85rem; display:flex; align-items:center; gap:6px; font-weight:500;">
                {{ icon('x', 14) }} {{ form._fields.email._error }}
              </div>
            {% endif %}
          </div>
        {% endif %}
        {% if form._fields.name %}
          <div class="form-group">
            <label class="form-label">{{ t(form._fields.name._label) }}</label>
            {{ form._fields.name.input(autocomplete='name') }}
            {% if form._fields.name._error %}
              <div class="form-error" style="margin-top:8px; color:var(--danger); font-size:0.85rem; display:flex; align-items:center; gap:6px; font-weight:500;">
                {{ icon('x', 14) }} {{ form._fields.name._error }}
              </div>
            {% endif %}
          </div>
        {% endif %}
      </div>

      <div style="padding:14px 20px;background:var(--surface-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;font-size:0.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--fg-3)">
        {{ icon('shield', 12) }} {{ t('Security') }}
        <span class="muted" style="font-weight:400;text-transform:none;margin-left:auto">{{ t('Leave blank to keep current password') }}</span>
      </div>
      <div style="padding:24px;display:flex;flex-direction:column;gap:20px">
        <div class="form-group">
          <label class="form-label">{{ t(form._fields.current_password._label) }}</label>
          {{ form._fields.current_password.input(autocomplete='current-password') }}
          {% if form._fields.current_password._error %}
            <div class="form-error" style="margin-top:8px; color:var(--danger); font-size:0.85rem; display:flex; align-items:center; gap:6px; font-weight:500;">
              {{ icon('x', 14) }} {{ form._fields.current_password._error }}
            </div>
          {% endif %}
        </div>
        <div style="display:grid; grid-template-columns: 1fr 1fr; gap:20px">
          <div class="form-group">
            <label class="form-label">{{ t(form._fields.new_password._label) }}</label>
            {{ form._fields.new_password.input(autocomplete='new-password') }}
            {% if form._fields.new_password._error %}
              <div class="form-error" style="margin-top:8px; color:var(--danger); font-size:0.85rem; display:flex; align-items:center; gap:6px; font-weight:500;">
                {{ icon('x', 14) }} {{ form._fields.new_password._error }}
              </div>
            {% endif %}
          </div>
          <div class="form-group">
            <label class="form-label">{{ t(form._fields.confirm_password._label) }}</label>
            {{ form._fields.confirm_password.input(autocomplete='new-password') }}
            {% if form._fields.confirm_password._error %}
              <div class="form-error" style="margin-top:8px; color:var(--danger); font-size:0.85rem; display:flex; align-items:center; gap:6px; font-weight:500;">
                {{ icon('x', 14) }} {{ form._fields.confirm_password._error }}
              </div>
            {% endif %}
          </div>
        </div>
      </div>

      <div class="form-footer">
        <div class="form-footer-left">
          {{ btn(t('Update Profile'), 'primary', icon_name='check', type='submit') }}
          <a href="{{ admin_prefix }}" class="btn btn-default" data-spa>
            {{ t('Cancel') }}
          </a>
        </div>
      </div>
    </div>
  </form>

  {# 2FA card #}
  <div class="card" style="overflow:hidden">
    <div style="padding:14px 20px;background:var(--surface-2);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;font-size:0.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--fg-3)">
      {{ icon('shield', 12) }} {{ t('Two-Factor Authentication') }}
      <div style="margin-left:auto">
        {% if twofa_enabled %}
          {{ badge(t('Active'), 'success') }}
        {% else %}
          {{ badge(t('Inactive'), 'error') }}
        {% endif %}
      </div>
    </div>
    <div style="padding:32px; text-align:center">
      <div style="width:64px; height:64px; border-radius:50%; background:var(--bg); display:flex; align-items:center; justify-content:center; margin:0 auto 20px">
        {{ icon('shield', 32, 'empty-icon') }}
      </div>
      
      {% if twofa_enabled %}
        <h3 style="font-weight:700; margin-bottom:8px">{{ t('2FA is Enabled') }}</h3>
        <p style="color:var(--fg-2);font-size:0.875rem;margin-bottom:28px; line-height:1.6">
          {{ t('Your account is secured with an extra layer of protection using a TOTP authenticator app.') }}
        </p>
        <div class="divider"></div>
        <form method="post" action="{{ admin_prefix }}/2fa-disable" 
              data-confirm="{{ t('Are you sure you want to disable two-factor authentication? This will make your account less secure.') }}"
              data-block="#page-body">
          {{ request.csrf_input() }}
          <div class="form-group" style="text-align:left; margin-bottom:20px">
            <label class="form-label">{{ t('Current Password') }}</label>
            <input type="password" name="current_password" autocomplete="current-password" required placeholder="{{ t('Enter password to confirm…') }}">
          </div>
          {{ btn(t('Disable 2FA'), 'danger', icon_name='trash', type='submit') }}
        </form>
      {% else %}
        <h3 style="font-weight:700; margin-bottom:8px">{{ t('Secure Your Account') }}</h3>
        <p style="color:var(--fg-2);font-size:0.875rem;margin-bottom:28px; line-height:1.6">
          {{ t('Two-factor authentication adds an additional layer of security to your account by requiring more than just a password to log in.') }}
        </p>
        <a href="{{ admin_prefix }}/2fa-setup" class="btn btn-primary btn-lg" data-spa>
          {{ icon('shield', 14) }} {{ t('Setup Two-Factor') }}
        </a>
      {% endif %}
    </div>
  </div>

  {# Active Sessions Card #}
  <div class="card" style="overflow:hidden">
    <div style="padding:14px 20px;background:var(--surface-2);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;font-size:0.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--fg-3)">
      {{ icon('monitor', 12) }} {{ t('Active Sessions') }}
      <div style="margin-left:auto">
        {{ badge(active_sessions|length, 'info') }}
      </div>
    </div>
    <div style="padding:24px">
      {% if active_sessions %}
        {% set has_other = [] %}
        <div style="display:flex; flex-direction:column; gap:12px">
          {% for sess in active_sessions %}
            <div style="display:flex; align-items:center; justify-content:space-between; padding:14px 18px; background:var(--surface); border:1px solid {% if sess.sid == current_sid %}var(--success){% else %}var(--border){% endif %}; border-radius:var(--r-lg); box-shadow:var(--shadow-sm); transition:all var(--trans)">
              <div style="display:flex; align-items:center; gap:16px">
                <div style="width:42px; height:42px; border-radius:50%; background:var(--surface-2); display:flex; align-items:center; justify-content:center; color:{% if sess.sid == current_sid %}var(--success-fg){% else %}var(--fg-2){% endif %}; flex-shrink:0; border:1px solid var(--border)">
                  {% if sess.is_mobile %}
                    {{ icon('smartphone', 20) }}
                  {% else %}
                    {{ icon('laptop', 20) }}
                  {% endif %}
                </div>
                <div>
                  <div style="font-weight:600; font-size:0.9rem; display:flex; align-items:center; gap:8px; flex-wrap:wrap">
                    <span title="{{ sess.user_agent }}">{{ sess.browser_name }}{% if sess.os_name %} ({{ sess.os_name }}){% endif %}</span>
                    {% if sess.sid == current_sid %}
                      <span class="badge badge-success" style="font-size:0.7rem; padding:2px 8px">{{ t('This device') }}</span>
                    {% endif %}
                  </div>
                  <div style="font-size:0.8rem; color:var(--fg-3); margin-top:4px; display:flex; align-items:center; gap:12px; flex-wrap:wrap">
                    <span>IP: <strong>{{ sess.ip }}</strong></span>
                    <span>•</span>
                    <span>{{ t('Dernière activité:') if locale == 'fr' else t('Last active:') }} <strong>{{ sess.last_seen_str }}</strong> <span style="opacity: 0.75">({{ sess.last_seen_at_str }})</span></span>
                  </div>
                </div>
              </div>
              <div style="flex-shrink:0; margin-left:12px">
                {% if sess.sid == current_sid %}
                  <span style="font-size:0.78rem; color:var(--success); font-weight:600; display:flex; align-items:center; gap:4px">
                    <span style="width:6px;height:6px;border-radius:50%;background:var(--success);display:inline-block"></span>
                    {{ t('Active now') }}
                  </span>
                {% else %}
                  {% do has_other.append(1) %}
                  <form method="post" action="{{ admin_prefix }}/revoke-session"
                        data-confirm="{{ t('Revoke this session? The device will be logged out immediately.') }}"
                        data-block="#page-body" style="display:inline">
                    {{ request.csrf_input() }}
                    <input type="hidden" name="sid" value="{{ sess.sid }}">
                    <button type="submit" class="btn btn-danger btn-sm" title="{{ t('Revoke session') }}" style="display:flex;align-items:center;gap:6px">
                      {{ icon('x', 13) }} {{ t('Revoke') }}
                    </button>
                  </form>
                {% endif %}
              </div>
            </div>
          {% endfor %}
        </div>
        {% if not has_other %}
          <p style="margin-top:16px; font-size:0.8rem; color:var(--fg-3)">{{ t('No other active sessions.') }}</p>
        {% endif %}
      {% else %}
        <p style="color:var(--fg-2); font-size:0.875rem">{{ t('No active sessions.') }}</p>
      {% endif %}
    </div>
  </div>

</div>
{% endblock %}