{% extends 'base.html' %}
{% load form_tags %}
{% block title %}My Profile{% endblock %}

{% block content %}
<div class="mx-auto max-w-4xl space-y-4">
  <div class="flex flex-wrap items-center justify-between gap-2">
    <h1 class="text-2xl font-bold">My Profile</h1>
    <span class="badge badge-outline">{{ request.user.get_role_display }}</span>
  </div>

  <div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
    <div class="card border border-base-300 bg-base-100 lg:col-span-1">
      <div class="card-body space-y-2">
        <h2 class="card-title text-base">Account Details</h2>
        <div><span class="opacity-70">Username:</span> {{ request.user.username }}</div>
        <div><span class="opacity-70">Name:</span> {{ request.user.get_full_name|default:"—" }}</div>
        <div><span class="opacity-70">Email:</span> {{ request.user.email|default:"—" }}</div>
        <div><span class="opacity-70">Contact:</span> {{ request.user.contact|default:"—" }}</div>
        <div><span class="opacity-70">Last Login:</span> {{ request.user.last_login|date:"Y-m-d H:i"|default:"Never" }}</div>
      </div>
    </div>

    <div class="card border border-base-300 bg-base-100 lg:col-span-2">
      <div class="card-body">
        <h2 class="card-title text-base">Change Password</h2>
        {% if request.user.must_change_password %}
          <div class="alert alert-warning mb-3">
            Password update is required before you can continue using the system.
          </div>
        {% endif %}
        <form method="post" class="space-y-3">
          {% csrf_token %}
          {% if form.non_field_errors %}
            <div class="alert alert-error">{{ form.non_field_errors }}</div>
          {% endif %}
          {% for field in form %}
            <div class="form-control">
              <label class="label" for="{{ field.id_for_label }}">
                <span class="label-text">{{ field.label }}</span>
              </label>
              {{ field|daisyui }}
              {% for error in field.errors %}
                <span class="text-error text-sm mt-1">{{ error }}</span>
              {% endfor %}
            </div>
          {% endfor %}
          <div class="flex justify-end">
            <button type="submit" class="btn btn-primary">Update Password</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}