{% import "macros/icons.html" as icons %}

{% macro header() %}
<div class="px-5 py-3 border-b border-slate-200">
  <div class="flex justify-between items-center">
    {{ caller() }}
    <button
      type="button"
      class="text-slate-400 hover:text-slate-500"
      _="install CloseModalButton()"
    >
      <div class="sr-only">Close</div>
      {{ icons.x_mark("w-4 h-4 fill-current") }}
    </button>
  </div>
</div>
{% endmacro %}

{% macro title() %}
<h2 class="font-semibold text-slate-800">{{ caller() }}</h2>
{% endmacro %}

{% macro body() %}
<div class="p-5">{{ caller() }}</div>
{% endmacro %}

{% macro footer() %}
<div class="p-5 flex flex-wrap justify-end space-x-2">{{ caller() }}</div>
{% endmacro %}

{% macro delete_modal_core(modal_title, delete_url) %}
<div _="on fief:closeModal go back">
  {% call header() %}
    {% call title() %}{{ modal_title }}{% endcall %}
  {% endcall %}
  {% set body_content = caller() %}
  {% call body() %}
    {{ body_content }}
  {% endcall %}
  {% call footer() %}
    <button type="button" class="btn-sm border-slate-200 hover:border-slate-300 text-slate-600" _="install CloseModalButton()">Cancel</button>
    <button
      type="button"
      class="btn-sm bg-red-500 hover:bg-red-600 text-white"
      hx-delete="{{ delete_url }}"
      hx-target="#modal"
    >
      Delete
    </button>
  {% endcall %}
</div>
{% endmacro %}

{% macro delete_modal(modal_title, notice, delete_url) %}
  {% call delete_modal_core(modal_title, delete_url) %}
    <p class="text-justify">{{ notice }}</p>
  {% endcall %}
{% endmacro %}
