<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= cloudname %> | <%= lang["Add-Subtitles"] %></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
</head>
<body>
    <style>
    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');

    body {
        background-image: linear-gradient(to right bottom, #1f74cc, #3c7ed1, #5087d6, #6291db, #729be0, #87a6e4, #9ab1e9, #acbced, #c5cbf1, #dadcf5, #eeedfa, #ffffff);
        width: 100vw;
        height: 100vh;
        margin: 0;
    }

    .flex-container {
        display: flex;
        width: 100%;
        height: 96%;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
    }

        .addsubtitles {
            width: auto ;
            padding-left: 1%;
            padding-right: 1%;
            height: 35%;
            background-color: #111111;
            border-radius: 50px;
            align-items: center;
            justify-content: center;
            align-items: center;
        }

        .addsubtitles > h1, .addsubtitles > h2, .addsubtitles > h3, h3 {
            font-family: 'Montserrat', sans-serif;
            text-align: center;
            color: #1f74cc;
            line-height: 40%;
        }

        .addsubtitles > form > label {
            display: flex;
            justify-content: center;
            color: #1f74cc;
            font-family: 'Montserrat', sans-serif;
        }

        input {
            height: 20%;
            border-radius: 40px;
            border: none;
            display: flex;
            justify-self: center;
            margin: auto;
            font-size: 100%;
            padding-left: 2%;
            margin-top: 1%;
            margin-bottom: 1%;
        }

       form {
            width: 100%;
            height: 40%;
        }

        button {
            margin: auto;
            height: 20%;
            width: auto;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #1f74cc;
            border-radius: 20px;
            font-size: 20px;
            color: white;
            border: none;
            transition-duration: 0.4s;
            margin-top: 1%;
        }

        button:hover {
            height: 21%;
            width: auto + 1%;
            color:#1f74cc;
            background-color: white;
        }

        .footer {
            width: 40%;
            height: 3%;
            background-color: black;
            border-radius: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: auto;
            color: white;
            font-family: 'Montserrat', sans-serif;
        }

        a:link, a:visited, a:hover, a:active {
            color: #1f74cc;
            text-decoration: none;
            background-color: transparent;
            font-family: 'Montserrat', sans-serif;
            margin: 0 auto;
            text-align: center;
        }
    </style>
    <div class="flex-container">
        <div class="addsubtitles">
            <h1><%= cloudname %></h1>
            <h2 class="subtitle"><%= lang["Add-Subtitles-For"] %> <%= req.params.file %></h2>
            <% let link = `/addsubtitles/${req.user.username}/${req.params.file}` %>
            <form action=<%= link %> method="post">
                <input name="_csrf" value=<%= csrfToken %> type="hidden"/>
                <label for="name"><i class="fa-solid fa-pen-to-square"></i>&nbsp;<%= lang["Subtitles-Name"] %></label>
                <input type="text" id="name" name="name" required></input>
                <label for="url"><i class="fa-solid fa-link"></i>&nbsp;<%= lang["Subtitles-URL"] %></label>
                <input type="text", id="url", name="url" required></input>
                <p><%= lang["Works-Only-With"] %></p>
                <button type="submit" id="add"><i class="fa-solid fa-plus"></i>&nbsp;<%= lang["Add-Subtitles"] %></button>
            </form>
            <form action="https://docs.daneeskripter.dev/daneecloud/subtitlesfromfile">
                <button type="submit"><%= lang["Want-Subtitles"] %></button>
            </form>
        </div>
    </div>
    <div class="footer">
        <p><%= cloudname %> ©️ 2022 - 2023 | Developed by <a href="https://github.com/DaneeSkripter">DaneeSkripter</a></p>
    </div>
</body>
</html>