<!DOCTYPE html>
<html lang="es">
<%- include('../partials/head'); %>

<body>
    <div class="container">
        <%- include('../partials/header'); %>
        <div class="bg-image p-5">
            <div class="bg-dark bg-opacity-75 w-75 mx-auto p-5 text-light">
                <h1 class="text-center">Datos de la mascota</h1>
                <hr class="h-line bg-blue w-50 mx-auto mb-5">
                <div>
                    <p><strong>Titular: </strong><span><%= pet.caregiver %></span></p>
                    <hr>
                    <p><strong>Identificador: </strong><span><%= pet.id %></span></p>
                    <p><strong>Nombre: </strong><span><%= pet.name %></span></p>
                    <p><strong>Tipo: </strong><span><%= pet.specie %> - <%= pet.breed %> </span></p>
                    <p><strong>Características: </strong><span><%= pet.size %> - <%= pet.color %> </span></p>
                    <p>
                        <strong>Fecha de nacimiento: </strong>
                        <span><%= new Date(pet.birthday).toLocaleDateString() %> </span> 
                        <span>
                            <%
                                const currentDate = new Date();
                                const petBirthday = new Date(pet.birthday);
                                const years = currentDate.getFullYear() - petBirthday.getFullYear();
                                %>
                                ( <%= years %> años)
                        </span>
                    </p>
                </div>
            </div>
        </div>
        <%- include('../partials/footer'); %>
    </div>
</body>
</html>