<html>

<head>
    <title>YDL</title>
    <link rel="apple-touch-icon" sizes="180x180" href="static/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="static/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="static/favicon-16x16.png">
    <link rel="manifest" href="static/site.webmanifest">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        :root {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            font-size: 17px;
            background-color: #292F36;
            color: #ccc;
        }
        body {
            text-align: center;
            margin-top: 5em;
        }
        @media (min-width: 1171px) {
            .downloader{
                
                height: 50px;
            }
        }
        @media (max-width: 1170px) {
            :root {
                font-size: 40px;
            }
            .downloader{
                height: 125px;
                width: 700px;
            }
        }
        .downloader {
            font-size: 1.25em;
            padding: 0.5em;
            border-radius: 0.5em;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <!-- <div id="glass"></div> -->
    <!-- {navBar} -->
    <form id="ydl_download">
        <input class="downloader" name="url" type="text" id="download_field" placeholder="Enter URL">
        
        <select class="downloader" name="location" id="download_location">
            <option value="/nsfw">NSFW</option>
            <option value="/podcasts">Podcast</option>
            <option value="/asmr">ASMR</option>
            <option value="/youtube">YouTube</option>
        </select><br>
        
        <button class="downloader" type="submit">Download</button>
    </form>
    <div id="downloadResult"></div>
    
    <script>
        function clearInput() {
            $('#download_field').val(''); // Clear the input field
        }
                
        $(document).ready(function () {
            $('#ydl_download').submit(function (event) {
                event.preventDefault(); // Prevent default form submission
                
                $.ajax({
                    type: 'POST',
                    url: '/ydl', // URL for handling the request on the server
                    data: $('#ydl_download').serializeArray(), // Serialize form data
                    success: function (data) {
                        $('#downloadResult').html(data); // Show server response
                        alert("File is now downloading"); // Update as necessary
                        clearInput(); // Clear the form fields after download is finished
                    },
                    error: function () {
                        alert("An error occurred during the download process. Please try again.");
                    }
                });
            });
        });
    </script>
    
<!-- <script type="text/javascript" src="/static/javascript/ydl.js"></script> -->

</html>