<div class="well no-padding">
  <%= simple_form_for(resource, as: resource_name, url: session_path(resource_name), html: { class: "smart-form client-form" }) do |f| %>
    <header>Acessar</header>

    <fieldset>
      <section>
        <%= f.label :credentials, class: "label" %>
        <label class="input">
          <i class="icon-append fa fa-user"></i>
          <%= f.input_field :credentials, required: false, autofocus: true %>
        </label>
      </section>

      <section>
        <%= f.label :password, class: "label" %>
        <label class="input">
          <i class="icon-append fa fa-eye-slash" id="eye" style="cursor: pointer;
            position: absolute; color: #188ad1" onclick="return showPassword();" onkeyup="showPassword()" role="button" >
          </i>
          <%= f.input_field :password, required: false %>
        </label>

        <div class="note">
          <%= render "devise/shared/links" %>
        </div>
      </section>

    </fieldset>

    <footer>
      <%= f.button :submit, "Acessar", class: "btn btn-primary", id: 'btn-login' %>
    </footer>
  <% end %>

  <script>
    var error = <%= @time %>;

    if (error !== 0) {
      document.getElementById('btn-login').disabled = true;

      setTimeout(function(){
        document.getElementById('btn-login').disabled = false;
      }, <%= @time %>);
    }

    function showPassword() {
      var input = document.getElementById("user_password");
      var eye = document.getElementById("eye");
      if (input.type === "password") {
        input.type = "text";
        eye.classList.remove("fa-eye-slash");
        eye.classList.add("fa-eye");
      } else {
        input.type = "password";
        eye.classList.remove("fa-eye");
        eye.classList.add("fa-eye-slash");
      }
    }
  </script>
</div>
