{% load static %}
{% load shared %}
{% load pagination %}

{% if bookmark_list.is_empty %}
  {% include 'bookmarks/empty_bookmarks.html' %}
{% else %}
  <ul class="bookmark-list{% if bookmark_list.show_notes %} show-notes{% endif %}"
      data-bookmarks-total="{{ bookmark_list.bookmarks_total }}">
    {% for bookmark_item in bookmark_list.items %}
      <li ld-bookmark-item{% if bookmark_item.css_classes %} class="{{ bookmark_item.css_classes }}"{% endif %}>
        <label ld-bulk-edit-checkbox class="form-checkbox">
          <input type="checkbox" name="bookmark_id" value="{{ bookmark_item.id }}">
          <i class="form-icon"></i>
        </label>
        <div class="title">
          <a href="{{ bookmark_item.url }}" target="{{ bookmark_list.link_target }}" rel="noopener">
            {% if bookmark_item.favicon_file and bookmark_list.show_favicons %}
              <img src="{% static bookmark_item.favicon_file %}" alt="">
            {% endif %}
            {{ bookmark_item.title }}
          </a>
        </div>
        {% if bookmark_list.show_url %}
          <div class="url-path truncate">
            <a href="{{ bookmark_item.url }}" target="{{ bookmark_list.link_target }}" rel="noopener"
               class="url-display text-sm">
              {{ bookmark_item.url }}
            </a>
          </div>
        {% endif %}
        <div class="description truncate">
          {% if bookmark_item.tag_names %}
            <span>
              {% for tag_name in bookmark_item.tag_names %}
                <a href="?{% add_tag_to_query tag_name %}">{{ tag_name|hash_tag }}</a>
              {% endfor %}
            </span>
          {% endif %}
          {% if bookmark_item.tag_names and bookmark_item.description %} | {% endif %}
          {% if bookmark_item.description %}
            <span>{{ bookmark_item.description }}</span>
          {% endif %}
        </div>
        {% if bookmark_item.notes %}
          <div class="notes bg-gray text-gray-dark">
            <div class="notes-content">
              {% markdown bookmark_item.notes %}
            </div>
          </div>
        {% endif %}
        <div class="actions text-gray text-sm">
          {% if bookmark_item.display_date %}
            {% if bookmark_item.web_archive_snapshot_url %}
              <a href="{{ bookmark_item.web_archive_snapshot_url }}"
                 title="Show snapshot on the Internet Archive Wayback Machine"
                 target="{{ bookmark_list.link_target }}"
                 rel="noopener">
                {{ bookmark_item.display_date }} ∞
              </a>
            {% else %}
              <span>{{ bookmark_item.display_date }}</span>
            {% endif %}
            <span class="separator">|</span>
          {% endif %}
          {% if bookmark_item.is_editable %}
            {# Bookmark owner actions #}
            <a href="{% url 'bookmarks:edit' bookmark_item.id %}?return_url={{ bookmark_list.return_url|urlencode }}">Edit</a>
            {% if bookmark_item.is_archived %}
              <button type="submit" name="unarchive" value="{{ bookmark_item.id }}"
                      class="btn btn-link btn-sm">Unarchive
              </button>
            {% else %}
              <button type="submit" name="archive" value="{{ bookmark_item.id }}"
                      class="btn btn-link btn-sm">Archive
              </button>
            {% endif %}
            <button ld-confirm-button type="submit" name="remove" value="{{ bookmark_item.id }}"
                    class="btn btn-link btn-sm">Remove
            </button>
          {% else %}
            {# Shared bookmark actions #}
            <span>Shared by
              <a href="?{% replace_query_param user=bookmark_item.owner.username %}">{{ bookmark_item.owner.username }}</a>
            </span>
          {% endif %}
          {% if bookmark_item.has_extra_actions %}
            <div class="extra-actions">
              <span class="separator hide-sm">|</span>
              {% if bookmark_item.show_mark_as_read %}
                <button type="submit" name="mark_as_read" value="{{ bookmark_item.id }}"
                        class="btn btn-link btn-sm btn-icon"
                        ld-confirm-button confirm-icon="ld-icon-read" confirm-question="Mark as read?">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
                    <use xlink:href="#ld-icon-unread"></use>
                  </svg>
                  Unread
                </button>
              {% endif %}
              {% if bookmark_item.show_unshare %}
                <button type="submit" name="unshare" value="{{ bookmark_item.id }}"
                        class="btn btn-link btn-sm btn-icon"
                        ld-confirm-button confirm-icon="ld-icon-unshare" confirm-question="Unshare?">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
                    <use xlink:href="#ld-icon-share"></use>
                  </svg>
                  Shared
                </button>
              {% endif %}
              {% if bookmark_item.show_notes_button %}
                <button type="button" class="btn btn-link btn-sm btn-icon toggle-notes">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
                    <use xlink:href="#ld-icon-note"></use>
                  </svg>
                  Notes
                </button>
              {% endif %}
            </div>
          {% endif %}
        </div>
      </li>
    {% endfor %}
  </ul>

  <div class="bookmark-pagination">
    {% pagination bookmark_list.bookmarks_page %}
  </div>
{% endif %}
