<!-- hero -->
<div class="d-md-flex">
    <div class="col-md-4">
        <img src="<%= user.avatar %>" alt="Persona" class="cover" />
    </div>
    <div class="col-md p-5 text-center">
        <h1 class="font-brand">Hola, <%= user.name %></h1>
        <p>
            Aqu√≠ te mostramos tu espacio personal donde puedes gestionar tu perfil y
            consultar tus datos
        </p>
        <a href="/users/editUser" class="btn btn-secondary bg-blue rounded-0 border-0 shadow"><i class="bi bi-pencil-square"></i> Editar perfil</a>
    </div>
</div>
<!-- menu -->
<div class="bg-dark">
    <ul class="nav justify-content-center py-2">
        <li class="nav-item">
            <a class="nav-link text-light font-brand" href="/reservations/listReservations"><i class="bi bi-journal-bookmark"></i> Lista reservas</a>
        </li>
        <li class="nav-item">
            <a class="nav-link text-light font-brand" href="/pets"><i class="bi bi-hearts"></i> Lista mascotas</a>
        </li>
        <li class="nav-item">
            <a class="nav-link text-light font-brand" href="/users"><i class="bi bi-people"></i> Lista usuarios</a>
        </li>
    </ul>
</div>
<!-- main -->
<div class="bg-grey">
    <h2 class="font-brand text-center py-5">Panel de control</h2>
    <div class="row p-5 pt-2">
        <div class="col-md-4 bg-blue p-5 border shadow me-3">
            <h3 class="text-light font-brand text-center">Usuarios</h3>
            <div class="mt-5">
                <div class="d-flex mb-3">
                    <img src="/images/gerente.jpg" alt="Managers" class="w-25">
                    <a href="" class="btn btn-dark rounded-0 shadow font-brand w-75">
                        Managers
                    </a>
                </div>
                <div class="d-flex mb-3">
                    <img src="/images/cuidadores.jpg" alt="Staff" class="w-25">
                    <a href="" class="btn btn-dark rounded-0 shadow font-brand w-75">
                        Staff
                    </a>
                </div>
                <div class="d-flex mb-3">
                    <img src="/images/care.jpg" alt="Clientss" class="w-25">
                    <a href="" class="btn btn-dark rounded-0 shadow font-brand w-75">
                        Clientes
                    </a>
                </div>
            </div>
        </div>
        <!-- Reservation price -->
        <div class="col-md shadow">
            <canvas id="chartEconomy" class="w-100"></canvas>
        </div>
    </div>
    <div class="row p-5 pt-2">
        <!-- Reservations quantity -->
        <div class="col-md border shadow">
            <canvas id="chartReservation"></canvas>
        </div>
        <!-- Room type -->
        <div class="col-md border shadow me-3">
            <canvas id="chartRoomType"></canvas>
        </div>
        <!-- Pet specie -->
        <div class="col-md border shadow">
            <canvas id="chartPetSpecie"></canvas>
        </div>
    </div>
</div>