<main class="container">
    <h1>Registrar un nuevo HOST de Moodle</h1>
    <button class="btn btn-primary" @click="page = 'host'">
        Regresar
        <i class="fas fa-arrow-left"></i>
    </button>
    <form action="/action/new_host.php" method="post">
        <div class="grid">
            <label for="etiqueta">
                Etiqueta
                <input type="text" name="etiqueta" placeholder="Etiqueta para identificar el host" required :value="edit_host.etiqueta">
                <small>Etiqueta para identificar: <code>Moodle2023A</code></small>
            </label>
            <label for="base_datos">
                Base de datos
                <input type="text" name="base_datos" placeholder="Nombre de la base de datos" required :value="edit_host.postgres_dbname">
                <small>Ejemplo: <code>moodle42licdb</code></small>
            </label>
        </div>
        <div class="grid">
            <label for="host">
                Host de Moodle
                <input type="text" name="host" placeholder="200.13.89.000" required :value="edit_host.host">
                <small>localhost, moodleXYZ.lci.ulsa.mx, 200.13.89.000</small>
            </label>


            <label for="puerto">
                Puerto de la base de datos
                <!-- validate only numbers -->
                <input type="text" name="puerto" placeholder="5432" required value="5432" pattern="[0-9]+" :value="edit_host.puerto">
            </label>
        </div>
        <div class="grid">
            <label for="usuario">
                Usuario de Postgres
                <input type="text" name="usuario" placeholder="postgres" required value="postgres" :value="edit_host.postgres_user">
            </label>
            <label for="password">
                Contraseña de Postgres
                <input type="password" name="password" placeholder="Contraseña del usuario postgres" required>
            </label>
        </div>
        <div class="grid">
            <label for="periodos[]">Which periodos would you like to order?
                <select id="periodos[]" name="periodos[]" multiple required>
                    <?php
                    foreach ($sgi_db
                        ->orderBy('Periodo_fecha_inicial', 'DESC')
                        ->join('Nivel n', 'n."Nivel_id" = p."Nivel_id"')
                        ->get('Periodo p', 10, ['Periodo_id', 'Periodo_desc', 'Nivel_desc']) as $periodo) : ?>
                        <option value="<?= $periodo['Periodo_id'] ?>" :selected="edit_host.periodos_gema.includes(<?= $periodo['Periodo_id'] ?>)">
                            <?= $periodo['Periodo_desc'] ?> de <?= $periodo['Nivel_desc'] ?>
                        </option>
                    <?php endforeach ?>
                </select>
            </label>
        </div>
        <div class="grid">
            <button type="submit">
                Registrar
                <i class="fas fa-database"></i>
            </button>
        </div>
    </form>
</main>