<style>
    html,
    body {
        height: 100%;
    }

    body {
        display: flex;
        align-items: center;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .form-signin {
        width: 100%;
        max-width: 430px;
        padding: 15px;
        margin: auto;
    }
</style>
<main class="form-signin">
    <a href="<?php echo base_url() ?>"><img src="<?php echo $this->paths->cache_buster('/assets/logo/' . $this->optionslib->get_logo('main_logo') . '.png'); ?>" class="mx-auto d-block mainLogo" alt=""></a>
    <?php if (MAINTENANCE_MODE) { ?>
        <div class="d-flex justify-content-center align-items-center">
            <span class="badge text-bg-warning mb-4 pt-2 pb-2"><?= __("MAINTENANCE MODE"); ?></span>
        </div>
    <?php } ?>
    <div class="my-2 rounded-0 shadow-sm card mb-2 shadow-sm">
        <div class="card-body">
            <?php
            /**
             * Wavelog Demo
             *
             * This enables the Wavelog Demo as used in https://demo.wavelog.org.
             *
             * If you want to use this, place a file called `.demo` in the root folder
             * and create a non-admin user `demo` with password `demo` by hand.
             *
             * It's recommend to create a cronjob which resets this installation every day at 0200 UTC from a backup.
             * We do not provide any functionality for this, so you have to build this on your own.
             *
             */
            if (file_exists('.demo')) { ?>
                <div class="border-bottom mb-3">
                    <h5><?= __("Welcome to the Demo of Wavelog"); ?></h5>
                    <p><?= __("This demo will be reset every night at 0200z."); ?><br><br>
                    <?= __("Username"); ?>: demo<br>
                    <?= __("Password"); ?>: demo<br><br>
                    <?= sprintf(__("More Information about Wavelog on %sGithub%s."), '<a href="https://www.github.com/wavelog/wavelog" target="_blank">', '</a>'); ?></p>
                </div>
            <?php }
            // End of Demo Part
             ?>
            <form method="post" action="<?php echo site_url('user/login'); ?>" name="users">
                <?php $this->form_validation->set_error_delimiters('', ''); ?>
                <?php if (!$hide_login_form) { ?>
                <input type="hidden" name="id" value="<?php echo $this->uri->segment(3); ?>" />
                <div class="mb-2">
                    <label for="floatingInput"><strong><?= __("Username"); ?></strong></label>
                    <input type="text" name="user_name" class="form-control" id="floatingInput" placeholder="<?php if (file_exists('.demo')) { echo "demo"; } else { echo __("Username"); } ?>" value="<?php echo html_escape($this->input->post('user_name')); ?>" autocomplete="username" autofocus>
                </div>
                <div class="mb-2">
                    <label for="floatingPassword"><strong><?= __("Password"); ?></strong></label>
                    <input type="password" name="user_password" class="form-control" id="floatingPassword" placeholder="<?php if (file_exists('.demo')) { echo "demo"; } else { echo __("Password"); } ?>" autocomplete="current-password">
                </div>
                <div class="mb-2">
                    <div class="row">
                        <div class="col text-start">
                            <small><a class="" href="<?php echo site_url('user/forgot_password'); ?>"><?= __("Forgot your password?"); ?></a></small>
                        </div>
                        <div class="col text-end">
                            <?php  // we only want to create these cookies if the site is reached by https
                                if ($https_check == true && $this->config->item('encryption_key') != 'flossie1234555541') { ?>
                                    <input type="checkbox" value="1" name="keep_login" id="keep_login" />
                                    <label for="keep_login"><small><?= __("Keep me logged in"); ?></small></label>
                            <?php } ?>
                        </div>
                    </div>
                </div>
                <button class="w-100 btn btn-primary mb-2" type="submit" id="loginButton"><span class="spinner-border spinner-border-sm me-1 d-none" role="status" aria-hidden="true"></span><?= __("Login"); ?> →</button>
                <?php } ?>
                <?php  // only show if header auth enabled
                    if ($auth_header_enable == true) { ?>
                    <div class="mb-2">  
                        <a href="<?php echo site_url('header_auth/login'); ?>" class="btn btn-secondary w-100">  
                            <?= $auth_header_text; ?>  
                        </a>  
                    </div>  
                <?php } ?>
                <?php $this->load->view('layout/messages'); ?>
            </form>
        </div>
    </div>
</main>
<script>
    document.querySelector('form[name="users"]').addEventListener('submit', function () {
        const button = document.getElementById('loginButton');
        if (button) {
            button.querySelector('.spinner-border').classList.remove('d-none');
            button.disabled = true;
        }
    });
</script>
