{% include 'header.html' %}

            <div class="p-4 space-y-8">
                {% if found %}
                    {% if media %}
                        <h1 class="text-blue-500 text-center text-lg lg:text-xl xl:text-3xl w-full break-all">
                            Download {{name}}
                        </h1>

                        <div class="mx-auto w-full p-2 md:w-3/4 lg:w-2/5 p-2">
                            {% if media.image %}
                                <img src="{{thumbnail}}" class="mx-auto rounded" alt="{{name}}"/>
                            {% elif media.video %}
                                <div id="video-warning" class="mx-auto p-4 bg-gray-600 text-gray-300 rounded border text-center hidden break-words">
                                    <p> Video {{name}} could not be played!</p>
                                </div>

                                <div id="my-video-wrapper">
                                    <video id="my-video-player" class="mx-auto rounded" controls="controls" poster="{{thumbnail}}">
                                        <source src="{{download_url}}" type="video/mp4"/>
                                    </video>
                                </div>

                                <script>
                                    var video = document.querySelector("video");
                                    var src = video.firstElementChild

                                    src.addEventListener('error', function(evt) {
                                        console.log(evt);
                                        document.getElementById('my-video-wrapper').style.display = 'none';
                                        document.getElementById('video-warning').style.display = 'block';
                                    });
                                    var myFP = fluidPlayer(
                                        'my-video-player',{
                                            "layoutControls": {
                                                "autoPlay": false,
                                                "mute": true,
                                                "allowTheatre": true,
                                                "playPauseAnimation": true,
                                                "playbackRateEnabled": true,
                                                "allowDownload": false,
                                                "playButtonShowing": true,
                                                "fillToContainer": true,
                                                "posterImage": ""
                                            }
                                        }
                                    );
                                </script>
                            {% elif media.audio %}
                                 <div id="audio-warning" class="mx-auto p-4 bg-gray-600 text-gray-300 rounded border text-center hidden break-words">
                                    <p> Audio {{name}} could not be played!</p>
                                </div>

                                <div id="my-audio-wrapper">
                                    <img src="{{thumbnail}}" class="mx-auto rounded w-full" alt="{{name}}"/>
                                    <audio class="mx-auto" controls="controls" muted="muted">
                                        <source src="{{download_url}}" type="audio/mpeg"/>
                                    </audio>
                                </div>
                                <script>
                                    var audio = document.querySelector("audio");
                                    var src = audio.firstElementChild

                                    src.addEventListener('error', function(evt) {
                                        console.log(evt);
                                        document.getElementById('my-audio-wrapper').style.display = 'none';
                                        document.getElementById('audio-warning').style.display = 'block';
                                    });
                                </script>
                            {% endif %}

                            {% if caption_html %}

                                <div class="mx-auto mt-1">
                                    <div class="flex justify-center text-gray-300 font-mono">
                                        <p class="text-left w-full rounded p-4 bg-gray-900 shadow-lg"> {{ caption_html|safe }} </p>
                                    </div>
                                    {% if reply_btns %}
                                        <div class="w-full block">
                                            {% for row in reply_btns %}
                                                <div class="flex justify-center">
                                                    {% for btn in row %}
                                                        <a href="{{ btn.url }}" target="_blank"
                                                        class="p-2 m-1 flex-1 border rounded bg-white border-blue-500 text-center text-blue-500 hover:bg-blue-500 hover:text-white transition ease-in duration-150"
                                                        > {{btn.text}} </a>
                                                    {% endfor %}
                                                </div>
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                </div>

                            {% endif %}

                        </div>
                        
                        <div class="text-center text-white">

                            <a href="{{download_url}}"
                            class="rounded p-3 bg-indigo-500 hover:bg-indigo-700 shadow-lg{% if block_downloads %} cursor-not-allowed disabled{% else %}" download="{{name}}{% endif %}"
                            >Download Now! ({{ human_size }})</a>

                        </div>
                    {% else %}
                        <div class="mx-auto flex flex-wrap justify-center w-full md:w-3/4 mt-1">
                            <div class="flex justify-center text-gray-300 font-mono">
                                <p class="text-left rounded p-4 bg-gray-900 w-full shadow-lg"> {{ text_html|safe }} </p>
                            </div>
                            {% if reply_btns %}
                                <div class="w-full block">
                                    {% for row in reply_btns %}
                                        <div class="flex justify-center">
                                            {% for btn in row %}
                                                <a href="{{btn.url}}" target="_blank"
                                                class="p-2  m-1 flex-1 border rounded bg-white border-blue-500 text-center text-blue-500 hover:bg-blue-500 hover:text-white transition ease-in duration-150"
                                                > {{btn.text}} </a>
                                            {% endfor %}
                                        </div>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                    {% endif %}

                {% else %}
                    <h1 class="text-blue-500 text-center text-2xl md:text-3xl lg:text-4xl xl:text-5xl">Ooops...</h1>

                    <p class="text-center text-sm md:text-base lg:text-xl xl:text-2xl font-semibold">
                        {{ reason }}
                    </p>
                {% endif %}

            </div>

{% include 'footer.html' %}