{% extends base.template.html %}

{% block title %}Login{% end %}

{% block main %}
<style>
.container {
  display: flex;
  justify-content: center;
}
.card {
  max-width: 500px;
}

/* Login Page */
.row.no-bottom-margin {
  margin-bottom: 0 !important;
}

.input-field input:focus + label {
  color: #000;
}

.input-field input:focus {
  border-bottom: 1px solid #000;
  box-shadow: 0 1px 0 0 #000;
}

.input-field .prefix.active {
  color: #000;
}

/* Alerts & Errors */
.alert {
  width: 100%;
  margin: 10px auto;
  padding: 10px;
  border-radius: 2px;
  border-left-width: 4px;
  border-left-style: solid;
}

.alert .title {
  font-weight: bold;
}

.alert .title::after {
  content: "\A";
  white-space: pre;
}

.alert.alert-error {
  color: var(--alert-error-color);
  border-left-color: var(--alert-error-color);
  background-color: var(--alert-error-color-bg);
}

.card.card-error {
  border-top: 4px solid var(--alert-error-color);
}
</style>
<div class='container'>
  <div class="card" id="login-card">
    <div class="card-content">
      <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>
{% end %}

{% block footer %}
<script src="{{ get_static_file_url('js/vendor/jquery/jquery.min.js') }}"></script>
<script src="{{ get_static_file_url('js/vendor/jquery-ui/jquery-ui.min.js') }}"></script>
<script src="{{ get_static_file_url('js/vendor/jquery-validate/jquery.validate.min.js') }}"></script>
<script src="{{ get_static_file_url('js/vendor/materialize/materialize.min.js') }}"></script>
{% end %}
