{%- set activities = (activities or []) + get_ui_elements('activities', state) -%}
{%- set display_refiners = (display_refiners or []) + get_ui_elements('display_refiners', state) -%}
{%- set display_modes = (display_modes or []) + get_ui_elements('display_modes', state) -%}
{%- set selection_actions = (selection_actions or []) + get_ui_elements('selection_actions', state) -%}
{%- set have_initial_prompt = selection_initial_prompt or False -%}
{%- set selection_initial_prompt = selection_initial_prompt or _('Click item or checkbox to select') -%}
{%- if (activities or display_refiners or display_modes or
        hard_coded_activities or
        have_initial_prompt or
        hard_coded_display_refiners or
        hard_coded_display_modes) %}
<nav class="sub-navigation clearfix">
  <ul class="left horizontal">
  {{ hard_coded_activities|safe }}{% for elem in activities %}
    <li class="btn-activity-{{elem.name}} {{elem.class}}
        {%- if state.command_url == elem.url %} navigation-on{% endif %}">
      <a class="bulk-action-{{elem.name}} {{elem.aclass}}"
         data-keep-selection=1
         href="{{ U(elem.url) }}" title="{{elem.description}}">
      {%- if elem.icon and '.' in elem.icon -%}
        <img class="navigation-icon" src="{{ U(elem.icon) }}">
      {%- elif elem.icon -%}
        <span class="navigation-icon icon-{{elem.icon}}"></span>
      {%- endif %}
        <span class="navigation-text{% if loop.index >= 5 %} hide{% endif %}"
         >{{elem.text}}</span>
      </a>
    </li>
    {%- if loop.last %}<li>&nbsp;</li>{% endif %}
  {%- endfor %}
  {%- if activities %}<script>
    $(document).ready({{
      ui_elements_setup('.btn-activity-%(name)s', activities)
    }});
  </script>{% endif %}
  {%- for elem in display_refiners %}
    <li class="display-refiner btn-display-refiner-{{elem.name}} {{elem.class}}
        {%- if state.command_url|add_state_query_string(state) == url %} navigation-on{% endif %}">
      <a href="{{elem.url|add_state_query_string(state, elem)|url_path_fix}}"
         data-keep-selection=1
         class="{{elem.aclass}}" title="{{elem.description}}">
      {%- if elem.icon and '.' in elem.icon -%}
        <img class="navigation-icon" src="{{ U(elem.icon) }}">
      {%- elif elem.icon -%}
        <span class="navigation-icon icon-{{elem.icon}}"></span>
      {%- endif %}<span class="navigation-text">{{elem.text}}</span>
      </a>
    </li>
  {%- endfor %}{{ hard_coded_refiners|safe }}
  {%- if display_refiners %}<script>
    $(document).ready({{
      ui_elements_setup('.btn-display-refiner-%(name)s', display_refiners)
    }});
  </script>{% endif %}
  </ul>
  <ul class="right horizontal">
  {%- if display_modes|length > 1 %}
   {%- for elem in display_modes %}
    <li class="btn-display-mode-{{elem.name}} {{elem.class}}
        {%- if state.command_url == elem.url %} navigation-on{% endif %}">
      <a href="{{elem.url|add_state_query_string(state, elem)|url_path_fix}}"
         data-keep-selection=1
         title="{{elem.description}}" class="{{elem.aclass}}">
      {%- if elem.icon and '.' in elem.icon -%}
        <img class="navigation-icon" src="{{ U(elem.icon) }}">
      {%- elif elem.icon -%}
        <span class="navigation-icon icon-{{elem.icon}}"></span>
      {%- endif %}<span class="navigation-text">{{elem.text}}</span>
      </a>
    </li>
   {%- endfor %}
  {%- endif %}{{ hard_coded_display_modes|safe }}
  {%- if display_modes %}<script>
    $(document).ready({{
      ui_elements_setup('.btn-display-mode-%(name)s', display_modes)
    }});
  </script>{% endif %}
  </ul>
</nav>
{%- endif %}
{%- if selection_actions or hard_coded_selection_actions or have_initial_prompt %}
<div class="bulk-actions clearfix mobile-hide">
  {%- if have_initial_prompt or not tools_disable_checkbox %}
  <div id="bulk-actions-message" class="left"
       data-bulk_selected="{{_("conversations selected")}}"
       data-select_all="{{_("conversations selected, click to select all matching this search")}}"
       data-unselect_all="{{_("Entire search selected, click to undo")}}"
       data-bulk_selected_none="{{ selection_initial_prompt }}">
    {{ selection_initial_prompt|safe }}
  </div>
  {%- endif %}
  <div class="bulk-actions-hints" style='display: inline-block;'></div>
  <ul class="horizontal right">
  {{ hard_coded_selection_actions|safe }}
  {%- for elem in selection_actions %}
    <li class="btn-selection-action-{{elem.name}} hide {{elem.class}}
        {%- if state.command_url == elem.url %} navigation-on{% endif %}">
      <a class="bulk-action-{{elem.name}}" href="#"
         title="{{elem.description}}" class="{{elem.aclass}}">
      {%- if elem.icon and '.' in elem.icon -%}
        <img class="navigation-icon" src="{{ U(elem.icon) }}" alt="{{elem.text}}">
      {%- elif elem.icon -%}
        <span class="navigation-icon icon-{{elem.icon}}"></span>
      {%- else -%}{{elem.text}}{%- endif -%}
      </a>
    </li>
  {%- endfor %}
  {%- if (not tools_disable_checkbox) and (selection_actions or hard_coded_selection_actions) %}
    <li><input type="checkbox" id="pile-select-all-action"
               class="bulk-action-select-all" tabindex="-1"
               value=""></li>
  {%- endif %}
  </ul>
  {%- if selection_actions %}<script>
    $(document).ready({{
      ui_elements_setup('.btn-selection-action-%(name)s', selection_actions)
    }});
  </script>{% endif %}
</div>
{%- endif %}
