<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="static/weui.min.css">
    <title>login</title>
</head>
<body>
  {% if user %}
  <style>pre{white-space:wrap}</style>
  <div>Logged in as <strong>{{user}}</strong> (<a href="{{ url_for('.logout') }}">Log Out</a>)</div>

  {% else %}
  <form action="" method="post">
    <div class="page">
        <div class="weui-form">
          <div class="weui-form__text-area">
            <h2 class="weui-form__title">SmartPower</h2>
            <!-- <div class="weui-form__desc">展示表单页面的信息结构样式, 分别由头部区域/控件区域/提示区域/操作区域和底部信息区域组成。</div> -->
          </div>
          <div class="weui-form__control-area">
            <div class="weui-cells__group weui-cells__group_form">
              <div class="weui-cells__title">Login</div>
              <div class="weui-cells">
                <label for="username" class="weui-cell weui-cell_active">
                  <div class="weui-cell__hd"><span class="weui-label">Username</span></div>
                  <div class="weui-cell__bd">
                      <input id="username" name="username" class="weui-input" />
                  </div>
                </label>
                <label for="password" class="weui-cell weui-cell_active">
                  <div class="weui-cell__hd"><span class="weui-label">Password</span></div>
                  <div class="weui-cell__bd">
                      <input id="password" name="password" type="password" class="weui-input" placeholder=""/>
                  </div>
                </label>
                <div class="weui-form__opr-area">
                  <button class="weui-btn weui-btn_primary" type="submit">Login</button>
                </div>                
              </div>
            </div>
          </div>
    </div>
  </form>
  {% endif %}  
</body>
</html>