{% extends base_with_header_footer.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 ha_addon %} 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>
        document.getElementById("login-card").classList.add("card-error");
      </script>
      {% end %}

      <form action="./login" method="post" id="login-form">
        {% if has_username or ha_addon %}
        <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 %}
