{% extends "tienda/base.html" %}
{% load static %}

{% block content %}
<div class="row mt-4">
    <div class="col-12">
        <h2>Mis Direcciones de Entrega</h2>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{% url 'portal_usuario' %}">Portal de Usuario</a></li>
                <li class="breadcrumb-item active">Direcciones</li>
            </ol>
        </nav>
    </div>
</div>

<!-- Menú de navegación del portal -->
<div class="row mt-3">
    <div class="col-12">
        <div class="btn-group" role="group">
            <a href="{% url 'portal_usuario' %}" class="btn btn-outline-primary">Inicio</a>
            <a href="{% url 'editar_perfil' %}" class="btn btn-outline-primary">Mi Perfil</a>
            <a href="{% url 'direcciones_usuario' %}" class="btn btn-primary">Direcciones</a>
            <a href="{% url 'mensajes_comprador' %}" class="btn btn-outline-primary">Mensajes</a>
        </div>
    </div>
</div>

<div class="row mt-4">
    <div class="col-12">
        <a href="{% url 'crear_direccion' %}" class="btn btn-success mb-3">➕ Nueva Dirección</a>
    </div>
</div>

<!-- Lista de direcciones -->
<div class="row">
    {% if direcciones %}
        {% for direccion in direcciones %}
        <div class="col-md-6 col-lg-4 mb-3">
            <div class="card {% if direccion.is_default %}border-primary{% endif %}">
                <div class="card-body">
                    {% if direccion.is_default %}
                    <span class="badge bg-primary mb-2">Predeterminada</span>
                    {% endif %}
                    <h5 class="card-title">{{ direccion.full_name }}</h5>
                    <p class="card-text">
                        {{ direccion.address_line_1 }}<br>
                        {% if direccion.address_line_2 %}{{ direccion.address_line_2 }}<br>{% endif %}
                        {{ direccion.postal_code }}, {{ direccion.city }}<br>
                        {{ direccion.country }}<br>
                        📞 {{ direccion.phone }}
                    </p>
                    <div class="btn-group btn-group-sm" role="group">
                        <a href="{% url 'editar_direccion' direccion.id %}" class="btn btn-outline-primary">Editar</a>
                        <form method="POST" action="{% url 'eliminar_direccion' direccion.id %}" style="display: inline;" onsubmit="return confirm('¿Estás seguro de eliminar esta dirección?');">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-outline-danger">Eliminar</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    {% else %}
        <div class="col-12">
            <div class="alert alert-info">
                <p class="mb-0">No tienes direcciones guardadas. <a href="{% url 'crear_direccion' %}">Crea tu primera dirección</a></p>
            </div>
        </div>
    {% endif %}
</div>

{% endblock %}