{% extends 'layout.html' %}

{% block nav_groups %}navigation-item__selected{% endblock %}

{% block content %}
    <div class="banner">
        {% if images %}
            <img
                src="/api/uploads/{{ images.0.file_name }}?w=1920&h=1080"
                onload="imgFade(this)"
                style="opacity:0; background-color:rgb({{ images.0.image_colours.0.0 }}, {{ images.0.image_colours.0.1 }}, {{ images.0.image_colours.0.2 }})"
            />
            <span
                class="banner-filter"
                style="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)"
            ></span>
            <div class="banner-content">
                <p><span id="contrast-check" data-color="rgb({{ images.0.image_colours.0.0 }}, {{ images.0.image_colours.0.1 }}, {{ images.0.image_colours.0.2 }})">{{ group.description }}</span></p>
                <h1><span id="contrast-check" data-color="rgb({{ images.0.image_colours.0.0 }}, {{ images.0.image_colours.0.1 }}, {{ images.0.image_colours.0.2 }})">{{ group.name }}</span></h1>
                <p><span id="contrast-check" data-color="rgb({{ images.0.image_colours.0.0 }}, {{ images.0.image_colours.0.1 }}, {{ images.0.image_colours.0.2 }})">By {{ group.author_username }} - {{ images|length }} Images</span></p>
            </div>
        {% else %}
            <img src="{{ url_for('static', filename='images/bg.svg') }}" onload="imgFade(this)" style="opacity:0;"/>
            <span></span>
            <div class="banner-content">
                <p>{{ group.description }}</p>
                <h1>{{ group.name }}</h1>
                <p>By {{ group.author_username }} - {{ images|length }} Images</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="imgFade(this)" style="opacity:0;" id="lazy-load"/>
                </a>
            {% endfor %}
        </div>
    {% else %}
        <div class="big-text">
            <h1>No image!</h1>
            {% if g.user %}
                <p>You can get started by uploading an image!</p>
            {% else %}
                <p>Login to start uploading images!</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 %}