{% extends 'base.html' %}
{% block page_index %}
{% if return_page %}?page={{ return_page }}{% endif %}{% endblock %}

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

    <script type="text/javascript">
        const image_data = {
            'id': {{ image.id }},
            'description': '{{ image.description }}',
            'alt': '{{ image.alt }}',
            'filename': '{{ image.filename }}',
        }
    </script>

    <style>
        :root {
            --background-hsl-hue: {{ image.colours.2 | hsl_hue }};
            --background-hsl-saturation: {{ image.colours.2 | hsl_saturation }}%;
        }
        .background::after {
            background-image: linear-gradient(to top, rgba({{ image.colours.0.0 }}, {{ image.colours.0.1 }}, {{ image.colours.0.2 }}, 0.8),
                                                      rgba({{ image.colours.1.0 }}, {{ image.colours.1.1 }}, {{ image.colours.1.2 }}, 0.2));
        }
    </style>
{% endblock %}

{% block header %}
    <div class="banner-small">
        <div class="banner-content">
            <h1 class="banner-header">{{ config.WEBSITE_CONF.name }}</h1>
            <div class="pill-row">
                <div>
                    <a {% if next_url %}class="pill-item" href="{{ next_url }}"{% else %}class="pill-item disabled"{% endif %}>
                        <i class="ph ph-arrow-left"></i>
                    </a>
                </div>
                <div>
                    <button class="pill-item" onclick="imageFullscreen()" id="fullscreenImage"><i class="ph ph-info"></i></button>
                    <button class="pill-item" onclick="copyToClipboard(window.location.href)"><i class="ph ph-export"></i></button>
                    {% if image.author.id == current_user.id %}
                        <button class="pill-item" onclick="imageShowOptionsPopup(this)"><i class="ph ph-list"></i></button>
                    {% endif %}
                </div>
                <div>
                    <a {% if prev_url %}class="pill-item" href="{{ prev_url }}"{% else %}class="pill-item disabled"{% endif %}>
                        <i class="ph ph-arrow-right"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block content %}
    <div class="background">
        <picture>
            <source srcset="{{ url_for('api.media', path='uploads/' + image.filename) }}?r=prev&e=webp">
            <source srcset="{{ url_for('api.media', path='uploads/' + image.filename) }}?r=prev&e=png">
            <img src="{{ url_for('api.media', path='uploads/' + image.filename) }}?r=prev" alt="{{ image.alt }}" onload="imgFade(this)" style="opacity:0;"/>
        </picture>
    </div>

    <div class="image-container {% if close_tab %}collapsed{% endif %}">
        <picture>
            <source srcset="{{ url_for('api.media', path='uploads/' + image.filename) }}?r=prev&e=webp">
            <source srcset="{{ url_for('api.media', path='uploads/' + image.filename) }}?r=prev&e=png">
            <img
                src="{{ url_for('api.media', path='uploads/' + image.filename) }}?r=prev"
                alt="{{ image.alt }}"
                onload="imgFade(this)"
                style="opacity:0;"
                {% if "File" in image.exif %}
                    width="{{ image.exif.File.Width.raw }}"
                    height="{{ image.exif.File.Height.raw }}"
                {% endif %}
            />
        </picture>
    </div>

    <div class="info-container {% if close_tab %}collapsed{% endif %}">
        <details open>
            <summary>
                <i class="ph ph-info"></i><h2>Info</h2><span style="width: 100%"></span>
                <i class="ph ph-caret-down collapse-indicator"></i>
            </summary>

            <table>
                <tr>
                    <td>Author</td>
                    <td>
                        {% if image.author.picture %}
                            <img src="{{ url_for('api.media', path='pfp/' + image.author.picture) }}" alt="Profile Picture" class="pfp" onload="imgFade(this)" style="opacity: 0;"/>
                        {% endif %}
                        <a href="{{ url_for('profile.profile', id=image.author.id) }}" class="link">{{ image.author.username }}</a>
                    </td>
                </tr>
                <tr>
                    <td>Upload date</td>
                    <td><span class="time">{{ image.created_at }}</span></td>
                </tr>
                {% if image.description %}
                    <tr>
                        <td>Description</td>
                        <td>{{ image.description }}</td>
                    </tr>
                {% endif %}
            </table>
            <div class="img-colours">
                {% for col in image.colours %}
                    <button style="background-color: rgb{{ col }}" onclick="copyToClipboard('rgb{{ col }}')">
                        <i class="ph-fill ph-paint-bucket" style="color:{{ col|colour_contrast }};"></i>
                    </button>
                {% endfor %}
            </div>
            {% if image.groups %}
                <div class="img-groups">
                    {% for group in image.groups %}
                        <a href="{{ url_for('group.group', group_id=group.id) }}" class="tag-icon"><i class="ph ph-package"></i>{{ group['name'] }}</a>
                    {% endfor %}
                </div>
            {% endif %}
        </details>
        <details open>
            <summary>
                <i class="ph ph-file-image"></i><h2>Metadata</h2>
                <span style="width: 100%"></span>
                <i class="ph ph-caret-down collapse-indicator"></i>
            </summary>
            <table>
                {% for tag in image_exif %}
                    <tr>
                        <td>{{ tag.key }}</td>
                        <td>{{ tag.value }}</td>
                    </tr>
                {% endfor %}
            </table>
        </details>
    </div>
{% endblock %}