{% match quest %}
{% when Some with (q) %}

{% let viz %}
{% let np %}
{% if q.public -%}
{% let viz = "public" %}
{% let np = "private" %}
{% else %}
{% let viz = "private" %}
{% let np = "public" %}
{%- endif %}

{% let status %}
{% if q.watched -%}
{% let status = "watched" %}
{% else %}
{% let status = "want to watch" %}
{% endif %}

<table>
    <tbody>
        <tr>
            <td>{{- status -}}</td>
            <td>{{- viz -}}</td>
        </tr>
        <tr>
            <td>
                <form id="edit-quest-{{self.watch}}">
                    {% if q.watched %}
                    <button hx-post="/quest/edit" hx-target="#add-watch-{{self.watch}}" hx-trigger="click"
                        hx-swap="outerHTML">remove</button>
                    <input type="hidden" name="watch" value="{{self.watch}}">
                    <input type="hidden" name="act" value="remove">
                    {% else %}
                    <button hx-post="/quest/edit" hx-target="#add-watch-{{self.watch}}" hx-trigger="click"
                        hx-swap="outerHTML">mark watched</button>
                    <input type="hidden" name="watch" value="{{self.watch}}">
                    <input type="hidden" name="act" value="watched">
                    {% endif %}
                </form>
            </td>
            <td>
                <form id="edit-visibility-{{self.watch}}">
                    <button hx-post="/quest/edit" hx-target="#add-watch-{{self.watch}}" hx-trigger="click"
                        hx-swap="outerHTML">mark as {{ np }}</button>
                    <input type="hidden" name="watch" value="{{self.watch}}">
                    <input type="hidden" name="act" value="viz">
                </form>
            </td>
        </tr>
    </tbody>
</table>

{% when None %}

<form id="add-watch-{{self.watch}}">
    <button hx-post="/quest/add" hx-target="#add-watch-{{self.watch}}" hx-trigger="click"
        hx-swap="outerHTML">add</button>
    <select name="public" id="add-public-watch">
        <option value="true">public</option>
        <option value="false">private</option>
    </select>
    <input type="hidden" name="watch" value="{{self.watch}}">
</form>

{% endmatch %}