{% extends 'base.html' %}
{% block content %}
<div class="container mt-3 mb-3">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="fw-bold">My Shipping Addresses</h1>
        <a href="{% url 'accounts:shipping_address_create' %}" class="btn btn-success">
            <i class="fas fa-plus"></i> Add New Address
        </a>
    </div>

    {% if addresses %}
    <div class="row g-4">
        {% for addr in addresses %}
        <div class="col-md-6 col-lg-4">
            <div class="card h-100 {% if addr.is_default %}border-success shadow{% else %}border-light{% endif %}">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start">
                        <h5 class="card-title">{{ addr.address_name }}</h5>
                        {% if addr.is_default %}
                            <span class="badge bg-success fs-6">DEFAULT</span>
                        {% endif %}
                    </div>
                    
                    <p class="card-text mt-2">{{ addr.full_address|linebreaksbr }}</p>
                    <p class="text-muted small">
                        {{ addr.city }}, {{ addr.state }}<br>
                        {{ addr.phone }}
                    </p>
                </div>
                
                <div class="card-footer bg-transparent d-flex gap-2">
                    <a href="{% url 'accounts:shipping_address_edit' addr.id %}" 
                       class="btn btn-sm btn-outline-primary flex-fill">Edit</a>
                    <a href="{% url 'accounts:shipping_address_delete' addr.id %}" 
                       class="btn btn-sm btn-outline-danger flex-fill">Delete</a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="alert alert-info text-center py-5">
        <h4>You haven't added any shipping addresses yet.</h4>
        <a href="{% url 'accounts:shipping_address_create' %}" class="btn btn-primary mt-3">Add Your First Address</a>
    </div>
    {% endif %}
</div>
{% endblock %}