{% from "_bootstrapform.html" import render_form %}

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="{{url_for('static', filename='css/bootstrap.min.css')}}"/>
    <link rel="stylesheet" href="{{url_for('static', filename='css/font-awesome.min.css')}}"/>
  </head>

  <body>

    <div class="container">

      <form class="form-horizontal" role="form" method="POST" action="{{url_for('dashboard.login')}}">
        {{ form.csrf_token }}
        <div class="row">
          <div class="col-md-3"></div>
          <div class="col-md-6">
            {% with messages = get_flashed_messages(with_categories=true) %}
              {% for cat, message in messages %}
                <div class="alert {{cat}}" role="alert">
                  {{message}}
                </div>
              {% endfor %}
            {% endwith %}
          </div>
        </div>
        <div class="row">
          <div class="col-md-3"></div>
          <div class="col-md-6">
            <h2>Login to extrapypi</h2>
            <hr>
          </div>
        </div>
        <div class="row">
          <div class="col-md-3"></div>
          <div class="col-md-6">
            <div class="form-group has-danger">
              <label class="sr-only" for="username">Username</label>
              <div class="input-group mb-2 mr-sm-2 mb-sm-0">
                <div class="input-group-addon" style="width: 2.6rem"><i class="fa fa-user"></i></div>
                {{form.username(class_="form-control", placeholder="username")}}
              </div>
            </div>
          </div>
          <div class="col-md-3">
            {% if form.username.errors %}
            <div class="form-control-feedback">
              <span class="text-danger align-middle">
                <i class="fa fa-close"></i> Username is required
              </span>
            </div>
            {% endif %}
          </div>
        </div>
        <div class="row">
          <div class="col-md-3"></div>
          <div class="col-md-6">
            <div class="form-group">
              <label class="sr-only" for="password">Password</label>
              <div class="input-group mb-2 mr-sm-2 mb-sm-0">
                <div class="input-group-addon" style="width: 2.6rem"><i class="fa fa-key"></i></div>
                {{ form.password(class_="form-control", placeholder="password") }}
              </div>
            </div>
          </div>
          <div class="col-md-3">
            {% if form.username.errors %}
            <div class="form-control-feedback">
              <span class="text-danger align-middle">
                <i class="fa fa-close"></i> Password is required
              </span>
            </div>
            {% endif %}
          </div>
        </div>
        <div class="row">
          <div class="col-md-3"></div>
          <div class="col-md-6" style="padding-top: .35rem">
            <div class="form-check mb-2 mr-sm-2 mb-sm-0">
              <label class="form-check-label">
                {{ form.remember(class_="form-check-input") }}
                <span style="padding-bottom: .15rem">Remember me</span>
              </label>
            </div>
          </div>
        </div>
        <div class="row" style="padding-top: 1rem">
          <div class="col-md-3"></div>
          <div class="col-md-6">
            <button type="submit" class="btn btn-success"><i class="fa fa-sign-in"></i> Login</button>
          </div>
        </div>
      </form>
    </div>

  </body>
</html>
