{% macro court(id, status) -%}
<button class= "button is-large is-responsive {% if status %}is-success{% else %}is-danger{% endif %}" 
        hx-post="{{ "/court-toggle/" ~ id}}" 
        hx-swap="outerHTML">{{ id }}</button>
{%- endmacro %}

{% macro player(id, status, name) -%}
<button class="button is-medium is-responsive {% if status %}is-success{% else %}is-danger {% endif %}" 
        hx-post="{{ "/player-toggle/" ~ id}}"
        hx-swap="outerHTML"> {{ name }} </button>
{%- endmacro %}

{% macro guests(count) -%}
<div class="control" id="guests">
    <input class="input is-large is-responsive" type="text" style="text-align:center" value="{{ count }} Guests" disabled>
</div>
{%- endmacro %}

{% macro timer(mins, secs) -%}
<div hx-get="/time" hx-swap="outerHTML" hx-trigger="every 1s">
    <p class="title">Timer: {{mins}}:{{secs}}</p>
</div>
{%- endmacro %}