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

{% block head %}
    <meta property="og:image" content="{{ url_for('media_api.media', path='uploads/' + image.filename) }}"/>
    <meta name="twitter:image" content="{{ url_for('media_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">
        function fullscreen() {
            let info = document.querySelector('.info-container');
            let image = document.querySelector('.image-container');

            if (info.classList.contains('collapsed')) {
                info.classList.remove('collapsed');
                image.classList.remove('collapsed');
                document.cookie = "image-info=0"
            } else {
                info.classList.add('collapsed');
                image.classList.add('collapsed');
                document.cookie = "image-info=1"
            }
        }

        {% if current_user.id == image.author.id %}
            function imageDelete() {
                cancelBtn = document.createElement('button');
                cancelBtn.classList.add('btn-block');
                cancelBtn.classList.add('transparent');
                cancelBtn.innerHTML = 'nuuuuuuuu';
                cancelBtn.onclick = popupDissmiss;

                deleteBtn = document.createElement('button');
                deleteBtn.classList.add('btn-block');
                deleteBtn.classList.add('critical');
                deleteBtn.innerHTML = 'Dewww eeeet!';
                deleteBtn.onclick = deleteConfirm;
                
                popUpShow('DESTRUCTION!!!!!!',
                          'Do you want to delete this image along with all of its data??? ' +
                          'This action is irreversible!',
                          null,
                          [cancelBtn, deleteBtn]);
            }
            function deleteConfirm() {
                popupDissmiss();

                fetch('{{ url_for('media_api.delete_image', image_id=image['id']) }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        action: 'delete'
                    })
                }).then(function(response) {
                    if (response.ok) {
                        window.location.href = '/';
                    } else {
                        addNotification(`Image *clings*`, 2);
                    }
                });
            }

            function imageEdit() {
                addNotification("Not an option, oops!", 3);
            }
        {% endif %}
    </script>

    <style>
        .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">
                {% if next_url %}<div><a class="pill-item" href="{{ next_url }}"><i class="ph ph-arrow-left"></i></a></div>{% endif %}
                <div>
                    <button class="pill-item" onclick="fullscreen()" 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>
                    <a class="pill-item" href="{{ url_for('media_api.media', path='uploads/' + image.filename) }}" download onclick="addNotification('Download started!', 4)"><i class="ph ph-file-arrow-down"></i></a>
                </div>
                {% if current_user.id == image.author.id %}
                    <div>
                        <button class="pill-item pill__critical" onclick="imageDelete()"><i class="ph ph-trash"></i></button>
                        <button class="pill-item pill__critical" onclick="imageEdit()"><i class="ph ph-pencil-simple"></i></button>
                    </div>
                {% endif %}
                {% if prev_url %}<div><a class="pill-item" href="{{ prev_url }}"><i class="ph ph-arrow-right"></i></a></div>{% endif %}
            </div>
        </div>
    </div>
{% endblock %}

{% block content %}
    <div class="background">
        <picture>
            <source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=prev&e=webp">
            <source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=prev&e=png">
            <img src="{{ url_for('media_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('media_api.media', path='uploads/' + image.filename) }}?r=prev&e=webp">
            <source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=prev&e=png">
            <img
                src="{{ url_for('media_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>
                        <img src="{{ url_for('media_api.media', path='pfp/' + image.author.picture) }}" alt="Profile Picture" class="pfp" onload="imgFade(this)" style="opacity: 0;"/>
                        <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="{{ 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>
        {% for tag in image.exif %}
            <details open>
                <summary>
                    {% if tag == 'Photographer' %}
                            <i class="ph ph-person"></i><h2>Photographer</h2>
                        {% elif tag == 'Camera' %}
                            <i class="ph ph-camera"></i><h2>Camera</h2>
                        {% elif tag == 'Software' %}
                            <i class="ph ph-desktop-tower"></i><h2>Software</h2>
                        {% elif tag == 'File' %}
                            <i class="ph ph-file-image"></i><h2>File</h2>
                        {% else %}
                            <i class="ph ph-file-image"></i><h2>{{ tag }}</h2>
                        {% endif %}
                        <span style="width: 100%"></span>
                        <i class="ph ph-caret-down collapse-indicator"></i>
                </summary>
                <table>
                    {% for subtag in image.exif[tag] %}
                        <tr>
                            <td>{{ subtag }}</td>
                            {% if image.exif[tag][subtag]['formatted'] %}
                                {% if image.exif[tag][subtag]['type'] == 'date' %}
                                    <td><span class="time">{{ image.exif[tag][subtag]['formatted'] }}</span></td>
                                {% else %}
                                    <td>{{ image.exif[tag][subtag]['formatted'] }}</td>
                                {% endif %}
                            {% elif image.exif[tag][subtag]['raw'] %}
                                <td>{{ image.exif[tag][subtag]['raw'] }}</td>
                            {% else %}
                                <td class="empty-table">Oops, an error</td>
                            {% endif %}
                        </tr>
                    {% endfor %}
                </table>
            </details>
        {% endfor %}
    </div>
{% endblock %}

{% block script %}
    <script type="text/javascript">
        function getCookie(cname) {
            let name = cname + "=";
            let ca = document.cookie.split(';');
            for(let i = 0; i < ca.length; i++) {
                let c = ca[i];
                while (c.charAt(0) == ' ') {
                    c = c.substring(1);
                }
                if (c.indexOf(name) == 0) {
                    return c.substring(name.length, c.length);
                }
            }
            return "";
        }

        /*
        if (getCookie("image-info")) {
            document.querySelector('.info-container').classList.add('collapsed');
            document.querySelector('.image-container').classList.add('collapsed');
        }
        */
         */
    </script>
{% endblock %}