{% extends "layouts/base-electric.html" %}

{% load static %}

{% load media_filters %}

{% load string_helper %}

{% block title %}
    {% if submission.content_object.title %}
        {{ submission.content_object.title }}
    {% else %}
        {% if submission.content_object.description|length > 16 %}
            {{ submission.content_object.description|slice:"0:16"|add:"..." }}
        {% else %}
            {{ submission.content_object.description }}
        {% endif %}
    {% endif %}

    by {{ submission.content_object.author.artist }}
    {% if submission.category.name == "twitter" %}
        (@{{ submission.content_object.author.artist_url }}) from Twitter

    {% elif submission.category.name == "furaffinity" %}
        {{ submission.content_object.artist }} from FurAffinity
    {% endif %}

{% endblock title %}
 
{% block content %}

    {% include "includes/navigation-transparent.html" %}

   <div class="container-fluid"> 
        <div class="row row-gap-3 column-gap-0">

            <div class="col-xl-9 col-lg-8 pe-lg-0">
                <div class="e-container-border e-container-radius">
                    <div id="submission_container" class="e-container e-container-radius bg-black d-flex justify-content-center align-items-center overflow-hidden">
                        {% if submission.content_object.files.exists %}

                            {% if submission.content_object.files.all|length == 1 %}

                                {% if submission.content_object.files.first.file_mime|is_flash %}
                                    <div id="flash_embed"></div>

                                {% elif submission.content_object.files.first.file_mime|is_image %}
                                        <img class="img-fluid" width="100%" height="auto" 
                                            src="{% url 'files:serve_content_file' 'submission' submission.content_object.files.first.file_hash %}" 
                                            alt="{{ submission.content_object.title }}"/>


                                {% elif submission.content_object.files.first.file_mime|is_pdf %}
                                    <!-- Embed the full PDF.js viewer here -->
                                    <iframe id="pdf-js-viewer" 
                                        src="{% static 'libs/pdfjs-4.7.76-dist/web/viewer.html' %}?file={% url 'files:serve_content_file' 'submission' submission.content_object.files.first.file_hash %}" 
                                        width="100%" height="100%" 
                                        class="border-0 m-auto flex-grow-1 p-0">
                                    </iframe>

                                    <!-- Scripts required for PDF.js -->
                                    <script src="{% static 'libs/pdfjs-4.7.76-dist/build/pdf.js' %}"></script>
                                    <script src="{% static 'libs/pdfjs-4.7.76-dist/web/viewer.js' %}"></script>
                                {% endif %}

                            {% endif %}
                        {% else %}
                            <div class="m-auto center-block bg-body-secondary p-4 rounded-2 border border-3">
                                <h3 class="text-center"><i class="nf nf-md-image_broken p-2 me-2 mb-1"></i>No content</h3>
                                <hr>
                                <p class="text-center">This submission has no media or is missing media.</p>
                            </div>
                        {% endif %}

                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-lg-4">
                <div class="d-none d-sm-none d-md-none d-lg-block e-container-border e-container-radius">
                    <div class="e-container e-container-radius p-2">
                        {% include "sites/partials/post-info.html" with submission=submission %}    
                    </div>
                </div>
            </div>

        </div>

        <div class="e-container-border e-container-radius row my-3 mt-lg-3 mt-0" tabindex="1">
            <div class="e-container e-container-radius p-4">

                {% if submission.content_object.title %}
                <h3 class="bg-body-tertiary p-2 rounded">{{ submission.content_object.title }}</h3>
                <hr>
                {% endif %}

                <div class="d-flex flex-wrap justify-content-center gap-2">
                    {% if next_submission %}
                        <a class="btn btn-primary" href="{% url 'sites:submission' next_submission %}">Next</a>
                    {% else %}
                        <span class="btn btn-outline-primary disabled text-decoration-line-through">Next</span>
                    {% endif %}
                
                    <a class="btn btn-secondary" href="{% url 'sites:artist_profile' submission.author.user_hash %}">View Artist</a>
                    
                    {% if prev_submission %}
                        <a class="btn btn-primary" href="{% url 'sites:submission' prev_submission %}">Prev</a>
                    {% else %}
                        <span class="btn btn-outline-primary disabled text-decoration-line-through">Prev</span>
                    {% endif %}
                    
                    {% if submission.category.name == "twitter" %}
                        <a class="btn btn-outline-secondary ms-auto" 
                            href="https://twitter.com/{{ submission.content_object.author.artist_url }}/status/{{submission.content_object.submission_id}}" 
                            target="_blank">
                            View Source
                        </a>
                    {% elif submission.category.name == "furaffinity" %}
                        <a class="btn btn-outline-secondary ms-auto" 
                            href="https://www.furaffinity.net/view/{{submission.content_object.submission_id}}" 
                            target="_blank">
                            View Source
                        </a>
                    {% endif %}
                    
                    {% if request.user.is_staff or request.user.is_superuser %}
                        <button type="button" class="btn btn-danger"
                            hx-delete="{% url 'sites:submission' submission.submission_hash %}"
                            hx-confirm="Are you sure you want to delete this post?"
                            hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
                            Delete Post
                        </button>
                    {% endif %}

                </div>

                <hr>

                {% if submission.content_object.description %}
                    {% if submission.category.name == "twitter" %}
                        <p class="lg-px-12">{{ submission.content_object.description|clickable_urls|get_twitter_username_from_str|get_tags_from_str|safe }}</p>
                    {% else %}
                        <p>{{ submission.content_object.description|stylizeDescription|clickable_urls|safe }}</p>
                    {% endif %}
                {% else %}
                    <p>No description</p>
                {% endif %}

                <hr>
            </div>
        </div>
        <div class="d-md-block d-lg-none e-container-border e-container-radius row my-3" tabindex="1">
            <div class="e-container e-container-radius p-4">
                {% include "sites/partials/post-info.html" with submission=submission %}    
            </div>
        </div>

    </div>

{% endblock content %}

{% block scripts %}

{% if submission.content_object.files.first.file_mime|is_flash or submission.content_object.file != None %}
<script>
    var flash_embed = document.getElementById('flash_embed');

    if (flash_embed) {
        window.RufflePlayer = window.RufflePlayer || {};
        window.RufflePlayer.config = {
            "wmode": "direct",
            "quality": "high",
        };

        window.addEventListener("load", (event) => {
            const submission_container = document.getElementById("submission_container");
            const ruffle = window.RufflePlayer.newest();
            const player = ruffle.createPlayer();
            const container = document.getElementById("flash_embed");
            container.appendChild(player);

            // Set initial dimensions
            const flash_width = parseInt("{{ submission.content_object.image_width }}");
            const flash_height = parseInt("{{ submission.content_object.image_height }}");
            const aspectRatio = flash_width / flash_height;

            resizeFlashEmbed();

            player.load("{% url 'files:serve_content_file' 'submission' submission.content_object.files.first.file_hash %}")
                .then(() => {
                    console.info("Ruffle successfully loaded the file");
                })
                .catch((e) => {
                    console.error(`Ruffle failed to load the file: ${e}`);
                });

            function resizeFlashEmbed() {
                
                const flash_embed_player = flash_embed.firstChild;

                const container_width = submission_container.offsetWidth;
                const container_height = submission_container.offsetHeight;

                // Adjust width and height based on container while keeping aspect ratio
                let new_width = container_width;
                let new_height = new_width / aspectRatio;

                // If the height exceeds the container's height, adjust using height
                if (new_height > container_height) {
                    new_height = container_height;
                    new_width = new_height * aspectRatio;
                }

                flash_embed_player.style.width = new_width + 'px';
                flash_embed_player.style.height = new_height + 'px';
            }

            // Call the function on window resize as well
            window.addEventListener('resize', resizeFlashEmbed);
            window.addEventListener('load', resizeFlashEmbed);
        });
    }
</script>

{% endif %}
<script src="{% static 'libs/ruffle-nightly-2023_05_04-web-selfhosted/ruffle.js' %}"></script>
{% endblock scripts %}
