<?php
    defined('BASEPATH') OR exit('No direct script access allowed');
?>
<section class="container">
    <h1 class="center"><?= lang('pass_title'); ?></h1>
    <p class="lead center"><?= lang('pass_description'); ?></p>
    <div class="row">
        <div class="container">
            <div class="row">
                <textarea class="form-control input-lg" id="password" style="cursor:default;" readonly></textarea>
            </div>
            <div class="row float-right">
                <button id="copy" class="btn btn-default my-4 mr-2"><?= lang('pass_copy'); ?></button>
                <button id="generate" class="btn btn-primary my-4"
                        style="margin-right: 10px;"><?= lang('pass_generate'); ?></button>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <form class="form-horizontal">
                <div class="form-group">
                    <label class="col-md-6 control-label"
                           for="passwordLength"><?= lang('pass_length'); ?></label>
                    <div class="col-md-6">
                        <input id="passwordLength" name="passwordLength" value="15" class="form-control input-md"
                               required="" type="number">
                        <span class="help-block"><?= lang('pass_length_help'); ?></span>
                    </div>
                </div>

                <!-- Multiple Checkboxes -->
                <div class="form-group">
                    <label class="col-md-6 control-label"
                           for="components"><?= lang('pass_components'); ?></label>
                    <div class="col-md-6">
                        <div class="checkbox">
                            <label for="components-0">
                                <input name="components[]" id="components-0" class="cmpoe" value="uppercase"
                                       type="checkbox" checked>
                                <?= lang('pass_components_upper'); ?>
                            </label>
                        </div>
                        <div class="checkbox">
                            <label for="components-1">
                                <input name="components[]" id="components-1" class="cmpoe" value="lowercase"
                                       type="checkbox" checked>
                                <?= lang('pass_components_lower'); ?>
                            </label>
                        </div>
                        <div class="checkbox">
                            <label for="components-2">
                                <input name="components[]" id="components-2" class="cmpoe" value="numbers"
                                       type="checkbox" checked>
                                <?= lang('pass_components_numbers'); ?>
                            </label>
                        </div>
                        <div class="checkbox">
                            <label for="components-3">
                                <input name="components[]" id="components-3" class="cmpoe" value="symbols"
                                       type="checkbox" checked>
                                <?= lang('pass_components_special'); ?>
                            </label>
                        </div>
                    </div>
                </div>
            </form>
            <h3><?= lang('pass_tipps_title'); ?></h3>
            <ul>
                <li><?= lang('pass_tipps1'); ?></li>
                <li><?= lang('pass_tipps2'); ?></li>
                <li><?= lang('pass_tipps3'); ?></li>
                <li><?= lang('pass_tipps4'); ?></li>
                <strong><?= lang('pass_tipps5_title'); ?></strong>
                <li><?= lang('pass_tipps5'); ?></li>
            </ul>
            <p class="lead"><?= lang('pass_end'); ?></p>
        </div>
        <div class="col">
            <div class="card">
                <div class="card-header">
                    Verlauf
                </div>
                    <ul class="list-group list-group-flush" id="history"></ul>
            </div>
        </div>
    </div>
</section>