<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Log In - Clay</title>
    <style>
       @keyframes fadeIn {
          from {
            opacity: 0;
            }
          to {
            opacity: 1;
            }
        }
      animation: fadeIn 1s ease-in;
      .flash-error,
      .header,
      .details,
      .button,
      .separator,
      .login-form input,
      .login-form button {
        font-family: Arial, Helvetica, sans-serif;
      }

      .login-page {
        display: flex;
        justify-content: center;
        margin: 3em;
      }

      .flash-error {
        background-color: #ff9696;
        border: solid 1px #ff2e2e;
        border-radius: 4px;
        max-width: 90vw;
        padding: 10px;
        position: absolute;
        top: 10px;
      }

      .wrapper {
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        margin: 0 auto;
        max-width: 600px;
      }

      .clay-logo {
        align-items: center;
        display: flex;
        flex-flow: column wrap;
        margin: 0 auto;
        max-width: 100%;
        width: 300px;
      }

      .header,
      .details,
      .separator {
        text-align: center;
        width: 100%;
      }
      .details.maintenance {
        animation: fadeIn 1s ease-in;
        background-color: #FFF3CD;
        border-radius: 5px;
        border: 2px solid #FFC107;
        color: #FF0000;
        font-size: 24px;
        padding: 20px;
      }

      .header {
        margin-bottom: 0;
      }

      .separator {
        color: #666;
        margin: 25px 0;
      }

      .login-options {
        align-items: center;
        border: solid 1px #aaa;
        border-radius: 3px;
        display: flex;
        flex-flow: row wrap;
        font-size: 16px;
        justify-content: center;
        margin-top: 25px;
        padding: 50px;
        width: 600px;
      }

      .buttons {
        display: flex;
        flex-flow: row wrap;
        width: 100%;
      }

      .button {
        align-items: center;
        background-color: #fff;
        border: solid 1px #aaa;
        border-radius: 3px;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        padding: 15px 0;
        transition: background-color 150ms ease-out;
        width: 100%;
      }

      .button:hover {
        background-color: #fafafa;
      }

      .button,
      .button:hover,
      .button:active,
      .button:visited {
        color: #666;
        text-decoration: none;
      }

      .button-icon,
      .button-icon svg {
        fill: #666;
        height: auto;
        max-width: 32px;
      }

      .button > .button-text {
        margin: 0 8px;
      }

      .login-form {
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
      }

      .login-form button {
        background: #aaa;
        border-radius: 3px;
        color: #fff;
        cursor: pointer;
        font-size: 17px;
        font-weight: bold;
        outline: 0;
        padding: 15px;
        -webkit-transition: all 0.3 ease;
        transition: all 0.3 ease;
        width: 320px;
      }

      .login-form button:hover,
      .login-form button:active,
      .login-form button:focus {
        background: #000;
      }

      .login-form input {
        border: solid 1px #aaa;
        border-radius: 3px;
        font-size: 16px;
        margin-bottom: 25px;
        padding: 12px;
        width: 100%;
      }

      .buttons .button:not(:last-child) {
        margin-bottom: 25px;
      }
    </style>
</head>
<body class="login-page">
  {{#each flash.error}}
    <div class="flash-error">{{ this }}</div>
  {{/each}}
  <div class="wrapper">
    <div class="clay-logo">
      <a href="{{path}}" title="Back to site">{{> clay-logo }}</a>
    </div>
    {{#with user }}
      {{#if name}}
        <h1 class="header">Welcome, {{ name }}</h1>
      {{else}}
        <h1 class="header">Welcome, {{ username }}</h1>
      {{/if}}
      <p class="details">You are currently logged in to Clay.</p>
      {{#if ../maintenanceModeEnabled}}
        <p class="details maintenance">Clay is undergoing some routine maintenance. It will be back online shortly.</p>
      {{/if}}
    {{else}}
      <h1 class="header">Log in to Clay</h1>
      {{#if currentProviders.length}}<p class="details">Please choose the provider attached to your account</p>{{/if}}
    {{/with}}
    <div class="login-options">
      {{#if user}}
        <a class="button logout" href="{{ logoutLink }}" title="Log Out">
          <div class="button-icon">{{> logout }}</div>
          <span class="button-text">Log out</span>
        </a>
      {{else}}
        {{#if currentProviders.length}}
          <div class="buttons">
            {{#each currentProviders}}
                <a class="button {{this.name}}" href="{{ this.url }}" title="{{ this.title }}">
                  <div class="button-icon">{{> ( icon ) }}</div>
                  <span class="button-text">{{ this.title }}</span>
                </a>
            {{/each}}
          </div>
        {{/if}}
        {{#if useLocalAuth}}
        <form class="login-form" action="{{localAuthPath}}" method="post">
          <input id="username" name="username" type="text" placeholder="Username" />
          <input id="password" name="password" type="password" placeholder="Password" />
          <button type="submit">Login</button>
        </form>
        {{/if}}
      {{/if}}
    </div>
  </div>
</body>
</html>
