{% extends "base.html" %}
{% block title %}My Profile – Echo{% endblock %}
{% block content %}
<div class="max-w-xl mx-auto space-y-4">
  <div class="flex items-center justify-between">
    <h1 class="text-2xl font-semibold">My Profile</h1>
    <a href="/dashboard/{{ (user.role | lower) if user and user.role else 'end_user' }}" class="text-sm text-blue-400 hover:text-blue-300">Back to Dashboard</a>
  </div>

  {% if not_found %}
    <div class="border border-red-800 bg-red-900 text-red-300 p-3 rounded">User not found.</div>
  {% endif %}
  {% if message %}
    <div class="border border-green-800 bg-green-900 text-green-300 p-3 rounded">{{ message }}</div>
  {% endif %}
  {% if error %}
    <div class="border border-red-800 bg-red-900 text-red-300 p-3 rounded">{{ error }}</div>
  {% endif %}

  {% if profile_user %}
  <form method="post" class="space-y-4 bg-zinc-900 border border-zinc-800 rounded-lg p-4">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div>
        <label class="block text-sm text-zinc-300">First name</label>
        <input type="text" name="first_name" value="{{ profile_user.first_name or '' }}" class="mt-1 block w-full rounded-md border border-zinc-700 bg-zinc-900 text-zinc-100 placeholder-zinc-500 focus:border-blue-500 focus:ring-blue-500" required />
      </div>
      <div>
        <label class="block text-sm text-zinc-300">Surname</label>
        <input type="text" name="surname" value="{{ profile_user.surname or '' }}" class="mt-1 block w-full rounded-md border border-zinc-700 bg-zinc-900 text-zinc-100 placeholder-zinc-500 focus:border-blue-500 focus:ring-blue-500" />
      </div>
    </div>
    <div>
      <label class="block text-sm text-zinc-300">Email</label>
      <input type="email" name="email" value="{{ profile_user.email or '' }}" class="mt-1 block w-full rounded-md border border-zinc-700 bg-zinc-900 text-zinc-300"/>
    </div>
    <div>
      <label class="block text-sm text-zinc-300 mb-1">Role</label>
      {% set role_value = (profile_user.role.value if profile_user.role else 'end_user') %}
      {% set role_label = (role_value | replace('_',' ') | title) %}
      <span class="inline-flex items-center rounded px-2 py-0.5 text-xs border"
            style="border-color: rgb(39 39 42); color: rgb(161 161 170);">
        {{ role_label }}
      </span>
    </div>
    <div class="flex justify-end">
      <button type="submit" class="inline-flex items-center rounded-md bg-blue-600 px-4 py-2 text-white text-sm hover:bg-blue-700">Save</button>
    </div>
  </form>
  {% endif %}
</div>
{% endblock %}