{% load i18n jet_tags %}
<div class="sidebar-section">
    <div class="dialog-confirm" id="bookmarks-add-dialog" title="{% trans "Add bookmark" %}">
        <form action="{% url "jet:add_bookmark" %}" method="POST" id="bookmarks-add-form">
            {% csrf_token %}
            <p>{% trans "Title" %}:</p>
            <input type="text" name="title" class="fill_width">
            <p>{% trans "URL" %}:</p>
            <input type="text" name="url" class="fill_width">
        </form>
    </div>
    <form action="{% url "jet:remove_bookmark" %}" method="POST" id="bookmarks-remove-form">
        {% csrf_token %}
        <input type="hidden" name="id">
    </form>
    <div class="dialog-confirm" id="bookmarks-remove-dialog" title="{% trans "Delete bookmark" %}">
        <p>{% trans "Are you sure want to delete this bookmark?" %}</p>
    </div>

    <div class="sidebar-title">
        <span class="sidebar-right">
            <a href="#" class="sidebar-right-plus bookmarks-add" title="{% trans "Add bookmark" %}"
                {% if title %} data-title="{{ title }}"{% endif %}><span
                class="fas fa-plus"></span></a>
        </span>
        {% trans 'bookmarks' %}
    </div>

    <div class="bookmarks-list">
        {% jet_get_bookmarks user as bookmarks %}
        {% for bookmark in bookmarks %}
            <a href="{{ bookmark.url }}" class="sidebar-link bookmark-item">
                <span class="sidebar-right collapsible">
                    <span class="sidebar-right-remove bookmarks-remove"
                          data-bookmark-id="{{ bookmark.pk }}">{% trans "Remove" %}</span>
                </span>
                <span class="sidebar-link-label">{{ bookmark.title }}</span>
            </a>
        {% endfor %}
        <a class="sidebar-link bookmark-item clone">
            <span class="sidebar-right collapsible">
                <span class="sidebar-right-remove bookmarks-remove">{% trans "Remove" %}</span>
            </span>
            <span class="sidebar-link-label"></span>
        </a>
    </div>
</div>
