{% extends "layout.html" %}

{% block content %}
<div class="container-xl">
  <div class="page-header d-print-none">
    <div class="row align-items-center">
      <div class="col">
        <h2 class="page-title">
          User Settings
        </h2>
      </div>
    </div>
  </div>

  <div class="row mt-3">
    <div class="col-md-6">
      <!-- Password Change Card -->
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Change Password</h3>
        </div>
        <div class="card-body">
          {% with messages = get_flashed_messages(with_categories=true) %}
          {% if messages %}
          {% for category, message in messages %}
          <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
            {{ message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
          </div>
          {% endfor %}
          {% endif %}
          {% endwith %}

          <form method="POST" action="{{ url_for('dashboard.settings') }}">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <div class="mb-3">
              <label class="form-label required">Current Password</label>
              <input type="password" class="form-control" name="current_password" required>
            </div>
            <div class="mb-3">
              <label class="form-label required">New Password</label>
              <input type="password" class="form-control" name="new_password" required>
            </div>
            <div class="mb-3">
              <label class="form-label required">Confirm New Password</label>
              <input type="password" class="form-control" name="confirm_password" required>
            </div>
            <div class="form-footer">
              <button type="submit" class="btn btn-primary">Change Password</button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <div class="col-md-6">
      <!-- User Information Card -->
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Account Information</h3>
        </div>
        <div class="card-body">
          <div class="mb-3">
            <div class="form-label">Email</div>
            <div>{{ current_user.email }}</div>
          </div>
          <div class="mb-3">
            <div class="form-label">Account Type</div>
            <div>
              {% if current_user.is_admin %}
              <span class="badge bg-green">Administrator</span>
              {% else %}
              <span class="badge bg-blue">Standard User</span>
              {% endif %}
            </div>
          </div>
          <div class="mb-3">
            <div class="form-label">Created</div>
            <div>{{ current_user.created_at.strftime('%Y-%m-%d %H:%M') }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}