{% extends 'base.html' %}
{% from 'macros/image.html' import gallery_item %}
{% block nav_profile %}{% if user.id == current_user.id %}selected{% endif %}{% endblock %}

{% block head %}
    {% if user.picture %}
        <meta property="og:image" content="{{ url_for('media_api.media', path='pfp/' + user.picture) }}"/>
        <meta name="twitter:image" content="{{ url_for('media_api.media', path='pfp/' + user.picture) }}">
    {% endif %}
    {% if user.colour %}<meta name="theme-color" content="rgb{{ user.colour }}"/>{% endif %}
    <meta name="twitter:card" content="summary">

    <script type="text/javascript">
        function moreInfo() {
            popUpShow('{{ user.username }}',
                        '<p>Joined: {{ user.joined_at }}</p><br>' +
                        '<p>Images: {{ images|length }}</p><br>' +
                        '<p>Groups: {{ groups|length }}</p>');
        }
    </script>

    <style>
        .banner-picture {
            background-color: rgb{{ user.colour }} !important;
        }
    </style>
{% endblock %}

{% block header %}
    <div class="banner">
        {% if user.banner %}
            <img src="{{ url_for('static', filename='icon.png') }}" alt="Profile Banner" onload="imgFade(this)" style="opacity:0;"/>
        {% else %}
            <img src="{{ url_for('static', filename='banner.png') }}" alt="Profile Banner" onload="imgFade(this)" style="opacity:0;"/>
        {% endif %}
        <span class="banner-filter"></span>
        <div class="banner-content">
            {% if user.picture %}
                <picture class="banner-picture">
                    <source srcset="{{ url_for('media_api.media', path='pfp/' + user.picture) }}?r=pfp&e=webp">
                    <source srcset="{{ url_for('media_api.media', path='pfp/' + user.picture) }}?r=pfp&e=png">
                    <img
                        src="{{ url_for('media_api.media', path='pfp/' + user.picture) }}?r=pfp"
                        alt="Profile picture"
                        onload="imgFade(this)"
                        style="opacity:0;"
                    />
                </picture>
            {% else %}
                <img
                    class="banner-picture"
                    src="{{ url_for('static', filename='icon.png') }}"
                    alt="Profile picture"
                    onload="imgFade(this)"
                    style="opacity:0;"
                />
            {% endif %}
            <h1 class="banner-header">{{ user.username }}</h1>
            <p class="banner-subtitle">{{ images|length }} Images · {{ groups|length }} Groups</p>
            <div class="pill-row">
                <div>
                    <button class="pill-item" onclick="copyToClipboard(window.location.href)"><i class="ph ph-export"></i></button>
                    <button class="pill-item" onclick="moreInfo()"><i class="ph ph-info"></i></button>
                </div>
                {% if user.id == current_user.id %}
                    <div>
                        <a href="{{ url_for('settings.general') }}#profileSettings" class="pill-item pill__critical"><i class="ph ph-user-circle-gear"></i></a>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}

{% block content %}
    {% if images %}
        <h1 class="gallery-header">Images</h1>
        <div class="gallery-grid">
            {% for image in images %}{{ gallery_item(image) }}{% endfor %}
        </div>
    {% else %}
        <div class="big-text">
            <h1>*crickets chirping*</h1>
            <p>There are no images here yet, oopsie!</p>
        </div>
    {% endif %}
{% endblock %}