<div class="container is-fluid top-p__1">
  <div class="columns is-centered">
    <div class="column is-four-fifths is-two-thirds-tablet is-half-desktop with-background-p__6">
      <section class="hero is-primary">
        <div class="hero-body">
          <div class="container">
            <h1 class="title has-text-centered">
              Log in
            </h1>
          </div>
        </div>
      </section>

      <div class="p__3">
        <%= simple_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
          <div class="field">
            <%= f.label :email, class: "label" %>

            <p class="control has-icons-left has-icons-right">
              <%= f.input_field :email, required: true, autofocus: true, autocomplete: "email", class: "input" %>

              <span class="icon is-small is-left">
                <i class="fas fa-envelope"></i>
              </span>
            </p>

            <%= f.full_error :email, class: "help is-danger" %>
          </div>

          <div class="field">
            <%= f.label :password, class: "label" %>

            <p class="control has-icons-left">
              <%= f.input_field :password, required: true, autocomplete: "current-password", class: "input" %>

              <span class="icon is-small is-left">
                <i class="fas fa-lock"></i>
              </span>
            </p>

            <%= f.full_error :password, class: "help is-danger" %>
          </div>

          <%= f.check_box :remember_me, as: :boolean, class: "checkbox" %>
          <%= f.label :remember_me, class: "checkbox" %>

          <div class="field">
            <p class="control p__3">
              <%= f.button :submit, "Sign in", class: "button is-primary is-fullwidth is-rounded"  %>
            </p>
          </div>
        <% end %>

        <%= render "devise/shared/links" %>
      </div>
    </div>
  </div>
</div>
