<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/assets/css/style.css">
    <title>OpenAPI - Codebin</title>
</head>
<body>

    <%- include("../navbar.ejs") %>

    <div class="container">
        <form id="form" class="form form-container">
            <div class="form-group">
                <label for="content" class="form-label">Content</label>
                <textarea name="content" id="content" cols="30" rows="10" class="form-input" required></textarea>
            </div>
            <div class="form-group">
                <select name="type" id="type" class="form-input">
                    <option value="auto">Auto</option>
                    <option value="txt">Plaintext</option>
                    <option value="1c">1C</option>
                    <option value="abnf">ABNF</option>
                    <option value="accesslog">Access logs</option>
                    <option value="ada">Ada</option>
                    <option value="ino">Arduino</option>
                    <option value="arm">ARM assembler</option>
                    <option value="avrasm">AVR assembler</option>
                    <option value="as">ActionScript</option>
                    <option value="asc">AngelScript</option>
                    <option value="apache">Apache</option>
                    <option value="osascript">AppleScript</option>
                    <option value="arcade">Arcade</option>
                    <option value="adoc">AsciiDoc</option>
                    <option value="aspectj">AspectJ</option>
                    <option value="autohotkey">AutoHotkey</option>
                    <option value="autoit">AutoIt</option>
                    <option value="awk">Awk</option>
                    <option value="sh">Bash</option>
                    <option value="basic">Basic</option>
                    <option value="bnf">BNF</option>
                    <option value="bf">Brainfuck</option>
                    <option value="cs">C#</option>
                    <option value="c">C</option>
                    <option value="cpp">C++</option>
                    <option value="cal">C/AL</option>
                    <option value="cos">Cache Object Script</option>
                    <option value="cmake">CMake</option>
                    <option value="coq">Coq</option>
                    <option value="csp">CSP</option>
                    <option value="css">CSS</option>
                    <option value="capnp">Cap'n Proto</option>
                    <option value="clj">Clojure</option>
                    <option value="cson">CoffeeScript</option>
                    <option value="crm">Crmsh</option>
                    <option value="cr">Crystal</option>
                    <option value="d">D</option>
                    <option value="dart">Dart</option>
                    <option value="dpr">Delphi</option>
                    <option value="diff">Diff</option>
                    <option value="jinja">Django</option>
                    <option value="dns">DNS Zone file</option>
                    <option value="docker">Dockerfile</option>
                    <option value="dos">DOS</option>
                    <option value="dsconfig">dsconfig</option>
                    <option value="dts">DTS</option>
                    <option value="dst">Dust</option>
                    <option value="ebnf">EBNF</option>
                    <option value="elixir">Elixir</option>
                    <option value="elm">Elm</option>
                    <option value="erl">Erlang</option>
                    <option value="xls">Excel</option>
                    <option value="fs">F#</option>
                    <option value="fix">FIX</option>
                    <option value="f90">Fortran</option>
                    <option value="nc">G-Code</option>
                    <option value="gms">Gams</option>
                    <option value="gss">GAUSS</option>
                    <option value="gherkin">Gherkin</option>
                    <option value="hbs">Glimmer and EmberJS</option>
                    <option value="go">Go</option>
                    <option value="golo">Golo</option>
                    <option value="gradle">Gradle</option>
                    <option value="groovy">Groovy</option>
                    <option value="xml">HTML, XML</option>
                    <option value="http">HTTP</option>
                    <option value="haml">Haml</option>
                    <option value="hbs">Handlebars</option>
                    <option value="hs">Haskell</option>
                    <option value="hx">Haxe</option>
                    <option value="hy">Hy</option>
                    <option value="ini">Ini</option>
                    <option value="i7">Inform7</option>
                    <option value="irpf90">IRPF90</option>
                    <option value="json">JSON</option>
                    <option value="jsp">Java</option>
                    <option value="js">JavaScript</option>
                    <option value="julia">Julia</option>
                    <option value="kt">Kotlin</option>
                    <option value="tex">LaTeX</option>
                    <option value="leaf">Leaf</option>
                    <option value="lean">Lean</option>
                    <option value="ls">Lasso</option>
                    <option value="less">Less</option>
                    <option value="ldif">LDIF</option>
                    <option value="lisp">Lisp</option>
                    <option value="livecodeserver">LiveCode Server</option>
                    <option value="ls">LiveScript</option>
                    <option value="lua">Lua</option>
                    <option value="mk">Makefile</option>
                    <option value="md">Markdown</option>
                    <option value="md_render">Markdown Render</option>
                    <option value="wl">Mathematica</option>
                    <option value="matlab">Matlab</option>
                    <option value="maxima">Maxima</option>
                    <option value="mel">Maya Embedded Language</option>
                    <option value="mercury">Mercury</option>
                    <option value="mizar">Mizar</option>
                    <option value="mojolicious">Mojolicious</option>
                    <option value="monkey">Monkey</option>
                    <option value="moon">Moonscript</option>
                    <option value="n1ql">N1QL</option>
                    <option value="nsis">NSIS</option>
                    <option value="nginx">Nginx</option>
                    <option value="nim">Nim</option>
                    <option value="nix">Nix</option>
                    <option value="ml">OCaml</option>
                    <option value="mm">Objective C</option>
                    <option value="glsl">OpenGL Shading Language</option>
                    <option value="scad">OpenSCAD</option>
                    <option value="ruleslanguage">Oracle Rules Language</option>
                    <option value="oxygene">Oxygene</option>
                    <option value="pf">PF</option>
                    <option value="php">PHP</option>
                    <option value="parser3">Parser3</option>
                    <option value="pl">Perl</option>
                    <option value="pony">Pony</option>
                    <option value="pgsql">PostgreSQL & PL/pgSQL</option>
                    <option value="processing">Processing</option>
                    <option value="prolog">Prolog</option>
                    <option value="properties">Properties</option>
                    <option value="protobuf">Protocol Buffers</option>
                    <option value="pp">Puppet</option>
                    <option value="py">Python</option>
                    <option value="profile">Python profiler results</option>
                    <option value="pycon">Python REPL</option>
                    <option value="k">Q</option>
                    <option value="qml">QML</option>
                    <option value="r">R</option>
                    <option value="re">ReasonML</option>
                    <option value="rib">RenderMan RIB</option>
                    <option value="rsl">RenderMan RSL</option>
                    <option value="graph">Roboconf</option>
                    <option value="rb">Ruby</option>
                    <option value="rs">Rust</option>
                    <option value="sas">SAS</option>
                    <option value="scss">SCSS</option>
                    <option value="sql">SQL</option>
                    <option value="stp">STEP Part 21</option>
                    <option value="scala">Scala</option>
                    <option value="scheme">Scheme</option>
                    <option value="sci">Scilab</option>
                    <option value="shell">Shell</option>
                    <option value="smali">Smali</option>
                    <option value="st">Smalltalk</option>
                    <option value="ml">SML</option>
                    <option value="stan">Stan</option>
                    <option value="stata">Stata</option>
                    <option value="styl">Stylus</option>
                    <option value="subunit">SubUnit</option>
                    <option value="swift">Swift</option>
                    <option value="tk">Tcl</option>
                    <option value="tf">Terraform</option>
                    <option value="tap">Test Anything Protocol</option>
                    <option value="thrift">Thrift</option>
                    <option value="tp">TP</option>
                    <option value="twig">Twig</option>
                    <option value="ts">TypeScript</option>
                    <option value="vb">VB.NET</option>
                    <option value="vbs">VBScript</option>
                    <option value="vhdl">VHDL</option>
                    <option value="vala">Vala</option>
                    <option value="v">Verilog</option>
                    <option value="vim">Vim script</option>
                    <option value="x++">X++</option>
                    <option value="x86asm">x86 Assembly</option>
                    <option value="xl">XL</option>
                    <option value="xq">XQuery</option>
                    <option value="yml">YAML</option>
                    <option value="zs">ZenScript</option>
                    <option value="zep">Zephir</option>
                </select>
            </div>
            <button onclick="submitForm()" id="button" class="button button-primary button-full">Codebin</button>
        </form>
    </div>

    <div class="container">
        <div class="form form-container">
            <table id="table" class="table">
                <thead>
                    <tr>
                        <th>URL</th>
                        <th>Type</th>
                        <th>Clicks</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    <script>
        const form = document.getElementById("form");

        form.addEventListener("submit", (event) => {
            event.preventDefault();
        });

        async function submitForm() {
            const content = document.getElementById("content").value;
            const type = document.getElementById("type").value;

            const response = await (await fetch("/codebin/create", {
                method: 'POST',
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({ content, type })
            })).json();

            if (!response.success) {
                alert(response.message ? response.message : "An error has occurred");
                return window.location.reload();
            }

            const codebin = `${location.origin}/codebin/${response.data.id}`;

            navigator.clipboard.writeText(codebin);

            alert(codebin);
        }

        async function listShorten() {
            const table = document.getElementById("table");
            const tbody = table.querySelector("tbody");

            const response = await (await fetch("/codebin/get")).json();

            const list = response.data;
            if (!list?.length) return;

            const propertyOrder = ['._id', '.type', '.count'];

            console.log(list)

            list.forEach(item => {
                const row = tbody.insertRow(-1);

                propertyOrder.forEach(order => {
                    const prop = order.slice(1);
                    const cell = row.insertCell(-1);

                    if (order === '._id') {
                        const link = document.createElement('a');

                        link.href = `${location.origin}/codebin/${item[prop]}`;
                        link.textContent = item[prop];

                        cell.appendChild(link);
                    } else cell.innerHTML = item[prop] || '';
                });
            });
        }

        listShorten();
    </script>

</body>
</html>