{% extends "base.html" %}
{% block title %}Settings // Synapse-Cortex{% endblock %}
{% block header %}Settings // Profile{% endblock %}
{% block content %}
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 max-w-3xl">
  <div class="border border-cortex-border bg-cortex-panel rounded-md p-5">
    <div class="text-[10px] text-cortex-muted uppercase tracking-wider font-display mb-3">Profile</div>
    <div class="text-sm space-y-2">
      <div class="flex justify-between"><span class="text-cortex-muted">Name</span><span class="text-chrome">{{ user.full_name }}</span></div>
      <div class="flex justify-between"><span class="text-cortex-muted">Email</span><span class="text-chrome">{{ user.email }}</span></div>
      <div class="flex justify-between"><span class="text-cortex-muted">Role</span><span class="text-chrome uppercase">{{ user.role.value.replace('_',' ') }}</span></div>
      <div class="flex justify-between"><span class="text-cortex-muted">Tenant</span><span class="text-chrome">{{ user.tenant.name if user.tenant else '—' }}</span></div>
    </div>
  </div>

  <div class="border border-cortex-border bg-cortex-panel rounded-md p-5">
    <div class="text-[10px] text-cortex-muted uppercase tracking-wider font-display mb-3">Multi-Factor Authentication</div>
    {% if user.mfa_enabled %}
    <div class="flex items-center gap-2 text-sm">
      <span class="w-2 h-2 rounded-full bg-accent-green"></span>
      <span class="text-accent-green uppercase text-xs">Enrolled</span>
    </div>
    <a href="/settings/mfa/disable" class="inline-block mt-3 text-[10px] uppercase text-accent-red hover:underline">Disable MFA</a>
    {% else %}
    <div class="flex items-center gap-2 text-sm mb-3">
      <span class="w-2 h-2 rounded-full {% if user.mfa_required %}bg-accent-orange{% else %}bg-cortex-muted{% endif %}"></span>
      <span class="{% if user.mfa_required %}text-accent-orange{% else %}text-cortex-muted{% endif %} uppercase text-xs">
        {% if user.mfa_required %}Required by admin — not yet enrolled{% else %}Not enabled{% endif %}
      </span>
    </div>
    <a href="/settings/mfa/enroll" class="inline-block bg-accent-blue text-cortex-bg font-display font-bold uppercase tracking-wider text-xs px-4 py-2 rounded hover:bg-accent-blue-bright transition">
      Enable MFA
    </a>
    {% endif %}
  </div>

  <div class="border border-cortex-border bg-cortex-panel rounded-md p-5 lg:col-span-2">
    <div class="text-[10px] text-cortex-muted uppercase tracking-wider font-display mb-3">Change Password</div>
    {% if error %}
    <div class="mb-3 text-xs border border-accent-red/40 bg-accent-red/10 text-accent-red px-3 py-2 rounded">{{ error }}</div>
    {% endif %}
    {% if success %}
    <div class="mb-3 text-xs border border-accent-green/40 bg-accent-green/10 text-accent-green px-3 py-2 rounded">{{ success }}</div>
    {% endif %}
    <form method="post" action="/settings/password" class="space-y-3 text-sm max-w-sm">
      <div>
        <label class="block text-xs text-cortex-muted mb-1 uppercase tracking-wider">Current Password</label>
        <input required name="current_password" type="password" class="w-full bg-cortex-panel2 border border-cortex-border rounded px-3 py-2 focus:outline-none focus:border-accent-blue" />
      </div>
      <div>
        <label class="block text-xs text-cortex-muted mb-1 uppercase tracking-wider">New Password</label>
        <input required name="new_password" type="password" minlength="8" class="w-full bg-cortex-panel2 border border-cortex-border rounded px-3 py-2 focus:outline-none focus:border-accent-blue" />
      </div>
      <button type="submit" class="bg-accent-blue text-cortex-bg font-display font-bold uppercase tracking-wider text-xs px-4 py-2 rounded hover:bg-accent-blue-bright transition">
        Update Password
      </button>
    </form>
  </div>
</div>
{% endblock %}