scinote-web/app/views/projects/index/_toolbar.html.erb

<div id="projectsToolbar" class="projects-toolbar">

  <form class="form-inline" action="<%= projects_path %>">

    <div class="form-group">

      <div class="new-project-actions pull-left">
        <% if current_team && can_create_projects?(current_team) %>
        <!-- new project button -->
          <a href="#" class="btn btn-primary new-project-btn">
            <span class="fas fa-plus" aria-hidden="true"></span>
            <span class="hidden-xs"><%= t('projects.index.new') %></span>
          </a>
          <!-- new project folder button -->
          <a href="#" class="btn btn-secondary new-project-folder-btn">
            <span class="fas fa-folder" aria-hidden="true"></span>
            <span class="hidden-xs"><%= t('projects.index.new_folder') %></span>
          </a>
        <% end %>
      </div>

      <div class="project-actions pull-left">
        <a href="#" class="btn btn-secondary edit-project-btn single-project-action hidden">
          <span class="fas fa-folder" aria-hidden="true"></span>
          <span class="hidden-xs"><%= t('projects.index.edit_button') %></span>
        </a>
        <a href="#" class="btn btn-secondary move-projects-btn multiple-projects-action hidden">
          <span class="fas fa-arrow-right" aria-hidden="true"></span>
          <span class="hidden-xs"><%= t('projects.index.move_button') %></span>
        </a>
        <a href="#" class="btn btn-secondary archive-projects-btn multiple-projects-action project-only-action hidden">
          <span class="fas fa-archive" aria-hidden="true"></span>
          <span class="hidden-xs"><%= t('projects.index.archive_button') %></span>
        </a>
        <!-- export projects button -->
        <a href="#" class="btn btn-secondary export-projects-btn multiple-projects-action project-only-action hidden"
                    data-export-projects-modal-url="<%= export_projects_modal_team_path(current_team) %>">
          <span class="fas fa-file-export"></span>
          <span class="hidden-xs-custom"><%= t('projects.export_projects.export_button') %></span>
        </a>
      </div>

      <div class="pull-right">
        <!-- project filter -->
        <div class="filter-container dropdown project-filters-dropdown">
          <div class="btn btn-light icon-btn filter-button" data-toggle="dropdown"><i class="fas fa-filter"></i></div>
          <div class="dropdown-menu dropdown-menu-right projects-filters" role="menu" data-team-id="<%= current_team.id %>">
            <div class="header">
              <div class="title"><%= t("projects.index.filters_modal.title") %></div>
              <div class="btn btn-light clear-button">
                <i class="fas fa-times-circle"></i><%= t("projects.index.filters_modal.clear_btn") %></div>
            </div>

            <div class="select-block dropdown-selector-container">
              <label><%= t('projects.index.filters_modal.text.label') %></label>
              <div class="input-field dropdown">
                <input id="textSearchFilterInput"
                       class="dropdown-toggle search-field"
                       type="text"
                       name="search"
                       autocomplete="off"
                       data-toggle="dropdown"
                       data-placeholder="<%= t('projects.index.filters_modal.text.placeholder') %>">
              </div>
              <div id="textSearchFilterHistory" class="dropdown-menu recent-searches" aria-labelledby="textSearchFilterInput2">
                <label><%= t("projects.index.filters_modal.recent_searches_label") %></label>
              </div>
            </div>

            <div class="select-block">
              <div class="created-on-label">
                <label><%= t("projects.index.filters_modal.created_on.label") %></label>
              </div>
              <div class="datetime-picker-container" id="from-date">
                <span class="fas fa-calendar-alt"></span>
                <input id="calendarStartDate"
                       type="datetime"
                       data-toggle='date-time-picker'
                       class="form-control calendar-input"
                       readonly
                       placeholder="<%= t('projects.index.filters_modal.created_on.from_placeholder') %>"
                       data-date-format="<%= datetime_picker_format_full %>"
                       data-date-locale="<%= I18n.locale %>"
                       data-date-use-current="false"
                       value=""/>
              </div>

              <div class="connect-line"></div>

              <div class="datetime-picker-container" id="to-date">
                <span class="fas fa-calendar-alt"></span>
                <input id="calendarDueDate"
                       type="datetime"
                       data-toggle='date-time-picker'
                       class="form-control calendar-input"
                       readonly
                       placeholder="<%= t('projects.index.filters_modal.created_on.to_placeholder') %>"
                       data-date-format="<%= datetime_picker_format_full %>"
                       data-date-locale="<%= I18n.locale %>"
                       data-date-use-current="false"
                       data-date-orientation="left"
                       value=""/>
              </div>
            </div>

            <div class="select-block">
              <label><%= t("projects.index.filters_modal.members.label") %></label>
              <select class="members-filter"
                      data-ajax-url="<%= users_filter_projects_path %>"
                      data-placeholder="<%= t('projects.index.filters_modal.members.placeholder') %>">
              </select>
            </div>

            <div class="select-block folders">
            <span class="sci-checkbox-container">
              <%= check_box_tag :folder_search, 'accepted', false, {class: "sci-checkbox"} %>
              <span class="sci-checkbox-label"></span>
            </span>
              <span class="folder-search-label"><%= t("projects.index.filters_modal.folders.label") %></span>
              <i class="fas fa-info-circle" title="<%= t("projects.index.filters_modal.folders.tooltip") %>"></i>
            </div>

            <div class="footer">
              <div id="applyProjectFiltersButton" class="btn btn-primary"><%= t("projects.index.filters_modal.show_btn.one") %></div>
            </div>
          </div>
        </div>

        <!-- project sort -->
        <div class="dropdown">
          <button class="btn btn-light dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            <span><%= t("general.sort.#{@current_sort}_html") %></span>
            <span class="caret"></span>
          </button>
          <ul id="sortMenuDropdown" class="dropdown-menu" aria-labelledby="sortMenu">
          <% ["new", "old", "atoz", "ztoa"].each do |sort| %>
            <li>
              <% if @current_sort != sort %>
                <a href="#" data-sort="<%= sort %>"><%= t("general.sort.#{sort}_html") %></a>
              <% else %>
                <a class="disabled" href="#" data-sort="<%= sort %>"><%= t("general.sort.#{sort}_html") %></a>
              <% end %>
            </li>
          <% end %>
          </ul>
        </div>
      </div>
    </div>
  </form>
</div>