{% load i18n %}
{% load markdown %}
{% load interaction %}

<div class="columns is-multiline">
    {% for list in lists %}
    <div class="column is-one-quarter">
        <div class="card is-stretchable">
            <header class="card-header">
                <h4 class="card-header-title is-clipped">
                    <a href="{{ list.local_path }}" class="is-clipped">{{ list.name }}</a> <span class="subtitle">{% include 'snippets/privacy-icons.html' with item=list %}</span>
                </h4>
                {% if request.user.is_authenticated and request.user|saved:list %}
                <div class="card-header-icon">
                    {% trans "Saved" as text %}
                    <span class="icon icon-bookmark has-text-grey" title="{{ text }}">
                        <span class="is-sr-only">{{ text }}</span>
                    </span>
                </div>
                {% endif %}
            </header>

            {% with list_books=list.listitem_set.all|slice:5 %}
                {% if list_books %}
                    <div class="card-image columns is-mobile is-gapless is-clipped">
                        {% for book in list_books %}
                            <a class="column is-cover" href="{{ book.book.local_path }}">
                                {% include 'snippets/book_cover.html' with book=book.book cover_class='is-h-s' size='small' aria='show' %}
                            </a>
                        {% endfor %}
                    </div>
                {% endif %}
            {% endwith %}

            <div class="card-content is-flex-grow-0">
                <div class="is-clipped" {% if list.description %}title="{{ list.description }}"{% endif %}>
                {% if list.description %}
                    {{ list.description|to_markdown|safe|truncatechars_html:30 }}
                {% else %}
                &nbsp;
                {% endif %}
                </div>
                <p class="subtitle help">
                    {% include 'lists/created_text.html' with list=list %}
                </p>
            </div>
        </div>
    </div>
    {% endfor %}
</div>