<html>
  <meta charset="utf-8">
  <head>
    <style>
    {% include 'css/pages.css' %}
    /* custom CSS */
    {{ custom_css }}
    </style>
    {% include 'html/pages_header.html' %}
    <!-- custom header -->
    {{ custom_header }}
  </head>
  <body>
    <div id="mols2grid" class="gridcontainer grid-{{ grid_id }}">
      <div class="row mb-3">
        <div class="list">{{ item }}</div>
      </div>
      <div class="d-inline">
        <ul class="pagination float-left"></ul>
        <div id="controls" class="d-flex flex-row float-right">
          {% if selection %}
          {% include 'html/checkbox_dropdown.html' %}
          {% endif %}
          <div id="sort-dropdown" class="dropdown pl-2">
            <button class="btn btn-light dropdown-toggle" type="button" id="sortDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Sort by
            </button>
            <div class="dropdown-menu" aria-labelledby="sortDropdownMenu">
              {% set default_sort = sort_by.replace("data-", "", 1) %}
              {% for name in sort_cols %}
              {% set col_name = name.replace("data-", "", 1) %}
              {% set is_active = "arrow-asc active" if default_sort == col_name else "" %}
              {% if loop.first %}
              <button class="dropdown-item sort-btn {{ is_active }}" type="button" data-name="mols2grid-id">Index</button>
              {% else %}
              <button class="dropdown-item sort-btn {{ is_active }}" type="button" data-name="{{ name }}">{{ col_name }}</button>
              {% endif %}
              {% endfor %}
              {% if selection %}
              <button class="dropdown-item sort-btn" type="button" data-name="checkbox">Selected</button>
              {% endif %}
            </div>
          </div>
          <div class="input-group row pl-4">
            <input type="text" id="searchbar" class="form-control" placeholder="Search" aria-label="Search" aria-describedby="basic-addon1">
            <div class="input-group-append">
              <button id="searchBtn" class="btn btn-light dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">🔎</button>
              <div class="dropdown-menu dropdown-menu-right">
                <button id="txtSearch" class="search-btn dropdown-item active">Text</button>
                <button id="smartsSearch" class="search-btn dropdown-item">SMARTS</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
    {% include 'js/pages.js' %}
    </script>
  </body>
</html>