{extends '../../../../../module/Application/view/layout/layout.tpl'}
{block 'content'}
    <header id="vault-header">
        <div class="header-wrapper">
            <a class="navbar-brand" href="/vault">
                <img src="img/texte-logo.png">
            </a>
        </div>
    </header>
    <link href="css/vault.css" type="text/css" rel="stylesheet"/>

    <section class="contact-wrap">
        <form class="material-form" onsubmit="return genpass();">
            <div class="input-block floating-field">
                <label>Url du site</label>
                <input value="" class="form-control" name="url" type="url" id="url" required>
            </div>
            <div class="input-block floating-field">
                <label>Votre mot de passe pour encoder</label>
                <input name="salt" type="password" class="form-control" id="salt" required/>
            </div>
            <div class="input-block floating-field">
                <label>Taille</label>
                <input name="maxchars" type="number" class="form-control" value="10" id="maxchars" required/>
            </div>

            <button class="btn square-button material-btn d-sm-none">Générer</button>
            <button class="btn square-button material-btn d-none d-sm-block">Générer votre mot de passe sécurisé</button>

            <p class="result">
                <label for="resAlNum">Alphanumérique</label>
                <input name="resAlNum" class="feedback-input" type="text" class="" id="resAlNum" disabled/>
                <label for="resAlNumSpe">Alphanumérique + Spé</label>
                <input name="resAlNumSpe" class="feedback-input" type="text" class="" id="resAlNumSpe" disabled/>
            </p>
        </form>
    </section>
    <script src="js/libs/sha512.js"></script>
    <script src="js/vault.js"></script>
{/block}