{% extends "base.html" %}
{% load tailwind_filters %}

{% block title %}Report Dashboard{% endblock %}
{% block content %}
<div class="container mx-auto px-4 py-8">
<h1 class="text-2xl font-bold text-gray-700 mb-6">Your Profile</h1>

 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- Username -->
            <div class="flex items-center bg-gray-50 p-4 rounded-lg shadow-sm border">
                <div class="flex-shrink-0 bg-indigo-100 rounded-full h-12 w-12 flex items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
  <path strokeLinecap="round" strokeLinejoin="round" d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
</svg>

                </div>
                <div class="ml-4">
                    <h3 class="text-lg font-medium text-gray-900">Username</h3>
                    <p class="text-gray-600">{{ user.username }}</p>
                </div>
            </div>

            <!-- Email -->
            <div class="flex items-center bg-gray-50 p-4 rounded-lg shadow-sm border">
                <div class="flex-shrink-0 bg-indigo-100 rounded-full h-12 w-12 flex items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
  <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" />
</svg>

                </div>
                <div class="ml-4">
                    <h3 class="text-lg font-medium text-gray-900">Email</h3>
                    <p class="text-gray-600">{{ user.email }}</p>
                </div>
            </div>
        </div>
<form method="POST" enctype="multipart/form-data" class='space-y-4'>
    {% csrf_token %}
              <!-- First Name -->
              <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">

                <div>
                  <label for="first_name" class="block text-sm font-medium text-gray-700">First Name</label>
                  <input
                      type="text"
                      name="first_name"
                      id="first_name"
                      value="{{ user.first_name }}"
                      class="block w-full mt-2 rounded-md border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                      />
                </div>

                <!-- Last Name -->
                <div>
                  <label for="last_name" class="block text-sm font-medium text-gray-700">Last Name</label>
                  <input
                      type="text"
                      name="last_name"
                      id="last_name"
                      value="{{ user.last_name }}"
                      class="block w-full mt-2 rounded-md border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                      />
                </div>
              </div>
    {% if form.instance.profile_picture %}
    <!-- Show uploaded profile picture -->
    <img src="{{ form.instance.profile_picture.url }}" 
         alt="Profile Picture" 
         class="w-32 h-32 rounded-full mb-4 shadow-md">
    {% else %}
    <!-- Placeholder image if no profile picture -->
    <div class="w-32 h-32 rounded-full bg-gray-200 flex items-center justify-center text-gray-500 mb-4">
      <span>No Image</span>
    </div>
    {% endif %}
    {{ form.profile_picture }}
    {% if form.instance.signed_picture %}
    <!-- Show uploaded profile picture -->
    <img src="{{ form.instance.signed_picture.url }}" 
         alt="Profile Picture" 
         class="w-32 mb-4 shadow-md">
    {% else %}
    <!-- Placeholder image if no profile picture -->
    <div class="w-32 h-32 rounded-full bg-gray-200 flex items-center justify-center text-gray-500 mb-4">
      <span>No Image</span>
    </div>
    {% endif %}
    {{ form.signed_picture }}
    {{ form.position | as_crispy_field }}
    <button type="submit" class="px-6 py-2 bg-indigo-600 text-white font-medium rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">Save Changes</button>
</form>
</div>
{% endblock %}
