{% extends 'layout.html' %}
{% block nav_groups %}selected{% endblock %}
{% block head %}
    {% if images %}
        <meta name="theme-color" content="rgb({{ images.0.colours.0.0 }}{{ images.0.colours.0.1 }}{{ images.0.colours.0.2 }})"/>
    {% endif %}

    {% if current_user.is_authenticated %}
        <script type="text/javascript">
            function showCreate() {
                // Create elements
                cancelBtn = document.createElement('button');
                cancelBtn.classList.add('btn-block');
                cancelBtn.classList.add('transparent');
                cancelBtn.innerHTML = 'nuuuuuuuu';
                cancelBtn.onclick = popupDissmiss;

                submitBtn = document.createElement('button');
                submitBtn.classList.add('btn-block');
                submitBtn.classList.add('primary');
                submitBtn.innerHTML = 'Submit!!';
                submitBtn.type = 'submit';
                submitBtn.setAttribute('form', 'createForm');

                // Create form
                createForm = document.createElement('form');
                createForm.id = 'createForm';
                createForm.setAttribute('onsubmit', 'return create(event);');

                titleInput = document.createElement('input');
                titleInput.classList.add('input-block');
                titleInput.type = 'text';
                titleInput.placeholder = 'Group namey';
                titleInput.id = 'name';

                descriptionInput = document.createElement('input');
                descriptionInput.classList.add('input-block');
                descriptionInput.type = 'text';
                descriptionInput.placeholder = 'What it about????';
                descriptionInput.id = 'description';

                createForm.appendChild(titleInput);
                createForm.appendChild(descriptionInput);

                popUpShow(
                    'New stuff!',
                    'Image groups are a simple way to "group" images together, are you ready?',
                    createForm,
                    [cancelBtn, submitBtn]
                );
            }

            function create(event) {
                // AJAX takes control of subby form :3
                event.preventDefault();
            
                let formName = document.querySelector("#name").value;
                let formDescription = document.querySelector("#description").value;
            
                if (!formName) {
                    addNotification("Group name must be set!", 3);
                    return;
                }
            
                // Make form
                const formData = new FormData();
                formData.append("name", formName);
                formData.append("description", formDescription);
            
                fetch('{{ url_for('group_api.create_group') }}', {
                    method: 'POST',
                    body: formData
                }).then(response => {
                    if (response.status === 200) {
                        addNotification('Group created!', 1);
                        popupDissmiss();
                    } else {
                        switch (response.status) {
                            case 500:
                                addNotification('Server exploded, F\'s in chat', 2);
                                break;
                            case 403:
                                addNotification('None but devils play past here... Bad information', 2);
                                break;
                            default:
                                addNotification('Error logging in, blame someone', 2);
                                break;
                        }
                    }
                }).catch(error => {
                    addNotification('Error making group! :c', 2);
                });
            }
        </script>
    {% endif %}
{% endblock %}
{% block content %}
    <div class="banner-small">
        <div class="banner-content">
            <h1 class="banner-header">{{ config.WEBSITE_CONF.name }}</h1>
            {% if groups|length == 0 %}
                <p class="banner-info">No groups!!!!</p>
            {% elif groups|length == 69 %}
                <p class="banner-info">{{ groups|length }} groups, uwu</p>
            {% else %}
                <p class="banner-info">{{ groups|length }} groups</p>
            {% endif %}
            {% if current_user.is_authenticated %}
                <div class="pill-row">
                    <div>
                        <button class="pill-item" onclick="showCreate()"><i class="ph ph-plus"></i></button>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>

    {% 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) }}" {% if group.images|length > 0 %} style="background-color: rgba({{ group.images.0.colours.0.0 }}, {{ group.images.0.colours.0.1 }}, {{ group.images.0.colours.0.2 }}, 0.4);" {% endif %}>
                    <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('media_api.media', path='uploads/' + image.filename) }}?r=thumb"
                                    onload="imgFade(this)"
                                    style="opacity:0;"
                                    id="lazy-load"
                                    class="data-{{ loop.index }}"
                                    {% if image.alt %}{{ image.alt }}{% else %}Image Thumbnail{% endif %}
                                />
                            {% endfor %}
                        {% else %}
                            <img src="{{ url_for('static', filename='error.png') }}" class="loaded" alt="Error thumbnail"/>
                        {% 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 %}