{% extends 'base.html' %}

{% block main %}
    <div class="tab-content" id="tabr_gen">
        <div class="col_4">
            <form class="vertical" action="{{ url_for('generate') }}" method="get" id="password_form">
                <label for="frm_length">Password length</label>
                <input id="frm_length" name="frm_length" type="text" placeholder="16"/>

                <label for="frm_amount">Passwords amount</label>
                <input id="frm_amount" name="frm_amount" type="text" placeholder="10"/>

                <fieldset>
                    <legend>Options</legend>

                    <input type="checkbox" id="frm_ascii_uc" name="frm_ascii_uc" checked/>
                    <label for="frm_ascii_uc" class="inline">ASCII uppercase</label>
                    <br/>

                    <input type="checkbox" id="frm_ascii_lc" name="frm_ascii_lc" checked/>
                    <label for="frm_ascii_lc" class="inline">ASCII lowercase</label>
                    <br/>

                    <input type="checkbox" id="frm_digits" name="frm_digits" checked/>
                    <label for="frm_digits" class="inline">Digits</label>
                    <br/>

                    <input type="checkbox" id="frm_symbols" name="frm_symbols"/>
                    <label for="frm_symbols" class="inline">Symbols</label>
                </fieldset>

                <button class="medium green" id="do_the_magic"><i class="icon-magic"></i> Do the magic</button>
            </form>
        </div>
        <div class="col_8">
            <label for="passwords_list">Passwords:</label>
            <!-- Code HTML -->
            <textarea id="passwords_list"></textarea>
            <a href="#" id="select_all">Select all</a>
        </div>
    </div>

{#    <div class="tab-content" id="tabr_api"></div>#}
{% endblock %}