<main class="corps">
    <div class="head-main">
        <h2>Accueil</h2>
        <a href="/planning">
            <button class="button-planning" style="align-items: center;">
                <img src="/images/planning-icon.png" class="svg-icon" alt="">
                <span class="label">Planning de congé</span>
            </button>
        </a>
    </div>
    <div class="container-card">
        <a href="/wait">            
            <div class="card-custom">
                <div class="card-content">
                    <h1><%= nbrWaiting %></h1>
                    <img src="/images/wait.svg" alt="">
                </div>
                <h4>En attente</h4>
            </div>
            <span class="border-card"></span>
        </a>                
        <a href="/alert" >
            <div class="card-custom">
                <div class="card-content">
                    <h1><%= nbrAlertVac %></h1>
                    <img src="/images/alert.svg" alt="">
                </div>
                <h4>Congé en alerte</h4>
            </div>
            <span class="border-card"></span>
        </a>
        <a href="/currentVac">
        <div class="card-custom">
            <div class="card-content">
                <h1><%= nbrCurrentVac %></h1>
                <img src="/images/current.svg" alt="">
            </div>
            <h4> En congé</h4>
        </div>
        <span class="border-card"></span>
        </a>
        
        <a href="/currentPermiss">
            <div class="card-custom">
                <div class="card-content">
                    <h1><%= nbrCurrentPermiss %></h1>
                    <img src="/images/permission.png" alt="">
                </div>
                <h4> En permission</h4>
            </div>
            <span class="border-card"></span>
        </a>

        <a href="/currentMedical">
            <div class="card-custom">
                <div class="card-content">
                    <h1><%= nbrCurrentMed %></h1>
                    <img src="/images/malade.png" alt="">
                </div>
                <h4> En repos maladie</h4>
            </div>
            <span class="border-card"></span>
        </a>        

        <a href="/next">
            <div class="card-custom">
                <div class="card-content">
                    <h1><%= nbrNextVac %></h1>
                    <img src="/images/futur.svg" alt="">
                </div>
                <h4>Prochains</h4>
            </div>
            <span class="border-card"></span>
        </a>
        <a href="/reject">
        <div class="card-custom">
            <div class="card-content">
                <h1><%= nbrRejected %></h1>
                <img src="/images/reject.svg" alt="">
            </div>
                <h4>Rejeter</h4>
            </div>
            <span class="border-card"></span>
        </a>
        <a href="/historic">
        <div class="card-custom">
            <div class="card-content">
                <h1></h1>
                <img src="/images/history.png" alt="">
            </div>
                <h4>Historique</h4>
            </div>
            <span class="border-card"></span>
        </a>
    </div>
    
</main>
