<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link type="text/css" rel="stylesheet" href="../resources/css/index.css">
    <link  rel="icon" href="../resources/assets/icons/favicon.ico" type="image/ico" />
    <title>Control de aforo</title>
</head>
<body id="body" class="body--overflow-hidden">

    <section id="modal-carga" class="m-modal-carga" >
        <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M74.9753 37.4996C75.0727 38.8769 76.1848 40 77.568 40C78.9512 40 80.0806 38.8776 79.9955 37.4995C78.7024 16.5729 61.2901 0 40 0C18.7099 0 1.29757 16.5729 0.00451961 37.4995C-0.0806326 38.8776 1.04881 40 2.43203 40C3.81524 40 4.92726 38.8769 5.02465 37.4996C6.30902 19.3366 21.4772 5 40 5C58.5228 5 73.691 19.3366 74.9753 37.4996Z" fill="#088AC1">
                <animateTransform attributeName="transform" type="rotate" from="0 40 40" to="360 40 40" dur="0.8s" repeatCount="indefinite"/>
            </path>
        </svg>
        <p class="m-modal-carga__cargando">Cargando</p>
    </section>
    
    <header class="g-header">
        <h1 class="g-header__titulo">Control de Aforo</h1>
    </header>

    <main>
        <div id="contenedor-info-aforo" class="contenedor-cards">
            <div class="o-grid-cards">
                
                <section class="m-card item-cupos-disponibles">
                    <h2 class="m-card__titulo m-card__titulo--grande">Cupos Disponibles</h2>
                    <div>
                        <p id="cantidad-cupos-disponibles" class="m-card__cantidad m-card__cantidad--grande">0</p>
                    </div>
                </section>
            
                <section class="m-card item-ocupacion-maxima">
                    <h3 class="m-card__titulo">Capacidad Máxima</h3>
                    <div>
                        <p id="cantidad-capacidad-maxima" class="m-card__cantidad m-card__cantidad--rojo">0</p>
                        <p class="m-card__unidad-medida">Personas</p>
                    </div>
                </section>

                <section class="m-card item-ocupacion-actual" tabindex="1">
                    <h3 class="m-card__titulo
                    " tabindex="1.1">Ocupación Actual</h3>
                    <div tabindex="1.2">
                        <p id="cantidad-ocupacion-actual" class="m-card__cantidad m-card__cantidad--azul">0</p>
                        <p class="m-card__unidad-medida">Personas</p>
                    </div>
                </section>
            
                <section id="aviso" class="m-aviso item-afluencia-actual">
                    <div class="m-aviso__border-top-bottom">
                        <p id="estado-afluencia-actual" class="m-aviso__mensaje">MAXIMA AFLUENCIA</p>
                    </div>
                </section>
            </div>
        </div>
    </main>

    <footer class="footer">
            <div class ="footer__logo-universidad">
                <img src="../resources/assets/icons/logo-universidad.webp">
            </div>
            <div class="footer__descripcion">
                <p>
                    Página web de prueba, diseñada en conjunto con un prototipo de control de aforo como proyecto de grado en la Universidad Distrital Francisco José de Caldas.
                    
                </p>
            </div>
            <div class="footer__info-tecnologia">
                Universidad Distrital Francisco José de Caldas
                <br>Tecnologia en Sistematización de Datos
            </div>
            <br>Bogotá D.C. - República de Colombia
            <br><time datetime="2021-11">Noviembre de 2021.</time>
    </footer>

    <script src="../resources/js/main.js" type="module"></script> 

</body>
</html>