<!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 rel="stylesheet" href="../../resources/css/styles.css">
</head>
<body class="body">
    <div id="modal-confirmacion-aforo" class="o-modal js-cerrar-modal">
        <section class="o-modal__recuadro">
            <h2 class="o-modal__titulo">Capacidad Máxima</h2>
            <p class="o-modal__descripcion">
                Su establecimiento acoge <span id="ocupacion-maxima"></span> personas con un distanciamiento mínimo de <span id="distancia-entre-personas">x</span> metros.
            </p>
            <section class="u-dos-columnas">
                <button id="btn-rechazar" class="o-boton o-boton--negro">Rechazar</button>
                <button id="btn-aceptar" class="o-boton o-boton--negro">Aceptar</button>
            </section>

        </section>
    </div>

    <div id="modal-aforo-bajo" class="o-modal js-cerrar-modal">
        <section class="o-modal__recuadro">
            <h2 class="o-modal__titulo">Capacidad Máxima</h2>
            <p class="o-modal__descripcion">
                Por favor, rectifique los datos ingresados, la ocupación máxima es menor a 4 personas.
            </p>
            <a id="btn-aceptar-error" class="o-boton o-boton--negro">
                Aceptar
            </a>
        </section>
    </div>

    <div class="c-resumen">
        <h1 class="c-resumen__titulo">Resumen de Datos</h1>
        <section class="c-resumen__campo">
            <h2 class="c-resumen__subtitulo">Area del Establecimiento</h2>
            <p class="c-resumen__valores"><span id="area-establecimiento"></span> m<sup>2</sup></p>
        </section>
        <section class="c-resumen__campo">
            <h2 class="c-resumen__subtitulo">Area No Transitable</h2>
            <p class="c-resumen__valores"><span id="area-no-transitable"></span> m<sup>2</sup></p>
        </section>
        <section class="c-resumen__campo">
            <h2 class="c-resumen__subtitulo">Area por Persona</h2>
            <p class="c-resumen__valores"><span id="area-por-persona" ></span> m<sup>2</sup></p>
        </section>
        <section class="u-dos-columnas">
            <button class="o-boton o-boton--azul" tabindex="1" id="btn-anterior">Anterior</button>
            <button class="o-boton o-boton--azul o-boton--is-oculto" id="btn-siguiente">Siguiente</button>
        </section>
        <button class="o-boton o-boton--azul" tabindex="2" id="btn-calcular-aforo">Calcular Aforo</button>
    </div>
</body>

<script type="module" src="../../resources/javascript/views/formulario/resumen.js"></script>
</html>