{% 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 %}


                                {% 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 }}"/>


                                        class="border-0 m-auto flex-grow-1 p-0">
                                {% 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 %}