<!DOCTYPE html>
<html lang="en">
    <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, user-scalable=no">
        <meta property="og:type" content="website" />
        <meta name="title" content="CDN Slave" />
        <meta name="description" content="Upload to Discord's CDN without needing their app." />
        <meta name="robots" content="index, nofollow" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="language" content="English" />
        <meta name="author" content="Spinfal" />
        <meta property="og:image" content="https://us-east-1.tixte.net/uploads/cdn.spin.rip/a74ef551-7e0e-4f99-9e2f-f5227466d44b.png" />
        <meta property="twitter:card" content="summary_large_image" />
        <meta property="twitter:image" content="https://us-east-1.tixte.net/uploads/cdn.spin.rip/a74ef551-7e0e-4f99-9e2f-f5227466d44b.png" />
        <title>CDN Slave</title>
        <link rel="stylesheet" href="css/index.css" />
        <style type="text/tailwindcss">
            @layer utilities {
                body {
                    background-color: #e1e4ed;
                }
                .hidden {
                    display: none;
                }
                ::-webkit-file-upload-button {
                    display: none;
                }
            }
        </style>
        <style>
            .tooltip {
                position: relative;
                display: inline-block;
                border-bottom: 1px dotted black;
            }
            
            .tooltip .tooltiptext {
                visibility: hidden;
                width: 120px;
                background-color: #555;
                color: #fff;
                text-align: center;
                border-radius: 6px;
                padding: 5px 0;
                position: absolute;
                z-index: 1;
                bottom: 125%;
                left: 50%;
                margin-left: -60px;
                opacity: 0;
                transition: opacity 0.3s;
            }
            
            .tooltip .tooltiptext::after {
                content: "";
                position: absolute;
                top: 100%;
                left: 50%;
                margin-left: -5px;
                border-width: 5px;
                border-style: solid;
                border-color: #555 transparent transparent transparent;
            }
            
            .tooltip:hover .tooltiptext {
                visibility: visible;
                opacity: 1;
            }
            </style>
    </head>
    <body class="px-2">
        <div class="container mx-auto">
            <div class="flex flex-col items-center justify-center h-screen">
                <div class="w-full max-w-md">
                    <div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
                        <div class="flex flex-col items-center mb-4">
                            <h1 class="text-2xl font-semibold text-center">File URLs</h1>
                            <div class="tooltip text-sm">Message ID: <strong><%= messageId %></strong>
                                <span class="tooltiptext">This is used to refetch new CDN URLs if they expire</span>
                            </div>
                        </div>
                        <div class="flex flex-col items-center">
                            <div class="-mx-3 mb-3">
                                <div class="flex flex-col gap-4 px-3 md:mb-0 text-center">
                                    <p class="break-all">CDN URL: <a class="text-blue-700 hover:underline decoration-dotted" href="<%= url %>" rel="noreferrer" target="_blank">view</a></p>
                                    <div class="tooltip">Proxy URL: <a class="text-blue-700 hover:underline decoration-dotted" href="<%= proxyURL %>" rel="noreferrer" target="_blank">view</a>
                                        <span class="tooltiptext text-sm">Media URL may not be availble for all files</span>
                                    </div>
                                    <p class="break-all">Custom URL: <a class="text-blue-700 hover:underline decoration-dotted" href="<%= customURL %>" rel="noreferrer" target="_blank">view</a></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <footer class="p-4 bg-white rounded shadow-md md:flex md:items-center md:justify-between md:p-6 container w-full max-w-md">
                    <span class="text-sm text-gray-500 sm:text-center dark:text-gray-400"><%= uploadDate %>
                    </span>
                    <ul class="flex flex-wrap items-center mt-3 sm:mt-0">
                        <li>
                            <a href="https://mimeapplication.net/<%= fileType.split('/')[1] %>" target="_blank" rel="noreferrer"><p class="text-sm text-gray-500 sm:text-center dark:text-blue-400 hover:underline decoration-dotted"><%= fileType %></p></a>
                        </li>
                    </ul>
                </footer>
            </div>
        </div>
    </body>
</html>