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

<div id="projectShowToolbar" class="project-show-toolbar">
  <!-- new experiment button -->
  <span class="left">
    <% if can_create_project_experiments?(@project) %>
      <%= button_to new_project_experiment_url(@project),
                    remote: true,
                    form_class: 'new-experiment-form',
                    data: {view_mode: :active},
                    id: 'new-experiment',
                    method: :get,
                    class: 'btn btn-primary' do %>
        <span class="fas fa-plus" aria-hidden="true"></span>
        <span class="hidden-xs"><%= t('experiments.toolbar.new_button') %></span>
      <% end %>
    <% end %>
  </span>

  <span class="middle">
    <%= render layout: 'shared/view_switch', locals: { disabled: false, name:  t("toolbar.#{@current_view_type}_view") } do %>
      <li class="view-switch-list cards-switch form-dropdown-item">
        <%= button_to(view_type_project_path(@project, format: :json),
                      method: :put,
                      remote: true,
                      class: "btn btn-light button-to #{ @current_view_type == 'table' ? 'selected' : ''}",
                      form_class: 'change-experiments-view-type-form',
                      params: { project: { view_type: 'table', project_id: @project.id } }) do %>
          <span class="view-switch-list-span table-switch"><%= t('toolbar.table_view') %></span>
        <% end %>
      </li>
      <li class="view-switch-list cards-switch form-dropdown-item">
        <%= button_to(view_type_project_path(@project, format: :json),
                      method: :put,
                      remote: true,
                      class: "btn btn-light button-to #{ @current_view_type == 'cards' ? 'selected' : ''}",
                      form_class: 'change-experiments-view-type-form',
                      params: { project: { view_type: 'cards', project_id: @project.id } }) do %>
          <span class="view-switch-list-span cards-switch"><%= t('toolbar.cards_view') %></span>
        <% end %>
      </li>
    <% end %>

    <%= render layout: 'shared/state_view_switch', locals: { disabled: false } do %>
      <li class="view-switch-list cards-switch form-dropdown-item">
        <%= button_tag class: "btn btn-#{params[:view_mode] ? 'light' : 'primary'} state-view-switch archive-switch", data: { url: project_path(@project) } do %>
          <span class="<%= params[:view_mode] ? 'text-dark' : 'text-light' %>">
            <%= t('toolbar.active_state') %>
          </span>
        <% end %>
      </li>
      <li class="view-switch-list cards-switch form-dropdown-item">
        <%= button_tag class: "btn btn-#{params[:view_mode] ? 'primary' : 'light'} state-view-switch archive-switch", data: { url: project_path(@project, view_mode: 'archived') } do %>
          <span class="<%= params[:view_mode] ? 'text-light' : 'text-dark' %>">
            <%= t('toolbar.archived_state') %>
          </span>
        <% end %>
      </li>
    <% end %>
  </span>

  <span class="right">
    <%= render layout: 'shared/filter_dropdown', locals: {
      container_class: 'experiments-filters',
      dropdown_title: t("filters_modal.title"),
      search_field_history_key: 'experiment_filters_per_team'
    } do %>
      <%= render partial: 'shared/filter_dropdown/text_search', locals: {container_class: ''} %>
      <%= render partial: 'shared/filter_dropdown/datetime_search', locals: {container_class: 'started-on-filter', label: t("filters_modal.created_on.label"), view_mode: nil } %>
      <%= render partial: 'shared/filter_dropdown/datetime_search', locals: {container_class: 'modified-on-filter', label: t("filters_modal.updated_on.label"), view_mode: nil } %>
      <%= render partial: 'shared/filter_dropdown/datetime_search', locals: {container_class: 'archived-on-filter', label: t("filters_modal.archived_on.label"), view_mode: 'archived' } %>

    <% end %>
    <!-- Sort menu dropdown -->
    <div class="dropdown sort-menu">
      <button class="btn btn-light icon-btn dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        <i class="fas fa-sort-amount-up"></i>
      </button>
      <ul id="sortMenuDropdown" class="dropdown-menu sort-experiments-menu dropdown-menu-right" aria-labelledby="sortMenu">
        <% %w(archived_new archived_old new old atoz ztoa id_asc id_desc).each_with_index do |sort, i| %>
          <% if i.even? && i.positive? %>
            <li class="divider" <%= i == 2 ? 'data-view-mode=archived' : '' %>></li>
          <% end %>
          <li <%= %w(archived_new archived_old).include?(sort) ? 'data-view-mode=archived' : '' %>>
            <a class="<%= 'selected' if @current_sort == sort %>"
              data-sort="<%= sort %>" >
              <%= t("general.sort.#{sort}_html") %>
            </a>
          </li>
        <% end %>
      </ul>
    </div>
  </span>
</div>