{% extends "shared/layout.html" %}
{% load static shared bookmarks %}
{% block content %}
  <ld-bookmark-page {% if not bookmark_list.bulk_edit_enabled %}no-bulk-edit{% endif %}
                    class="bookmarks-page grid columns-md-1 {% if bookmark_list.collapse_side_panel %}collapse-side-panel{% endif %}">
    {# Bookmark list #}
    <main class="main col-2" aria-labelledby="main-heading">
      <div class="section-header {% if bookmark_list.bulk_edit_enabled %}mb-0{% endif %}">
        <h1 id="main-heading">{{ bookmark_list.list_title }}</h1>
        <div class="header-controls">
          {% bookmark_search bookmark_list.search mode=bookmark_list.search_mode %}
          {% if bookmark_list.bulk_edit_enabled %}
            <button class="btn hide-sm ml-2 bulk-edit-active-toggle" title="Bulk edit">
              <svg width="20px" height="20px">
                <use href="{% static 'icons.svg' %}?v={{ app_version }}#bulk-edit"></use>
              </svg>
            </button>
          {% endif %}
          <ld-filter-drawer-trigger>
            <button class="btn ml-2">Filters</button>
          </ld-filter-drawer-trigger>
        </div>
      </div>
      <form class="bookmark-actions"
            action="{{ bookmark_list.action_url|safe }}"
            method="post"
            autocomplete="off">
        {% csrf_token %}
        {% if bookmark_list.bulk_edit_enabled %}
          {% include 'bookmarks/bulk_edit_bar.html' %}
        {% endif %}
        <div id="bookmark-list-container">{% include 'bookmarks/bookmark_list.html' %}</div>
      </form>
    </main>
    {# Filters #}
    <div class="side-panel col-1 hide-md">
      {% if bundles %}
        {% include 'bookmarks/bundle_section.html' %}
      {% endif %}
      {% if user_list %}
        {% include 'bookmarks/user_section.html' %}
      {% endif %}
      {% include 'bookmarks/tag_section.html' %}
    </div>
  </ld-bookmark-page>
{% endblock %}
{% block overlays %}
  {% include 'bookmarks/details/modal.html' %}
{% endblock %}
