<%= form_for(@user, url: admin_users_create_new_path, remote: true, html: {id: 'new-user-form'}) do |f| %>
  <div class="modal--header">
    <div class="row">
      <div class="col-sm-10">
        <h3>
          <%= f.text_field :first_name, placeholder: 'First Name', class: 'user--modal-input', data: { lastpass: "disable", lpignore: "true" } %>
          <%= f.text_field :last_name, placeholder: 'Last Name', class: 'user--modal-input', data: { lastpass: "disable", lpignore: "true" } %>
        </h3>
      </div>
      <div class="col-sm-2">
        <div class="modal--close-btn">
          <img src="/assets/images/icons/close.png">
        </div>
      </div>
      <div class="col-sm-10">
        <h3><%= f.email_field :email, placeholder: 'User email', class: 'user--modal-input', data: { lastpass: "disable", lpignore: "true" } %></h3>
      </div>
    </div>
  </div>
  <div class="modal--content">
    <div class="row">
      <div class="col-sm-12">
        <h4 class="medium">ACCOUNT</h4>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-8">
        <h4>Active</h4>
        <h5>Enable/Disable user account without deleting it</h5>
      </div>
      <div class="col-sm-4">
        <div class="user--activate-toggle">
          <label class="switch">
            <div class='toggle'>
              <%= f.check_box :active, class: 'form-control toggle-state', checked: 'checked' %>
              <div class='toggle-inner'>
                <div class='indicator'></div>
              </div>
              <div class='active-bg'></div>
            </div>
          </label>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-8">
        <h4>Team</h4>
        <h5>Set user's team, this defines permissions</h5>
      </div>
      <div class="col-sm-4">
        <div class="user--team-dropdown">
          <div class="form-control dropdown">
            <%= select_tag "team", options_from_collection_for_select(@roles, 'id', 'name'), {class: "user--team-select-new", "data-user" => @user.id} %>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-8">
        <% if @user.first_name.nil? %>
          <h4>PASSWORD</h4>
        <% else %>
          <h4>Password</h4>
          <h5 class="user--edit-password-info">Leave blank if you don't want to change it</h5>
        <% end %>
      </div>
      <div class="col-sm-4">
        <div class="user--password-field">
          <h4><%= f.password_field :password, placeholder: 'Password', class: 'user--modal-input', data: { lastpass: "disable", lpignore: "true" } %></h4>
        </div>
      </div>
      <div class="col-sm-12">
        <h5 class="user--password-info user--password-invalid">Min 6 char. Must contain a capital character, a special character.</h5>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12">
        <div class="user--save-btn">
          <% action = @user.first_name.nil? ? 'create' : 'update' %>
          <%= hidden_field_tag(:action, action, {class: "user--form-action"}) %>
          <%= f.submit 'Save user', class: 'btn btn-primary btn--save-user', disabled: @user.first_name.nil? %>
        </div>
      </div>
    </div>
  </div>
<% end %>