<!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-2.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-2021 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>
