<!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">
    <title>New Design</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="fa/css/all.min.css">
    <script>
        function alert(text) {
            var alert = document.createElement("div");
            alert.className = "alert";
            alert.innerHTML = text;
            document.body.appendChild(alert);
            setTimeout(function() {
                document.body.removeChild(alert);
            }, 3000);
        }
        function savePaste() {
            document.getElementById('save-button').style = 'display: none';
            let xhr = new XMLHttpRequest();
            xhr.open("POST", "/write");

            xhr.setRequestHeader("Accept", "application/json");
            xhr.setRequestHeader("Content-Type", "application/json");

            let text = document.getElementById('editor').value;
            let name = document.getElementById('name').value;

            let data = JSON.stringify({"text": text, "name": name});

            xhr.send(data);

            xhr.onload = () => {
                let rq = xhr.responseText;
                if (xhr.status == 200) {
                    alert("Paste saved! Redirecting...");
                    setTimeout(() => {window.location.href = "/paste/" + rq;}, 1000);
                } else {
                    document.getElementById('save-button').style = 'display: block';
                }
            };
        }
        function goToHome() {
            window.location.href = "/";
        }
        function toggleEncryption() {
            if(document.getElementById("encryption-button").className == "material-button-toggle-on") {
                document.getElementById("encryption-button").className = "material-button-toggle";
                alert("Encryption turned off!");
            } else {
                document.getElementById("encryption-button").className = "material-button-toggle-on";
                alert("Encryption turned on!");
            }
        }
        function copyLink() {
            /* Get the text field */
            var copyText = window.location.origin+'/paste/(THIS PASTE IS NOT GENERATED YET)';

            /* Copy the text inside the text field */
            navigator.clipboard.writeText(copyText);
            alert("Copied link to clipboard!");
        }
    </script>
    <style>
        .material-button-toggle {
            border: 0px white solid;
            border-radius:10px;
            background-color: #3A4773;
            color: white;
            transition: all .2s ease-in-out;
            width:fit-content;
            margin:0;
            padding:20px;
            padding-top:10px;
            padding-bottom:10px;
            cursor:pointer;
            /* width:22pt; */
            /* height:22pt; */
            display:inline-block;
            font-family: 'hack';
            font-size:10pt;
        }
        .material-button-toggle-on {
            border: 0px white solid;
            border-radius:10px;
            background-color: #819DFF;
            color: black;
            transition: all .2s ease-in-out;
            width:fit-content;
            margin:0;
            padding:20px;
            padding-top:10px;
            padding-bottom:10px;
            cursor:pointer;
            /* width:22pt; */
            /* height:22pt; */
            display:inline-block;
            font-family: 'hack';
            font-size:10pt;
        }
        .material-button-toggle:hover {
            background-color: #819DFF;
            color: black;
        }
        .material-button-toggle > i {
            display:inline-block;
            margin:auto;
            text-align: center;
            margin-right:10px;
        }
        .material-button-toggle-on > i {
            display:inline-block;
            margin:auto;
            text-align: center;
            margin-right:10px;
        }
        .material-editor-box {
            background-color: #161C2E;
            height:calc(100vh - 80px);
            margin: 30px;
            padding-bottom:10px;
            border: 0px white solid;
            border-radius:10px;
        }
        .material-editor-topbar {
            background-color: #1B2338;
            padding:10px;
            border: 0px white solid;
            border-radius:10px;
        }
        .material-editor-name {
            background-color: #1B2338;
            border: 0px #819DFF solid;
            border-radius:10px;
            padding:20px;
            padding-top:10px;
            padding-bottom:10px;
            padding-left:40px;
            font-family: 'hack';
            font-size:10pt;
            color:#819DFF;
            width:300px;
            transition: all .2s ease-in-out;
            outline: none;
        }
        .material-editor-name:focus {
            /* outline: 2px solid #819DFF; */
            background-color:#819DFF;
            color:black;
        }
        .material-editor-textbox {
            margin-top:20px;
        }
        .material-editor-textbox > #editor {
            padding:20px;
            margin:auto;
            display:block;
            width:calc(100% - 80px);
            height: calc(100vh - 210px);
            resize:none;
            border:0px white solid;
            border-radius:10px;
            background: #161C2E;
            color:#819DFF;
            font-size:12pt;
            outline: 2px solid #161C2E;
            transition:all .2s ease-in-out;
        }
        .material-editor-textbox > #editor:focus {
            outline: 2px solid #819DFF;
        }

        .material-editor-name-div {
            max-width: fit-content;
            float:left;
            margin-right: 5px;
        }

        .material-editor-name-div > i {
            position:absolute;
            color: #3A4773;
            margin-top:10px;
            margin-left:10px;
        }
    </style>
</head>
<body style="overflow-y:hidden">
    <div class="material-editor-box">
        <div class="material-editor-topbar">
            <div class="material-editor-name-div"><i class="fa-solid fa-file"></i><input class="material-editor-name" type="text" id="name" placeholder="Here goes the paste name!"/></div>
            <button class="material-button-toggle" onclick="goToHome()"><i class="fa-solid fa-house"></i>Go back to Home</button>
            <button class="material-button-toggle" onclick="savePaste()" id="save-button"><i class="fa-solid fa-floppy-disk"></i>Save</button>
            <button class="material-button-toggle" onclick="copyLink()"><i class="fa-solid fa-clipboard"></i>Copy Link</button>
            <button class="material-button-toggle-on" id="encryption-button" onclick="toggleEncryption()"><i class="fa-solid fa-lock"></i>Toggle Encryption</button>
        </div>
        <div class="material-editor-textbox">
            <textarea placeholder="Enter some text to get started!" id="editor" spellcheck="false" autofocus="true" autocomplete="false"></textarea>
        </div>
    </div>
</body>
</html>