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

{% block panel %}

<div class="columns mt-3">
    <section class="column is-three-quarters">
        {% if request.GET.updated %}
        <div class="notification is-primary">
            {% trans "You successfully added a user to this group!" %}
        </div>
        {% endif %}

        {% if not group.members.exists %}
        <p>{% trans "This group has no members" %}</p>
        {% else %}
        <h2 class="heading">Group Members</h2>
        <ul start="{{ members.start_index }}" class="ordered-list">
        {% for member in group.members.all %}
            <li class="block mb-5">
              <div class="column is-one-third">
                  {% include 'directory/user_card.html' %}
              </div>
            </li>
        {% endfor %}
        </ul>
        {% endif %}
        {% if not group.lists.exists %}
        <p>{% trans "This group has no lists" %}</p>
        {% else %}
        <h2 class="heading">Lists</h2>
        <ul start="{{ lists.start_index }}" class="ordered-list">
        {% for list in group.lists.all %}
            <li class="block mb-5">
              <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">
                                <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>
            </li>
        {% endfor %}
        </ul>
        {% endif %}
        {% include "snippets/pagination.html" with page=items %}
    </section>

</div>
{% endblock %}