{% extends 'base.html' %}
{% from 'macros/image.html' import gallery_item %}
{% block nav_groups %}selected{% endblock %}

{% block head %}
    {% if images %}
        <meta property="og:image" content="{{ url_for('api.media', path='uploads/' + images.0.filename) }}"/>
        <meta name="twitter:image" content="{{ url_for('api.media', path='uploads/' + images.0.filename) }}">
        <meta name="theme-color" content="rgb{{ images.0.colours.0 }}"/>
        <meta name="twitter:card" content="summary_large_image">
    {% endif %}

    <script type="text/javascript">
        group_data = {
            'id': {{ group.id }},
            'name': "{{ group.name }}",
            'description': "{{ group.description }}",
        }
    </script>

    <style>
        {% if images %}
            :root {
                --background-hsl-hue: {{ images.0.colours.0 | hsl_hue }};
                --background-hsl-saturation: {{ images.0.colours.0 | hsl_saturation }}%;
            }
        {% endif %}
    </style>
{% endblock %}

{% block header %}
    {% if images %}
        <div class="banner">
            <picture>
                <source srcset="{{ url_for('api.media', path='uploads/' + images.0.filename) }}?r=prev&e=webp">
                <source srcset="{{ url_for('api.media', path='uploads/' + images.0.filename) }}?r=prev&e=png">
                <img
                    src="{{ url_for('api.media', path='uploads/' + images.0.filename) }}?r=prev"
                    alt="{% if images.0.alt %}{{ images.0.alt }}{% else %}Group Banner{% endif %}"
                    onload="imgFade(this)" style="opacity:0;"
                />
            </picture>
            <span class="banner-filter"></span>
            <div class="banner-content">
                <p class="banner-info"><a href="{{ url_for('profile.profile', id=group.author.id) }}" class="link">By {{ group.author.username }}</a></p>
                <h1 class="banner-header">{{ group.name }}</h1>
                <p class="banner-subtitle">{{ images|length }} Images · {{ group.description }}</p>
                <div class="pill-row">
                    <div>
                        <button class="pill-item" onclick="copyToClipboard(window.location.href)"><i class="ph ph-export"></i></button>
                    </div>
                    {% if current_user.id == group.author.id %}
                        <div>
                            <button class="pill-item pill__critical" onclick="groupDeletePopup()"><i class="ph ph-trash"></i></button>
                            <button class="pill-item pill__critical" onclick="groupEditPopup()"><i class="ph ph-pencil-simple"></i></button>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    {% else %}
        <div class="banner-small">
            <div class="banner-content">
                <h1 class="banner-header">{{ group.name }}</h1>
                <p class="banner-info">By {{ group.author.username }}</p>
                <div class="pill-row">
                    <div>
                        <button class="pill-item" onclick="copyToClipboard(window.location.href)"><i class="ph ph-export"></i></button>
                    </div>
                    {% if current_user.id == group.author.id %}
                        <div>
                            <button class="pill-item pill__critical" onclick="groupDeletePopup()"><i class="ph ph-trash"></i></button>
                            <button class="pill-item pill__critical" onclick="groupEditPopup()"><i class="ph ph-pencil-simple"></i></button>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    {% endif %}
{% endblock %}

{% block content %}
    {% if images %}
        <div class="gallery-grid">
            {% for image in images %}{{ gallery_item(image) }}{% 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 %}