{{ define "content" }}
<div class="min-h-screen bg-gray-50">
  <!-- Header Bar -->
  <div class="bg-white border-b border-gray-200 px-6 py-4">
    <div class="flex items-center justify-between">
      <div class="flex items-center space-x-3">
        <i class="fas fa-user-circle text-blue-600 text-xl"></i>
        <h1 class="text-xl font-semibold text-gray-900">User Profile</h1>
      </div>
      <div class="flex items-center space-x-2 text-sm text-gray-600">
        <i class="fas fa-shield-check text-blue-500"></i>
        <span>Secure Profile Management</span>
      </div>
    </div>
  </div>

  <!-- Main Content -->
  <div class="p-6">
    <!-- Profile Overview Tile -->
    <div class="bg-white border border-gray-200 mb-6">
      <div class="bg-blue-50 border-b border-gray-200 px-6 py-4">
        <h2 class="text-lg font-semibold text-gray-900 flex items-center">
          <i class="fas fa-id-card text-blue-600 mr-3"></i>
          Profile Overview
        </h2>
      </div>
      <div class="p-6">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
          <!-- User Info -->
          <div class="lg:col-span-2">
            <div class="flex items-start space-x-4">
              <div class="flex-1">
                <h3 class="text-xl font-semibold text-gray-900">
                  {{ .User.FirstName }} {{ .User.LastName }}
                </h3>
                <p class="text-gray-600">{{ .User.Email }}</p>
                <div class="flex items-center mt-2 space-x-4">
                  <span
                    class="inline-flex items-center px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 border border-blue-200"
                  >
                    <i class="fas fa-user-check mr-1"></i>
                    Active User
                  </span>
                  <span class="text-xs text-gray-500"
                    >ID: {{ .User.UserID }}</span
                  >
                </div>
              </div>
            </div>
          </div>
          <!-- Quick Stats -->
          <div class="bg-gray-50 border border-gray-200 p-4">
            <h4 class="text-sm font-semibold text-gray-700 mb-3">
              Account Information
            </h4>
            <div class="space-y-2">
              <div class="flex justify-between text-sm">
                <span class="text-gray-600">User ID:</span>
                <span class="font-mono text-gray-900">{{ .User.UserID }}</span>
              </div>
              <div class="flex justify-between text-sm">
                <span class="text-gray-600">Role:</span>
                <span class="text-gray-900">{{ if eq .User.RoleID 1 }}Admin
            {{ else if eq .User.RoleID 2 }}Team Leader
            {{ else }}Volunteer
            {{ end }}</span>
              </div>
              <div class="flex justify-between text-sm">
                <span class="text-gray-600">Status:</span>
                <span class="text-green-600 font-medium">Active</span>
              </div>
  
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Edit Profile Form Tile -->
    <div class="bg-white border border-gray-200 mt-0 m-6">
      <div class="bg-blue-50 border-b border-gray-200 px-6 py-4">
        <h2 class="text-lg font-semibold text-gray-900 flex items-center">
          <i class="fas fa-edit text-blue-600 mr-3"></i>
          Edit Profile Information
        </h2>
      </div>
      
      <div class="p-6">
        <form method="post" action="/profile/update">
          <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <!-- First Name -->
            <div>
              <label class="block text-sm font-semibold text-gray-700 mb-2">
                First Name <span class="text-red-500">*</span>
              </label>
              <input
                type="text"
                name="first_name"
                value="{{ .User.FirstName }}"
                required
                class="w-full px-4 py-3 border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
                placeholder="Enter first name"
              />
            </div>

            <!-- Last Name -->
            <div>
              <label class="block text-sm font-semibold text-gray-700 mb-2">
                Last Name <span class="text-red-500">*</span>
              </label>
              <input
                type="text"
                name="last_name"
                value="{{ .User.LastName }}"
                required
                class="w-full px-4 py-3 border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
                placeholder="Enter last name"
              />
            </div>

            <!-- Email (Read-only) -->
            <div>
              <label class="block text-sm font-semibold text-gray-700 mb-2">
                Email Address
                <span class="ml-2 text-xs bg-gray-200 text-gray-600 px-2 py-1"
                  >Read Only</span
                >
              </label>
              <div class="relative">
                <input
                  type="email"
                  name="email"
                  value="{{ .User.Email }}"
                  disabled
                  class="w-full px-4 py-3 border border-gray-300 bg-gray-100 text-gray-600 cursor-not-allowed"
                />
                <div class="absolute inset-y-0 right-0 pr-3 flex items-center">
                  <i class="fas fa-lock text-gray-400"></i>
                </div>
              </div>
              <p class="text-xs text-gray-500 mt-1">
                Contact system administrator to change email
              </p>
            </div>

            <!-- Phone -->
            <div>
              <label class="block text-sm font-semibold text-gray-700 mb-2">
                Phone Number
              </label>
              <input
                type="tel"
                name="phone"
                value="{{ .User.Phone }}"
                class="w-full px-4 py-3 border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
                placeholder="Enter phone number"
              />
            </div>
          </div>

          <!-- Form Actions -->
          <div
            class="mt-8 pt-6 border-t border-gray-200 flex justify-between items-center"
          >
            <div class="flex items-center text-sm text-gray-500">
              <i class="fas fa-info-circle text-blue-500 mr-2"></i>
              Changes will be applied immediately after saving
            </div>
            <div class="flex space-x-3">
              <button
                type="button"
                onclick="window.history.back()"
                class="px-6 py-2 border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 font-medium"
              >
                <i class="fas fa-times mr-2"></i>
                Cancel
              </button>
              <button
                type="submit"
                class="px-6 py-2 bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 font-medium"
              >
                <i class="fas fa-save mr-2"></i>
                Save Changes
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>

    
    </div>
  </div>
</div>

<style>
  /* Professional square corner design */
  * {
    border-radius: 0 !important;
  }

  /* Clean transitions */
  input,
  button,
  .transition-colors {
    transition: all 0.2s ease;
  }

  /* Focus states with blue accent */
  input:focus {
    box-shadow: 0 0 0 1px #3b82f6;
  }

  button:focus {
    box-shadow: 0 0 0 2px #3b82f6;
  }

  /* Hover effects for tiles */
  .hover\:bg-blue-50:hover {
    background-color: #eff6ff;
  }

  .hover\:border-blue-500:hover {
    border-color: #3b82f6;
  }

  /* Professional table-like layout */
  .grid {
    display: grid;
  }

  /* Ensure full width usage */
  .min-h-screen {
    width: 100%;
  }

  /* Professional button styling */
  button {
    font-weight: 500;
    letter-spacing: 0.025em;
  }

  /* Clean form inputs */
  input[disabled] {
    opacity: 0.8;
  }

  /* Status indicators */
  .bg-blue-100 {
    background-color: #dbeafe;
  }

  .text-blue-800 {
    color: #1e40af;
  }

  /* Progress bars */
  .bg-blue-600 {
    background-color: #2563eb;
  }

  /* Responsive design */
  @media (max-width: 1024px) {
    .lg\:grid-cols-2 {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .lg\:grid-cols-3 {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }
</style>
{{ end }}