{# templates/profiles/profile.html #}
{% extends 'base.html' %}
{% block title %}Mi Perfil{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
  <div class="max-w-2xl mx-auto">
    <div class="flex items-center justify-between mb-6">
      <h1 class="text-3xl font-bold">Mi Perfil</h1>
      <a class="btn btn-primary" href="{% url 'edit_profile' %}">Editar Perfil</a>
    </div>

    <div class="card">
      <div class="card-h text-center">
        <div class="flex justify-center mb-4">
          <div class="w-24 h-24 rounded-full overflow-hidden border" style="border-color: var(--border); background: var(--muted);">
            {% if profile.avatar %}
              <img src="{{ profile.avatar.url }}" alt="Avatar" class="w-full h-full object-cover">
            {% else %}
              <div class="w-full h-full flex items-center justify-center text-2xl font-bold" style="color: var(--muted-foreground);">
                {{ profile.display_name|default:profile.user.username|slice:":1"|upper }}
              </div>
            {% endif %}
          </div>
        </div>

        <h2 class="text-2xl font-bold">{{ profile.display_name|default:profile.user.username }}</h2>
        <p class="text-sm mt-1" style="color: var(--muted-foreground);">@{{ profile.user.username }}</p>
      </div>

      <div class="card-c">
        {% if profile.bio %}
          <p class="text-center mb-6" style="color: var(--muted-foreground);">{{ profile.bio }}</p>
          <div class="sep my-6"></div>
        {% endif %}

        <div class="space-y-4">
          <div class="flex items-start gap-3">
            <div class="w-9 h-9 rounded-lg flex items-center justify-center" style="background: var(--muted); color: var(--muted-foreground);">
              <!-- user icon -->
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 21a8 8 0 10-16 0"/>
              </svg>
            </div>
            <div>
              <p class="text-sm font-semibold">Nombre de usuario</p>
              <p class="text-sm" style="color: var(--muted-foreground);">{{ profile.user.username }}</p>
            </div>
          </div>

          <div class="flex items-start gap-3">
            <div class="w-9 h-9 rounded-lg flex items-center justify-center" style="background: var(--muted); color: var(--muted-foreground);">
              <!-- mail icon -->
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l9 6 9-6M4 6h16a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V8a2 2 0 012-2z"/>
              </svg>
            </div>
            <div>
              <p class="text-sm font-semibold">Email</p>
              <p class="text-sm" style="color: var(--muted-foreground);">{{ profile.user.email }}</p>
            </div>
          </div>

          <div class="flex items-start gap-3">
            <div class="w-9 h-9 rounded-lg flex items-center justify-center" style="background: var(--muted); color: var(--muted-foreground);">
              <!-- calendar icon -->
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
              </svg>
            </div>
            <div>
              <p class="text-sm font-semibold">Miembro desde</p>
              <p class="text-sm" style="color: var(--muted-foreground);">
                {{ profile.created_at|date:"d M Y" }}
              </p>
            </div>
          </div>
        </div>

      </div>
    </div>

  </div>
</div>
{% endblock %}