<!DOCTYPE html>
{% if darkMode == true %}
    <html lang="en" class="dark">
{% else %}
    <html lang="en">
{% endif %}
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <link rel="icon" type="image/x-icon" href="/Public/Favicon.png">

        <meta name="title" content="{{ username }} Content" />
        <meta name="description" content="" />
        <link rel="canonical" href="https://{{ domain }}" />
        <meta name="canonicalURL" content="https://{{ domain }}" />
        <meta name="twitter:card" content="summary_large_image">
        <meta name="twitter:site" content="https://{{ domain }}" />
        <meta name="twitter:title" content="{{ image_name }}" />
        <meta name="twitter:description" content="">
        <meta name="twitter:url" content="https://{{ domain }}" />
        <meta prefix="og: https://{{ domain }}" property="og:type" content="website" />
        <meta prefix="og: https://{{ domain }}" property="og:site_name" content="{{ username }} Content" />
        {% if image_type == 'text' %}
            <meta prefix="og: https://{{ domain }}" property="og:description" content="{{ text_contents }}" />
            <meta name="description" content="{{ text_contents }}" />
            <meta name="twitter:description" content="{{ text_contents }}">
        {% elsif image_type == 'video' %}
            <meta name="og:type" content="video">
            <meta name="og:video" content="https://{{ domain }}/Public/data/{{ image_name }}.{{ image_extension }}" />
            <meta name="og:video:type" content="video/mp4">
        {% elsif image_type == 'image' %}
            <meta prefix="og: https://{{ domain }}" property="og:description" content="" />
            <!--<meta prefix="og: https://{{ domain }}" property="og:image" content="https://{{ domain }}/Public/data/{{ image_name }}.{{ image_extension }}"/>-->
            <meta prefix="og: https://{{ domain }}" property="og:image:url" content="https://{{ domain }}/Public/data/{{ image_name }}.{{ image_extension }}"/>
            <meta name="twitter:image" content="https://{{ domain }}/Public/data/{{ image_name }}.{{ image_extension }}"/>
            <meta rel="image_src" content="https://{{ domain }}/Public/data/{{ image_name }}.{{ image_extension }}" />
        {% endif %}
        <!--<meta prefix="og: https://{{ domain }}" property="og:url" content="https://{{ domain }}" />-->
            <meta prefix="og: https://{{ domain }}" property="og:url" content="https://{{ domain }}/Public/data/{{ image_name }}.{{ image_extension }}" />

        <meta name="theme-color" content="{{ usercolor }}">
        <meta name="msapplication-TileColor" content="{{ usercolor }}">

        <title>{{ username }} Content | {{ image_name }}</title>

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/atom-one-dark.min.css">
        <link rel="stylesheet" href="/Public/Main.css" />
        <style>
            body::-webkit-scrollbar {width: 11px;}
            body {scrollbar-width: thin; scrollbar-color: {{ usercolor }} #1f2937;}
            body::-webkit-scrollbar-track {background: #1f2937;}
            body::-webkit-scrollbar-thumb {background-color: {{ usercolor }}; border-radius: 6px; border: 3px solid #1f2937;}
        </style>
    </head>
    <body class="bg-gray-200 dark:bg-gray-700" style="background-color: #292929">
        <div class="container mx-auto text-center px-8 sm:px-0">
            <div class="block">
                <div class="p-2 w-auto inline-block rounded-md mt-8 px-4 text-gray-800 dark:text-white bg-gray-300 dark:bg-gray-800" style="background-color: #1d1d1d">
                <!--Thanks for clicking nevits content link you can have $1 off nothing.-->
                    <ul>
                        <li class="inline-block"><span class="text-{{ usercolorname }}-400">Name</span>: {{ image_name }}</li>
                        <li class="inline-block px-1 text-gray-400 dark:text-gray-500">|</li>
                        <li class="inline-block"><span class="text-{{ usercolorname }}-400">Size</span>: {{ image_size }}</li>
                        <li class="inline-block px-1 text-gray-400 dark:text-gray-500">|</li>
                        <li class="inline-block"><span class="text-{{ usercolorname }}-400">Type</span>: {{ image_extension }}</li>
                        <li class="inline-block px-1 text-gray-400 dark:text-gray-500">|</li>
                        <li class="inline-block"><span class="text-{{ usercolorname }}-400">Date</span>: {{ image_uploaded }}</li>
                        <li class="inline-block px-1 text-gray-400 dark:text-gray-500">|</li>
                        <li class="inline-block"><a href="https://{{ domain }}/Public/data/{{ image_name }}.{{ image_extension }}" class="text-{{ usercolorname }}-400 hover:text-{{ usercolorname }}-600">Open Original</a></li>
                    </ul>
                </div>
            </div>

            {% if image_type == "image" %}
                <img class="py-8 inline-block" src="https://{{ domain }}/Public/data/{{ image_name }}.{{ image_extension }}" alt="{{ image_name }}">
            {% elsif image_type == "text" %}
                <pre class="text-justify">
                    <code class="language-{{ image_extension }}">{{ text_contents }}</code>
                </pre>
            {% elsif image_type == "video" %}
                <video class="py-8 w-full inline-block" controls controlsList="nodownload">
                    <source src="https://{{ domain }}/Public/data/{{ image_name }}.{{ image_extension }}" type="video/mp4">
                    Your browser doesn't support HTML5 video.
                </video>
            {% elsif image_type == "unsupported" %}
                File type not supported.
            {% endif %}

            <span class="text-gray-500 pb-10 dark:text-white text-sm block">Made by <a class="text-{{ usercolorname }}-500 hover:text-{{ usercolorname }}-600" href="https://sevy.io">Sevy</a>.</span>
        </div>


        <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
        {% if image_type == "text" %}
            <script>hljs.highlightAll();</script>
        {% endif %}
    </body>
</html>