{% extends "base/main_base.html" %}

{% set active_page = "admin" %}
{% block pagehead %}
	<title>{{active_page.capitalize()}}</title>
	<style>
        .hidden {
            display: none;
        }

        .show {
            display: inline-block;
        }

        .active {
            width: 6rem;
            color: white;
            background-color: #34ce57;
        }

        .inactive {
            width: 6rem;
            color: white;
            background-color: #ff253a;
        }

        .all_inactive {
            display: none;
        }
    </style>
{% endblock %}
{% block content %}
{%include 'admin/nav.html'%}
<br>
<div class="container col-md-6 off-set-3">
    <form action="/admin/add" method="post">
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                  <span class="input-group-text"><i class="fa fa-user"></i></span>
              </div>
            <input type="text" name="name" class="form-control" id="user_name" placeholder="Name" required autocomplete="off">
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                  <span class="input-group-text"><i class="fa fa-key"></i></span>
            </div>
            <input type="password" name="password" class="form-control" id="user_password" placeholder="Password" required autocomplete="off">
        </div>
        <div class="input-group mb-3">
            <div class="custom-control custom-checkbox">
                <input type="checkbox" name="admin_user" class="custom-control-input" id="admin_user" value="True" checked>
                <label for="admin_user" class="custom-control-label">Admin User</label>
            </div>
        </div>
        <table class="table">
                <tbody>
                    {%for role in roles%}

                    <tr>
                        <td><input type="checkbox" name="role_{{role.id}}"></td>
                        <td>{{role.name}}</td>
                    </tr>
                
                    {%endfor%}
                </tbody>
        </table>
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
        <input type="submit" class="btn btn-info" value="add" required>
    </form>
</div>
{% endblock %}