{% extends 'layout.html' %}
{% block nav_groups %}selected{% endblock %}
{% block head %}
    <style>
        {% if images %}
            .banner::after {
                box-shadow: 0 calc(var(--rad) * -1) 0 0 rgb({{ images.0.image_colours.0.0 }}, {{ images.0.image_colours.0.1 }}, {{ images.0.image_colours.0.2 }});
            }
            .banner-content p {
                color: {{ text_colour }} !important;
            }
            .banner-content h1 {
                color: {{ text_colour }} !important;
            }

            .banner-filter {
                background: linear-gradient(90deg, rgb({{ images.0.image_colours.0.0 }}, {{ images.0.image_colours.0.1 }}, {{ images.0.image_colours.0.2 }}), rgba({{ images.0.image_colours.0.0 }}, {{ images.0.image_colours.0.1 }}, {{ images.0.image_colours.0.2 }}, 0.3)) !important;
            }
            @media (max-width: 800px) {
                .banner-filter {
                    background: linear-gradient(180deg, rgba({{ images.0.image_colours.0.0 }}, {{ images.0.image_colours.0.1 }}, {{ images.0.image_colours.0.2 }}, 0.8), rgba({{ images.0.image_colours.0.0 }}, {{ images.0.image_colours.0.1 }}, {{ images.0.image_colours.0.2 }}, 0.5)) !important;
                }
            }

            .navigation {
                background-color: rgb({{ images.0.image_colours.0.0 }}, {{ images.0.image_colours.0.1 }}, {{ images.0.image_colours.0.2 }}) !important;
            }
            .navigation-item > svg {
                fill: {{ text_colour }} !important;
                color: {{ text_colour }} !important;
            }
            .navigation-item.selected::before {
                background-color: {{ text_colour }} !important;
            }
        {% endif %}
    </style>
{% endblock %}
{% block content %}
    <div class="banner {% if not images %}small{% endif %}">
        {% if not images %}
            <div class="banner-content">
                <h1>{{ group.name }}</h1>
                <p>By {{ group.author_username }}</p>
            </div>
        {% else %}
            <img src="{{ url_for('api.file', file_name=images.0.file_name ) }}?r=prev" onload="imgFade(this)" style="opacity:0;"/>
            <span class="banner-filter"></span>
            <div class="banner-content">
                <p>By {{ group.author_username }} - {{ images|length }} Images</p>
                <h1>{{ group.name }}</h1>
                <p>{{ group.description }}</p>
            </div>
        {% endif %}
    </div>

    <form id="modifyGroup" action="/api/group/modify" method="post">
        <input type="text" name="group" placeholder="group id" value="{{ group.id }}">
        <input type="text" name="image" placeholder="image id">
        <input type="text" name="action" placeholder="add/remove" value="add">
        <button type="submit">Submit</button>
    </form>

    {% if images %}
        <div class="gallery-grid">
            {% for image in images %}
                <a id="image-{{ image.id }}" class="gallery-item" href="{{ url_for('group.group_post', group_id=group.id, image_id=image.id) }}" style="background-color: rgb({{ image.image_colours.0.0 }}, {{ image.image_colours.0.1 }}, {{ image.image_colours.0.2 }})">
                    <div class="image-filter">
                        <p class="image-subtitle"></p>
                        <p class="image-title"><span class="time">{{ image.created_at }}</span></p>
                    </div>
                    <img alt="{{ image.post_alt }}" data-src="{{ url_for('api.file', file_name=image.file_name) }}?r=thumb" onload="this.classList.add('loaded');" id="lazy-load"/>
                </a>
            {% endfor %}
        </div>
    {% else %}
        <div class="big-text">
            <h1>*crickets chirping*</h1>
            {% if current_user.is_authenticated %}
                <p>Add some images to the group!</p>
            {% else %}
                <p>Login to start managing this image group!</p>
            {% endif %}
        </div>
    {% endif %}
{% endblock %}