{% extends "base" %}

{% block styles %}

html, body {
overflow-y:hidden;
}

body {
height: 100vh;
font-family: monospace;

display: flex;
}

form { flex: 1; }

textarea {
height: 100%;
width: 100%;

background: none;
border: none;

resize: none;
overflow: auto;

color: inherit;
font-family: monospace;
line-height: inherit;
}

button[type="submit"] {
position: absolute;
bottom: 1rem;
right: 1rem;

height: 4rem;
width: 4rem;
border: none;
border-radius: 50%;
background: #F29718;

font-size: 0rem;

cursor: pointer;
}

*:focus {
outline: none;
}

button[type="submit"].hidden { display: none; }
{% endblock styles %}

{% block body %}
<form action="/submit" method="post">
    <textarea name="val" style="resize: none" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);" placeholder="

bin(3)                                BIN                               bin(3)

NAME
       bin - A highly opinionated and minamalistic Pastebin

ROUTES
       GET /<id>
           Get raw pastes
       GET /p/<id> 
           Get highlighted pastes 
       GET /p/<id>.<ext> 
           Get syntax highlighted pastes. 
           E.g. https://bin.wantguns.dev/p/foobaz.cpp should return a C++ syntax
           highlighted paste

WEB USAGE
       Drag a file and drop it here, or
       Paste an image from your clipboard using Ctrl + v, or
       After typing, press the big yellow button to paste, or
       Just press Ctrl + Enter once done typing.

       Tip: Set your browser's monospace font to the one you prefer

CLI USAGE
       curl \
           -Ls -o /dev/null \
           -w %{url_effective} \
           --data-binary @file.txt \
           https://bin.wantguns.dev | tee >(xclip -selection clipboard)

       Better use cases of CLI mentioned at Github

SEE ALSO
       github.com/wantguns/bin

AUTHOR
       Gunwant Jain
" autofocus autocomplete="off" autocorrect="off" autocapitalize="off"
        spellcheck="false"></textarea>

    <button type="submit" title="Paste">&#x2398</button>
</form>

<script>
    const form = document.querySelector('form');
    const input = document.querySelector('textarea');
    const button = document.querySelector('button[type="submit"]');

    const onInput = () => button.classList.toggle('hidden', !input.value);
    input.addEventListener('input', onInput);
    onInput();

    document.body.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' && e.ctrlKey) {
            form.submit();
        }
    });

    async function postData(url = '', data) {
        const response = await fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: data
        });
        return response;
    }

    // drag and drop files
    function dropHandler(ev) {
        ev.preventDefault();

        if (ev.dataTransfer.items) {
            var item = ev.dataTransfer.items[0];
            var blob = item.getAsFile();
            const ext = blob.name.split(".")[1];
            var url = window.location.href;

            postData(url, blob)
                .then(data => {
                    window.location.href = data.url + "." + ext;
                })
                .catch(function (err) {
                    console.info(err + " url: " + url);
                });
        }
    }

    function dragOverHandler(ev) {
        ev.preventDefault();
    }

    // pasting files from the clipboard
    document.onpaste = function(pasteEvent) {
        var item = pasteEvent.clipboardData.items[0];
        var blob = item.getAsFile();

        if (blob !== null && blob !== '') {
            var url = window.location.href;

            postData(url, blob)
                .then(data => {
                    window.location.href = data.url;
                })
                .catch(function (err) {
                    console.info(err + " url: " + url);
                });
        }
    }

</script>
{% endblock body %}