<!DOCTYPE html>
<html lang="en" id="login-page">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login - ESPHome</title>

  <link rel="shortcut icon" href="{{ get_static_file_url('images/favicon.ico') }}">

  <link rel="stylesheet" href="{{ get_static_file_url('fonts/material-icons/material-icons.css') }}">
  <link rel="stylesheet" href="{{ get_static_file_url('css/vendor/materialize/materialize.min.css') }}">
  <link rel="stylesheet" href="{{ get_static_file_url('css/esphome.css') }}">

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

<body>
  <div class="valign-wrapper">
    <div class="valign">
      <div class="container">
        <div class="row">
          <div class="col s12 m8 offset-m2 l8 offset-l2 xl6 offset-xl3">
            <div class="card" id="login-card">
              <div class="card-content">
                <img src="https://esphome.io/_static/logo-text.svg" alt="ESPHome Logo" class="logo">
                <span class="version-number center">v{{ version }}</span>
                <span class="card-title black-text center">Dashboard Login</span>
                <p class="center">
                  {% if hassio %}
                  Login by entering your Home Assistant login credentials.
                  {% else %}
                  Login by entering your ESPHome login credentials.
                  {% end %}
                </p>

                {% if error is not None %}
                <div class="alert alert-error">
                  <span class="title">Error!</span>
                  {{ escape(error) }}
                </div>

                <script>
                  $("#login-card").addClass("card-error");
                </script>
                {% end %}

                <form action="./login" method="post" id="login-form">
                  {% if has_username or hassio %}
                  <div class="row no-bottom-margin">
                    <div class="input-field col s12">
                      <i class="material-icons prefix">person</i>
                      <input name="username" id="username" type="text">
                      <label for="username">Username</label>
                    </div>
                  </div>
                  {% end %}

                  <div class="row no-bottom-margin">
                    <div class="input-field col s12">
                      <i class="material-icons prefix">lock</i>
                      <input name="password" id="password" type="password">
                      <label for="password">Password</label>
                    </div>
                  </div>
                </form>
              </div>

              <div class="card-action center">
                <input type="submit" class="btn blue-grey darken-2" name="action" form="login-form" value="Login">
              </div>
            </div>
          </div>
        </div>
      </div>

      <footer class="center-align">
        <p>Copyright © 2019-2020 ESPHome.</p>
        <p>
          <a href="{{ docs_link }}" target="_blank" rel="noreferrer">ESPHome
            {{ version }} Documentation</a>
        </p>
        <p>
          Made with <a href="https://materializecss.com/" target="_blank">Materialize.</a>
        </p>
      </footer>

    </div>
  </div>
</body>

</html>
