<!DOCTYPE html>
{% verbatim %}
<!--
NOTE: This template is only meant to provide a bootstrap to help new projects
get up and running with wq.  Please throw this out and replace it with your own
interesting and unique designs, styles and layouts.  The sky is the limit!
-->
<html>
  <head>
    <title>Log In</title>
    {{>head}}
  </head>
  <body>
    <div data-role="page" class="ui-page">
      <div data-role="header">
        {{>home}}
        <h1>Log In</h1>
      </div>
      <div role="main" class="ui-content">
        {{#is_authenticated}}
        <p>Logged in as {{user.username}}</p>
        <a href="{{rt}}/logout" data-role="button" data-icon="delete">
          Log Out
        </a>
        {{/is_authenticated}}
        {{^is_authenticated}}
        <form action="{{rt}}/login" method="post" data-ajax="false"
            data-wq-json="true" data-wq-background-sync="false">
          {{>csrf}}
          <ul data-role="listview">
            <li>
              <label for="username">Username</label>
              <input name="username" id="username">
            </li>
            <li>
              <label for="password">Password</label>
              <input name="password" id="password" type="password">
            </li>
            <li>
              <div class="ui-grid-a">
                <div class="ui-block-a">
                  <a href="{{rt}}/" data-role="button" data-icon="back" data-direction="reverse">
                    Back
                  </a>
                </div>
                <div class="ui-block-b">
                  <button type="submit" data-icon="check" data-theme="b">
                    Submit
                  </a>
                </div>
              </div>
              <p class="error login-errors"></p>
            </li>
          </ul>
        </form>
        {{/is_authenticated}}
      </div>
    </div>
  </body>
</html>
{% endverbatim %}
