<div class="modal" id="add-user-modal" tabindex="-1" role="dialog" aria-labelledby="add-user-modal-label">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">
          <%= t("users.settings.organizations.edit.modal_add_user.title") %>
        </h4>
      </div>
      <div class="modal-body">
        <div class="panel-group" id="invite-accordion" role="tablist" aria-multiselectable="true">

          <!-- Invite existing user panel -->
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="invite-existing-heading">
              <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#invite-accordion" href="#invite-existing" aria-expanded="true" aria-controls="invite-existing">
                  <%= t("users.settings.organizations.edit.modal_add_user.existing_heading") %>
                </a>
              </h4>
            </div>
            <div id="invite-existing" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="invite-existing-heading">
              <div class="panel-body">
                <%= bootstrap_form_tag url: search_organization_users_path(org, format: :json), remote: true, method: :get, data: { id: "invite-existing-form" } do |f| %>
                  <div class="form-group">
                    <label for="existing_query">
                      <%= t("users.settings.organizations.edit.modal_add_user.existing_label") %>
                    </label>
                    <div class="input-group">
                      <input class="form-control" type="text" placeholder="<%= t("users.settings.organizations.edit.modal_add_user.existing_placeholder") %>" value="" name="[existing_query]" id="existing_query">
                      <span class="input-group-btn">
                        <%= f.submit t("general.search"), class: "btn btn-primary" %>
                      </span>
                    </div>
                  </div>
                <% end %>

                <div id="invite-existing-results"></div>

              </div>
            </div>
          </div>

          <!-- Invite new user panel -->
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="invite-new-heading">
              <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#invite-accordion" href="#invite-new" aria-expanded="false" aria-controls="invite-new">
                  <%= t("users.settings.organizations.edit.modal_add_user.new_heading") %>
                </a>
              </h4>
            </div>
            <div id="invite-new" class="panel-collapse collapse" role="tabpanel" aria-labelledby="invite-new-heading">
              <div class="panel-body">
                <%= bootstrap_form_for User.new, url: create_user_and_user_organization_path(format: :json), remote: true, data: { id: "invite-new-form" } do |f| %>
                  <input type="hidden" name="organization_id" id="organization_id" value="<%= org.id %>">
                  <input type="hidden" data-id="new-user-role-input" name="role" id="role" value="">
                  <%= f.text_field :full_name, label: t("users.settings.organizations.edit.modal_add_user.new_label_name"), placeholder: t("users.settings.organizations.edit.modal_add_user.new_placeholder_name"), data: { id: "invite-new-name-input", role: "input" } %>
                  <%= f.text_field :email, label: t("users.settings.organizations.edit.modal_add_user.new_label_email"), placeholder: t("users.settings.organizations.edit.modal_add_user.new_placeholder_email"), data: { id: "invite-new-email-input", role: "input" } %>
                <% end %>
              </div>
            </div>
          </div>

        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal"><%= t("general.cancel") %></button>

        <!-- Invite button -->
        <div class="btn-group">
          <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-id="invite-btn" aria-haspopup="true" aria-expanded="false" disabled="disabled">
            <%= t("users.settings.organizations.edit.modal_add_user.invite") %>
            &nbsp;
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            <li><a href="#" data-action="invite" data-value="guest">
              <%= t("users.settings.organizations.edit.modal_add_user.invite_guest") %>
            </a></li>
            <li><a href="#" data-action="invite" data-value="normal_user">
              <%= t("users.settings.organizations.edit.modal_add_user.invite_user") %>
            </a></li>
            <li><a href="#" data-action="invite" data-value="admin">
              <%= t("users.settings.organizations.edit.modal_add_user.invite_admin") %>
            </a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>