{% extends 'layout.html' %}
{% block nav_groups %}selected{% endblock %}
{% block content %}
    <div class="banner small">
        <div class="banner-content">
            <h1>{{ config.WEBSITE.name }}</h1>
            {% if groups|length == 0 %}
                <p>0 groups :<</p>
            {% elif groups|length == 69 %}
                <p>{{ groups|length }} groups, uwu</p>
            {% else %}
                <p>{{ groups|length }} groups</p>
            {% endif %}
        </div>
    </div>

    <form action="/api/group/create" method="post" enctype="multipart/form-data">
        <input class="input-block black" type="text" name="name" placeholder="name">
        <input class="input-block black" type="text" name="description" placeholder="description">
        <button class="btn-block black" type="submit">Submit</button>
    </form>

    {% if groups %}
        <div class="gallery-grid">
            {% for group in groups %}
                <a id="group-{{ group.id }}" class="group-item" href="{{ url_for('group.group', group_id=group.id) }}">
                    <div class="image-filter">
                        <p class="image-subtitle">By {{ group.author_username }}</p>
                        <p class="image-title">{{ group.name }}</p>
                    </div>
                    <div class="images size-{{ group.images|length }}">
                        {% if group.images|length > 0 %}
                            {% for image in group.images %}
                                <img data-src="{{ url_for('api.file', file_name=image.file_name) }}?r=thumb" onload="this.classList.add('loaded');" id="lazy-load" class="data-{{ loop.index }}"/>
                            {% endfor %}
                        {% else %}
                            <img src="{{ url_for('static', filename='error.png') }}" class="loaded"/>
                        {% endif %}
                    </div>
                </a>
            {% endfor %}
        </div>
    {% else %}
        <div class="big-text">
            <h1>*crickets chirping*</h1>
            {% if current_user.is_authenticated %}
                <p>You can get started by creating a new image group!</p>
            {% else %}
                <p>Login to start seeing anything here!</p>
            {% endif %}
        </div>
    {% endif %}
{% endblock %}