<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="author" content="Albert Espín" />
    <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <title>Auto Control</title>
    <link rel="stylesheet" href="/assets/css/bulma.css" />
    <link rel="stylesheet" href="/assets/css/app.css" />
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png" />
</head>
<style>
    .centered-column {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        /* Asegura que ocupe toda la altura de la pantalla */
    }
</style>

<body class="light">
    <nav class="navbar" role="navigation" aria-label="main navigation">
        <div class="navbar-brand">
            <a class="navbar-item" href="#">
                <img src="data:image/png;base64,[encoded data, 7380 characters]"
                    width="112" height="28" alt="Grupo CELSA" />
            </a>
            <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false"
                data-target="navbarBasicExample">
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
            </a>
        </div>
        <div id="navbarBasicExample" class="navbar-menu">
            <div class="navbar-start">
                <a class="navbar-item" href="/">
                    Inicio
                </a>
                <div class="navbar-item has-dropdown is-hoverable">
                    <a class="navbar-link">
                        Mediciones Antes Enderezado
                    </a>
                    <div class="navbar-dropdown">
                        <a class="navbar-item" href="/mediciones/view">
                            Vigas
                        </a>
                        <a class="navbar-item" href="#">
                            Angulares
                        </a>
                        <a class="navbar-item" href="#">
                            Canales
                        </a>
                        <hr class="navbar-divider" />
                    </div>
                </div>
                <div class="navbar-item has-dropdown is-hoverable">
                    <a class="navbar-link">
                        Vistas
                    </a>
                    <div class="navbar-dropdown">
                        <a class="navbar-item" href="/vista/get">
                            Antes enderezado
                        </a>
                        <a class="navbar-item" href="#">
                            Después enderezado
                        </a>
                        <hr class="navbar-divider" />
                    </div>
                </div>
                <div class="navbar-item has-dropdown is-hoverable">
                    <a class="navbar-link">
                        Configuración
                    </a>
                    <div class="navbar-dropdown">
                        <a class="navbar-item" href="#">
                            Usuarios
                        </a>
                        <hr class="navbar-divider" />
                    </div>
                </div>
                <div class="navbar-end">
                    <div class="navbar-item">
                        <div class="buttons">
                            <a class="button is-light" href="#">
                                Cerrar sesión
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nav>
    <br />
    <div class="columns is-desktop">
        <div class="column is-4">
            <nav class="panel is-info">
                <p class="panel-heading">
                    Informes
                </p>
                <form id="report_form">
                    <div class="panel-block">
                        <div class="columns">
                            <div class="column is-4">
                                <p class="control">
                                    <label for="fecha-inicio">Fecha inicio:</label>
                                    <input type="datetime-local" id="fecha-inicio" name="fecha-inicio" required />
                                </p>
                            </div>
                            <div class="column is-4">
                                <p class="control">
                                    <label for="fecha-final">Fecha final:</label>
                                    <input type="datetime-local" id="fecha-final" name="fecha-final" required />
                                </p>
                            </div>
                            <div class="column is-4">
                                <p class="control">
                                    <label for="fecha-final">Producto:</label>
                                    <input type="text" id="producto" name="producto" required />
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="panel-block">
                        <div class="control">
                            <button type="button" class="button is-link" onclick="Report();">Report</button>
                            <button type="reset" class="button is-danger">Reset</button>
                        </div>
                    </div>
                </form>
            </nav>
        </div>
        <script src="/assets/js/jquery.js"></script>
        <script src="/assets/js/reporting.js"></script>
    </div>
    <div class="columns">
        <div class="column">
            <footer data-testid="footerTemplate">
                <div>&copy; Albert Espín CELSA.SL 2024 - 2024</div>
            </footer>
        </div>
    </div>
</body>

</html>