{# all the macros here are globals, available in all templates #}


{% macro title(title="") %}
<h2
  class="block pb-4 font-sans text-xl font-bold leading-tight tracking-tight text-neutral-900 md:text-4xl dark:text-white">
  {{- title -}}
  {%- if caller %}{{ caller() }}{% endif -%}
</h2>
{% endmacro %}

{% macro link(label, href, target="#maincontent", swap="innerHTML show:body:top", push_url=true) %}
<a href="{{href}}" hx-get="{{href}}" hx-target="{{target}}" hx-swap="{{swap}}" {% if push_url %}hx-push-url="true" {%-
  endif %}
  class="cursor-pointer px-4 py-2 text-sm font-medium text-neutral-900 bg-white border-t border-b border-neutral-200 hover:bg-neutral-100 hover:text-primary-700 focus:z-10 focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:bg-neutral-700 dark:border-neutral-600 dark:text-white dark:hover:text-white dark:hover:bg-neutral-600 dark:focus:ring-primary-500 dark:focus:text-white">
  {{- label -}}
  {%- if caller %}{{ caller() }}{% endif -%}
</a>
{% endmacro %}

{% macro button(
title,
type="submit",
id="",
name="action",
value="submit",
onclick="",
target="",
swap="",
get="",
select="",
after_request="",
vals="",
full_width=false,
hidden=false,
aria_label=""
) %}
<button type="{{type}}" {%if id %}id="{{id}}" {%endif%}name="{{name}}" value="{{value}}" {% if target
  %}hx-target="{{target}}" {% endif %} {% if swap %}hx-swap="{{swap}}" {% endif %} {% if select %}hx-select="{{select}}"
  {% endif %} {% if get %}hx-get="{{get}}" {% endif %} {% if onclick %}onclick="{{onclick}}" {% endif %}{% if
  after_request %}hx-on::after-request="{{after_request}}" {% endif %} {% if vals %}hx-vals='{{vals|safe}}' {% endif %}
  {% if aria_label %}aria-label="{{aria_label}}" {% endif %}
  class="{% if full_width %}w-full {% endif %}text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
  {% if hidden %}hidden{% endif %}>
  {{- title -}}
</button>
{% endmacro %}

{% macro input(label, name, id, aria_label="", placeholder="", value="", type="text", required=false) %}
<div>
  <label for="{{id}}" class="block mb-2 text-sm font-medium text-neutral-900 dark:text-white">
    {{label}}
  </label>
  <input type="{{type}}" name="{{name}}" id="{{id}}" value="{{value}}" {%if placeholder %}placeholder="{{placeholder}}"
    {%endif%} {%if required%}required="" {%endif%} {% if aria_label %}aria-label="{{aria_label}}" {% endif %} class="bg-neutral-50 border border-neutral-300 text-neutral-900 sm:text-sm rounded-lg focus:ring-primary-600
  focus:border-primary-600 block w-full p-2.5 dark:bg-neutral-700 dark:border-neutral-600 dark:placeholder-neutral-400
  dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500">
</div>
{% endmacro %}

{% macro checkbox(label, name, id, placeholder, checked=false) %}
<div class="flex items-center mb-4">
  <input type="checkbox" name="{{name}}" id="{{id}}" {% if checked %}checked="" {% endif %}
    class="w-4 h-4 text-primary-600 bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-neutral-800 focus:ring-2 dark:bg-neutral-700 dark:border-neutral-600"
    placeholder="{{placeholder}}" {%if required%}required="" {%endif%}>
  <label for="{{id}}" class="block ml-2 text-sm font-medium text-neutral-900 dark:text-white">
    {{label}}
  </label>
</div>
{% endmacro %}

{% macro hidden(name, value) %}
<div>
  <input type="hidden" name="{{name}}" value="{{value}}">
</div>
{% endmacro %}

{% macro form() %}
<form class="space-y-4 md:space-y-6" hx-post="" method="post">
  {{ hidden(get_csrf_token_name(), get_csrf_token()) }}
  {{ caller() }}
</form>
{% endmacro %}
