{% extends 'menu/menu.html' %}
{% load static %}

{% block title %}Mi NexID{% endblock %}

{% block body %}
<style>
  .avatar-circle {
    display: block;
    margin: 0 auto 1rem;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ddd;
  }
  .btn-nexid {
    min-width: 160px;
  }
  .list-group-item strong {
    width: 140px;
    display: inline-block;
  }
</style>

<div class="text-center mb-4">
  {% if foto_perfil %}
    <img src="{{ foto_perfil }}"
         alt="Avatar"
         class="avatar-circle">
  {% else %}
    <img src="{% static 'img/default_avatar.png' %}"
         alt="Avatar por defecto"
         class="avatar-circle">
  {% endif %}
  <h3 class="mt-2">{{ nombre }} {{ apellido }}</h3>
  <p class="text-muted">{{ identidad }}</p>
</div>

<div class="row justify-content-center mb-5">
  <div class="col-12 col-md-8 col-lg-6">
    <ul class="list-group">
      <li class="list-group-item"><strong>Correo:</strong> {{ correo }}</li>
      <li class="list-group-item"><strong>Teléfono:</strong> {{ telefono }}</li>
      <li class="list-group-item"><strong>Dirección:</strong> {{ direccion }}</li>
    </ul>
  </div>
</div>

<div class="d-flex flex-column flex-sm-row justify-content-center gap-3 mb-5">
  <a href="{% url 'qr_screen' %}"
     class="btn btn-outline-primary btn-nexid">
    📌 Ver Código QR
  </a>
  <a href="{% url 'barcode_screen' %}"
     class="btn btn-outline-secondary btn-nexid">
    📦 Ver Código de Barras
  </a>
  <a
    href="{% url 'qr_client_for_association' %}"
    class="btn btn-outline-secondary btn-nexid">
    📌 Ver mi Código QR
  </a>

</div>
{% endblock %}