{% extends "base.html" %}

{% block styles %}
    form { flex: 1; }

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

        background: none;
        border: none;
        outline: 0;
        padding: 0;

        resize: none;
        overflow: auto;

        color: inherit;
        font-family: inherit;
        font-size: 1rem;
        line-height: inherit;
    }

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

        height: 3rem;
        width: 3rem;
        border: none;
        border-radius: 50%;
        background: #2196F3;

        color: white;
        font-size: 2rem;

        cursor: pointer;
    }

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

{% block content %}
    <form action="/" method="post">
        <textarea name="val" placeholder="bin something" autofocus autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>

        <button type="submit" title="&#x2318;+&#x23ce;">&#x270e;</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.metaKey || e.ctrlKey || e.altKey)) {
                form.submit();
            }
        });
    </script>
{% endblock content %}