<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ESPHome Dashboard</title>
  <link rel="stylesheet" href="{{ get_static_file_url('fonts/material-icons.css') }}">
  <link rel="stylesheet" href="{{ get_static_file_url('materialize.min.css') }}">
  <link rel="stylesheet" href="{{ get_static_file_url('esphome.css') }}">
  <link rel="shortcut icon" href="{{ get_static_file_url('favicon.ico') }}">

  <script src="{{ get_static_file_url('materialize.min.js') }}"></script>

  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>

<header>
<nav>
  <div class="nav-wrapper indigo">
      <a class="brand-logo left" href="#">ESPHome Dashboard</a>
  </div>
</nav>

<div class="ribbon"></div>
</header>

<main>
<div class="container">
  <div class="row">
    <div class="col card s10 offset-s1 m10 offset-m1 l8 offset-l2">
      <form action="./login" method="post">
        <div class="card-content">
          <span class="card-title">Enter credentials</span>
          {% if hassio %}
            <p>
              Please login using your Home Assistant credentials.
            </p>
          {% end %}
          {% if error is not None %}
            <p class="error">
              {{ escape(error) }}
            </p>
          {% end %}
          <div class="row">
            {% if has_username or hassio %}
              <div class="input-field col s12">
                <label for="username">Username</label>
                <input type="text" class="validate" name="username" id="username" />
              </div>
            {% end %}
            <div class="input-field col s12">
              <label for="password">Password</label>
              <input type="password" class="validate" name="password" id="password" />
            </div>
          </div>
        </div>
        <div class="card-action right-align">
          <button class="btn indigo waves-effect waves-light" type="submit" name="action">Login</button>
        </div>
      </form>
    </div>
  </div>
</div>
</main>

<footer class="page-footer indigo darken-1">
  <div class="container">

  </div>
  <div class="footer-copyright">
    <div class="container">
      © 2019 Copyright ESPHome, Made with <a class="grey-text text-lighten-4" href="https://materializecss.com/" target="_blank">Materialize</a>
        <a class="grey-text text-lighten-4 right" href="{{ docs_link }}"
           target="_blank">ESPHome {{ version }} Documentation</a>
    </div>
  </div>
</footer>
</body>
</html>
