{% extends "_base.html" %}

{% block title %}Commands{% endblock %}

{% block head %}
<style>
    body {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .command {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 1em;
        max-width: 100%;
    }

    pre {
        white-space: pre-wrap;
        word-wrap: break-word;
    }
</style>
{% endblock %}

{% block body %}
<ul class="breadcrumbs">
    <li><a href="/">Home</a></li>
    <li class="current"><a href="/commands">Commands</a></li>
    <li class="future"><a href="/commands/add">Add</a></li>
</ul>

{% for command in commands %}
<div class="command">
    <strong>{{ command.name }}</strong>
    {% if !command.aliases.is_empty() %}
    <em>{{ command.aliases.join(", ") }}</em>
    {% endif %}
    <div>
        <span>
        {%- match command.cooldowns.user -%}
            {%- when Some with (c) -%}
                Cooldown: {{ c.seconds_f64() }}s
            {%- else -%}
        {%- endmatch -%}
        </span>
        <span>
        {%- match command.cooldowns.global -%}
            {%- when Some with (c) -%}
                GCD: {{ c.seconds_f64() }}s
            {%- else -%}
        {%- endmatch -%}
        </span>
    </div>
    <details>
        <summary>Script</summary>
        <pre><code>
            {%- match command.executor -%}
                {%- when CommandExecutor::Text with (t) -%}
                    {{ t }}
                {%- when CommandExecutor::Rhai with (t) -%}
                    {{ t }}
            {%- endmatch -%}
        </code></pre>
    </details>
    <a href="/commands/edit/{{ command.id.to_simple() }}">Edit</a>
    <form action="/commands/delete" method="post">
        <input type="hidden" name="id" value="{{ command.id }}"/>
        <button type="submit">Delete</button>
    </form>
</div>
{% endfor %}
{% endblock %}