{% extends 'layout.html' %}
{% block nav_groups %}selected{% endblock %}
{% block head %}
    <style>
        {% if images %}
            .banner-content p {
                color: {{ text_colour }} !important;
            }
            .banner-content h1 {
                color: {{ text_colour }} !important;
            }

            .banner-filter {
                background: linear-gradient(to right, rgb({{ images.0.image_colours.0.0 }}, {{ images.0.image_colours.0.1 }}, {{ images.0.image_colours.0.2 }}), transparent) !important;
            }
            @media (max-width: 800px) {
                .banner-filter {
                    background: linear-gradient(to bottom, rgb({{ images.0.image_colours.0.0 }}, {{ images.0.image_colours.0.1 }}, {{ images.0.image_colours.0.2 }}), transparent) !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="/api/file/{{ 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">
        <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="{{ image.file_name }}" onload="this.classList.add('loaded');" id="lazy-load"/>
                </a>
            {% endfor %}
        </div>
    {% else %}
        <div class="big-text">
            <h1>*crickets chirping*</h1>
            {% if g.user %}
                <p>Add some images to the group!</p>
            {% else %}
                <p>Login to start managing this image group!</p>
            {% endif %}
        </div>
    {% endif %}
{% endblock %}

{% block script %}
    <script>
        // /api/group/modify

        modForm = document.querySelector('#modifyGroup');

        modForm.addEventListener('submit', function (event) {
            event.preventDefault();

            const formData = new FormData();

            formData.append('group', modForm.group.value);
            formData.append('image', modForm.image.value);
            formData.append('action', modForm.action.value);

            $.ajax({
                url: '/api/group/modify',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function (data) {
                    addNotification('Image added to group', 1);
                }
            })
        })
    </script>
{% endblock %}