{% extends "main.html" %}
{% load static %}
{% block title %}My Projects{% endblock %}
{% block content %}

<div class="w-full xxlg1:w-[75%] bg-white h-fit rounded-md shadow-md p-5">
    <div class="w-full flex flex-col gap-4 mt-5">
        <div>
            <p class="text-gray-500 text-xl">First Name: <span
                    class="text-slate-800 text-xl font-semibold">{{ address.first_name }}</span></p>
        </div>
        <div>
            <p class="text-gray-500 text-xl">Middle Name: <span
                    class="text-slate-800 text-xl font-semibold">{{ address.middle_name }}</span></p>
        </div>
        <div>
            <p class="text-gray-500 text-xl">Last Name: <span
                    class="text-slate-800 text-xl font-semibold">{{ address.last_name }}</span></p>
        </div>
        <div>
            <p class="text-gray-500 text-xl">Country: <span
                    class="text-slate-800 text-xl font-semibold">{{ address.country.name }}</span></p>
        </div>
    {% if address.group.all %}
        <div>
            <p class="text-gray-500 text-xl mb-2">Groups:</p>
            <ul class="list-disc pl-5">
                {% for group in address.group.all %}
                <li class="text-slate-800 text-lg">
                    {{ group.name }}
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endif %}
        {% if address.contact_set.all %}
        <div>
            <p class="text-gray-500 text-xl mb-2">Contacts:</p>
            <ul class="list-disc pl-5">
                {% for contact in address.contact_set.all %}
                <li class="text-slate-800 text-lg">
                    {{ contact.type }}: {{ contact.contact }}
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endif %}
    </div>

    <a href="{% url 'editaddressbook' address.id %}">
        <button
            class="w-full text-base px-3 py-2 bg-fifthosiblue text-white outline-none border border-fifthosiblue rounded-md cursor-pointer hover:bg-white hover:text-fifthosiblue duration-300 mt-5">
            Edit Contact
        </button>
    </a>

    <button
        class="w-full text-base px-3 py-2 bg-red-500 text-white outline-none border border-red-500 rounded-md cursor-pointer hover:bg-white hover:text-red-500 duration-300 mt-3 deleteCustomerButton"
        data-modal-url="">
        Delete Contact
    </button>
</div>

{% endblock content %}