{% extends "layout/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",
                "token": localStorage.getItem("token"),
            },
            body: JSON.stringify({
                name,
                message,
                private,
            }),
        });

        if (res.status == 201) {
            macaron.success("whisper sent! click to reload", {action: () => window.location.reload()});
        }
        else if (res.status == 429) {
            macaron.error("too many whispers, slow down");
        }
        else {
            macaron.error(await res.text());
        }
    };

    const copySnowflake = (snowflake) => {
        navigator.clipboard.writeText(snowflake);
        macaron.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 {
            macaron.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()) %}
    {% if whisper.private %}
        <li class="private">
    {% else %}
        <li>
    {% endif %}
            <span
                class="timestamp muted"
                title="{{whisper.snowflake}}"
                onclick="copySnowflake('{{whisper.snowflake}}')"
                oncontextmenu="deleteWhisper('{{whisper.snowflake}}'); return false;"
            >
                {{whisper.pretty_timestamp()}}
            </span>
            <b class="whisperer">{{name~}}</b>: {{~whisper.message~}}
        </li>
    {% endfor %}
        </ul>
    {% endif %}
</div>
{% endblock %}