{% extends "_base.html" %}

{% block title %}Redemptions{% endblock %}

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

    .redemption {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 1em;
    }
</style>
{% endblock %}

{% block body %}
<ul class="breadcrumbs">
    <li><a href="/">Home</a></li>
    <li class="current"><a href="/redemptions">Redemptions</a></li>
    <li class="future"><a href="/redemptions/add">Add</a></li>
    <li class="future"><a href="/redemptions/list">List</a></li>
</ul>

{% for redemption in redemptions %}
<div class="redemption">
    <strong>{{ redemption.name }}</strong>
    <em>{{ redemption.twitch_id }}</em>
    <details>
        <summary>Script</summary>
        <pre><code>{{ redemption.rhai }}</code></pre>
    </details>
    <form action="/redemptions/delete" method="post">
        <input type="hidden" name="id" value="{{ redemption.id }}"/>
        <button type="submit">Delete</button>
    </form>
</div>
{% endfor %}
{% endblock %}