{% extends "base.html" %}
{% block title %} tamako {% endblock %}
{% block head +%}
<script>
    const whisper = async () => {
        let name = document.getElementById("name").value;
        let message = document.getElementById("message").value;
        let private = document.getElementById("private").checked;

        let res = await fetch("/api/whisper", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({
                name,
                message,
                private,
            }),
        });

        if (res.status == 201) {
            notyf.success("whisper sent");
            window.location.reload();
        }
        else if (res.status == 429) {
            notyf.error("too many whispers, slow down");
        }
        else {
            notyf.error(await res.text());
        }
    };

    const copySnowflake = (snowflake) => {
        navigator.clipboard.writeText(snowflake);
        notyf.success("copied whisper id");
    };

    const deleteWhisper = async (snowflake) => {
        if (!localStorage.getItem("token") || !confirm("are you sure you want to delete this whisper?")) {
            return;
        }
        let res = await fetch(`/api/whisper/${snowflake}`, {
            method: "DELETE",
            headers: {
                "token": localStorage.getItem("token"),
            },
        });

        if (res.ok) {
            window.location.reload();
        }
        else {
            notyf.error(await res.text());
        }
    };
</script>
{% endblock %}

{% block body %}
<section id="whisper">
    <h4>whisper</h4>
    <div>
        <input type="text" id="name" placeholder="name (optional)" size="30" maxlength="32" />
    </div>
    <div>
        <input type="text" id="message" placeholder="message" size="30" maxlength="1024" required />
    </div>
    <div>
        <label for="private">
            <input type="checkbox" id="private" />
            private
        </label>
    </div>
    <button onclick="whisper()">send</button>
</section>

<br />
<hr />

<div id="whispers">
    {% if whispers.len() == 0 %}
        <div class="placeholder muted">you've met with a terrible fate, haven't you?</div>
    {% else %}
        <ul>
            {% for whisper in whispers %}
                {% let name = whisper.name.clone().unwrap_or("anon".to_owned()) %}
                {% let message = whisper.message.clone() %}

                {% if whisper.private %}
                    <li class="private">
                {% else %}
                    <li>
                {% endif %}
                        <b class="whisperer">{{name~}}</b>: {{~message~}} <span class="timestamp muted"
                            title="{{whisper.snowflake}}"
                            onclick="copySnowflake('{{whisper.snowflake}}')"
                            oncontextmenu="deleteWhisper('{{whisper.snowflake}}'); return false;">
                            {{whisper.pretty_timestamp()}}
                        </span>
                    </li>
            {% endfor %}
        </ul>
    {% endif %}
</div>
{% endblock %}