<div class="login fullscreen">
  <div class="fullscreen-center">
    <div class="fullscreen-body">
      <p><%- @T('Login with %s', @C('fqdn')) %></p>

      <% if @C('maintenance_mode'): %>
        <div class="hero-unit alert alert--danger js-maintenanceMode"><%- @T('Zammad is currently in maintenance mode. Only administrators can login. Please wait until the maintenance window is over.') %></div>
      <% end %>
      <% if @C('maintenance_login') && @C('maintenance_login_message'): %>
        <div class="hero-unit alert alert--success js-maintenanceLogin"><%- @C('maintenance_login_message') %></div>
      <% end %>

      <div class="hero-unit">
        <img class="company-logo" src="<%= @logoUrl %>" alt="<%= @C('product_name') %>">
        <form id="login">
          <div class="form-group">
            <div class="formGroup-label">
              <label for="username"><%- @Ti('Username / email') %></label>
            </div>
            <input id="username" name="username" type="text" class="form-control" value="<%= @item.username %>" autocapitalize="off" />
          </div>

          <div class="form-group">
            <div class="formGroup-label">
              <label for="password"><%- @Ti('Password') %></label>
            </div>
            <input id="password" name="password" type="password" class="form-control" autocomplete="off"/>
          </div>

          <div class="form-group">
    <!--
            <label for="remember_me"><%- @Ti('Remember me') %></label>
            <input id="remember_me" name="remember_me" value="1" type="checkbox"/>
    -->
            <label class="inline-label checkbox-replacement">
              <input name="remember_me" value="1" type="checkbox">
              <%- @Icon('checkbox', 'icon-unchecked') %>
              <%- @Icon('checkbox-checked', 'icon-checked') %>
              <span class="label-text"><%- @T('Remember me') %></span>
            </label>
          </div>

          <div class="form-controls">
            <button class="btn btn--primary" type="submit"><%- @T('Sign in') %></button>

            <% if @C('user_lost_password'): %>
              <a href="#password_reset" class="btn btn--text btn--secondary align-right"><%- @T('Forgot password?') %></a>
            <% end %>
          </div>

        </form>
        <% if !_.isEmpty(@auth_providers): %>
          <div class="separator">
            <span class="separator-text"><%- @T('or sign in using') %></span>
          </div>

          <div class="auth-providers">
            <% for auth_provider in @auth_providers: %>
              <form method="post" action="<%= auth_provider.url %>">
                <input type="hidden" name="authenticity_token" value="<%= Spine.Ajax.defaults.headers['X-CSRF-Token'] %>">
                <button type="submit" class="auth-provider auth-provider--<%= auth_provider.class %>">
                  <%- @Icon("#{auth_provider.class}-button", 'provider-icon') %>
                  <span class="provider-name"><%- @T(auth_provider.name) %></span>
                </button>
              </form>
            <% end %>
          </div>
        <% end %>
      </div>

      <p>
        <%- @T("You're already registered with your email address if you've been in touch with our support team.") %><br>
        <% if @C('user_lost_password'): %>
          <%- @T('You can request your password') %> <a href="#password_reset"><%- @T('here') %></a>.
        <% end %>
      </p>

    <% if @C('user_create_account'): %>
      <hr>
      <p>
        <a href="#signup"><%- @T('Register as a new customer') %></a>
      </p>
    <% end %>
    </div>
  </div>
  <div class="poweredBy">
    <a href="https://zammad.org" target="_blank"><%- @Icon('logo') %></a>
    <%- @T('Powered by') %>
    <a href="https://zammad.org" target="_blank"><%- @Icon('logotype', 'logotype') %></a>
  </div>
</div>
