{% extends "base.html" %}
{% block title %}Settings — LockBox{% endblock %}
{% block content %}
<div class="container-fluid py-3 px-lg-4" style="max-width: 640px;">
  <h1 class="h4 mb-4"><i class="bi bi-gear me-2"></i>Settings</h1>

  <div class="card border-0 shadow-sm rounded-4 mb-4">
    <div class="card-body">
      <h2 class="h6 text-muted text-uppercase">Account</h2>
      <p class="mb-1"><strong>Username:</strong> {{ user.username }}</p>
      <p class="mb-1"><strong>Email:</strong> {{ user.email }}</p>
      <p class="mb-0"><strong>Member since:</strong> {{ user.created_at.strftime('%Y-%m-%d') }}</p>
    </div>
  </div>

  <div class="card border-0 shadow-sm rounded-4 mb-4">
    <div class="card-body">
      <h2 class="h6 text-muted text-uppercase mb-3">Change Password</h2>
      <div class="alert alert-warning small">
        <strong>Important:</strong> Your encryption key is derived from your password + salt.
        Changing the password does not automatically re-encrypt existing files.
        Keep a secure backup of your current password or export keys if you need long-term access to old files.
      </div>
      <form method="post">
        {{ form.hidden_tag() }}
        <div class="mb-3">
          {{ form.current_password.label(class="form-label") }}
          {{ form.current_password(class="form-control rounded-3") }}
        </div>
        <div class="mb-3">
          {{ form.new_password.label(class="form-label") }}
          {{ form.new_password(class="form-control rounded-3") }}
        </div>
        <div class="mb-3">
          {{ form.confirm.label(class="form-label") }}
          {{ form.confirm(class="form-control rounded-3") }}
        </div>
        {{ form.submit(class="btn btn-primary rounded-pill") }}
      </form>
    </div>
  </div>

  <div class="card border-0 shadow-sm rounded-4">
    <div class="card-body">
      <h2 class="h6 text-muted text-uppercase">Security & Encryption</h2>
      <ul class="small mb-0">
        <li>Files are encrypted client-side with AES-256-GCM before upload.</li>
        <li>Encryption key is derived from your password using PBKDF2 + your unique salt.</li>
        <li>Server and Backblaze B2 only store ciphertext.</li>
        <li>Sessions use secure, HttpOnly cookies; CSRF protection is enabled.</li>
        <li>Passwords are hashed with Argon2id.</li>
      </ul>
    </div>
  </div>
</div>
{% endblock %}
{% block content_mobile %}{{ self.content() }}{% endblock %}