{% extends 'groups/layout.html' %}
{% load i18n %}
{% load group_tags %}
{% load markdown %}

{% block panel %}

<div class="columns mt-3">
    <section class="column is-three-quarters">
        {% block searchresults %}
        {% endblock %}
        <div class="mb-2">
            {% include "groups/members.html"  with group=group %}
        </div>
    </section>
</div>
<header class="columns content is-mobile">
    <div class="column">
        <h2 class="title is-5">{% trans "Lists" %}</h2>
        <p class="subtitle is-6">
            {% trans "Members of this group can create group-curated lists." %}
        </p>
    </div>
    {% if request.user.is_authenticated and group|is_member:request.user %}
    <div class="column is-narrow is-flex" id="tour-create-list">
        {% trans "Create List" as button_text %}
        {% include 'snippets/toggle/open_button.html' with controls_text="create_list" icon_with_text="plus" text=button_text focus="create_list_header" %}
    </div>
    {% endif %}
</header>
{% if request.user.is_authenticated and group|is_member:request.user %}
<div class="block">
    {% include 'lists/create_form.html' with controls_text="create_list" curation_group=group %}
</div>
{% endif %}
<div class="columns mt-3">
    <section class="column is-three-quarters">
        {% if not lists %}
        <p>{% trans "This group has no lists" %}</p>
        {% else %}

        <div class="columns is-multiline">
            {% for list in lists %}
            <div class="column is-one-third">
                <div class="card is-stretchable">
                    <header class="card-header">
                        <h4 class="card-header-title">
                            <a href="{{ list.local_path }}">{{ list.name }}</a> <span class="subtitle">{% include 'snippets/privacy-icons.html' with item=list %}</span>
                        </h4>
                    </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>
        {% endif %}
    </section>
</div>

{% endblock %}

{% block scripts %}
{% if request.user.show_guided_tour %}
    {% include 'guided_tour/group.html' %}
{% endif %}
{% endblock %}