{%- extends "nav" -%}
{%- block card %}
      <!-- LOGIN FORM -->
      <div class="card center">
        <div class="card-container">
          <form id="login_form" action="/login" method="post">
            <!-- input for username -->
            <input id="username" name="username" class="center input" type="text" placeholder="Username" title="Username for authentication" autofocus/>
            <!-- input for password -->
            <input id="password" name="password" class="center input" type="password" placeholder="Password" title="Password for given username"/>
            <div id="buttonDiv">
              <input id="loginUser" class="button button-primary center" title="Login" type="submit" value="Login">
              <a class="button button-secondary center" href="/" title="Cancel">Cancel</a>
            </div>
          </form>
          <!-- FLASH MESSAGE -->
          <!-- check for flash message and display accordingly -->
          {% if flash_msg and flash_name == "success" %}
          <!-- display success message -->
          <div class="capsule center-text flash-message font-success">{{ flash_msg }}.</div>
          {%- elif flash_msg and flash_name == "info" %}
          <!-- display info message -->
          <div class="capsule center-text flash-message font-info">{{ flash_msg }}.</div>
          {%- elif flash_msg and flash_name == "error" %}
          <!-- display error message -->
          <div class="capsule center-text flash-message font-failure">{{ flash_msg }}.</div>
          {%- endif -%}
        </div>
      </div>

{%- endblock card -%}