{% include 'header.html' %}
            
            <div class="p-4 space-y-8">
                {% if found %}
                    {% if media %}
                        <h1 class="text-blue-500 text-center text-lg md:text-xl lg:text-2xl xl:text-3xl w-full break-all">
                            Download {{name}}
                        </h1>
                        
                        <div class="mx-auto w-full md:w-3/4 lg:w-2/5 p-2">
                            {% if media.image %}
                                <img class="mx-auto w-2/3 md:w-3/5 lg:w-2/5 rounded" src="/{{id}}/thumbnail" alt="{{name}}">
                            {% elif media.video %}
                                <video id="my-video-player" class="mx-auto rounded" controls poster="/{{id}}/thumbnail">
                                    <source src="/{{id}}/download" type="{{ media.type }}" />
                                </video>
                            {% elif media.audio %}
                                <audio class="mx-auto" controls autoplay muted src="/{{id}}/download" type="{{ media.type }}"></audio>
                            {% endif %}
                            
                            {% if caption %}
                            
                                <div class="flex justify-center mt-1 text-gray-300 font-mono text-xs lg:text-sm xl:text-lg break-all">
                                    <p class="text-left rounded p-4 bg-gray-900 w-auto inline-block shadow-lg"> {{ caption|safe }} </p>
                                </div>
                            
                            {% endif %}
                            
                        </div>
                        
                        <div class="text-center text-white text-sm md:text-base xl:text-2xl">
                    
                            <a class="rounded p-3 bg-indigo-500 hover:bg-indigo-700 shadow-lg" href="/{{id}}/download">Download Now! ({{ size }})</a>
                        
                        </div>
                    {% else %}
                        <div class="mx-auto flex justify-center w-full md:w-3/4 mt-1 text-gray-300 font-mono text-xs lg:text-sm xl:text-lg break-all">
                            <p class="text-left rounded p-4 bg-gray-900 w-auto inline-block shadow-lg"> {{ text|safe }} </p>
                        </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>
            
        <script>
            var myFP = fluidPlayer(
                'my-video-player',{
                    "layoutControls": {
                        "controlBar": {
                            "autoHideTimeout": 3,
                            "animated": true,
                            "autoHide": true
                        },
                        "logo": {
                            "imageUrl": null,
                            "position": "top left",
                            "clickUrl": null,
                            "opacity": 1
                        },
                        "htmlOnPauseBlock": {
                            "html": null,
                            "height": null,
                            "width": null
                        },
                        "autoPlay": false,
                        "mute": true,
                        "allowTheatre": true,
                        "playPauseAnimation": true,
                        "playbackRateEnabled": true,
                        "allowDownload": false,
                        "playButtonShowing": true,
                        "fillToContainer": true,
                        "posterImage": ""
                    },
                    "vastOptions": {
                        "adList": [],
                        "adCTAText": false,
                        "adCTATextPosition": ""
                    }
                }
            );
        </script>

{% include 'footer.html' %}