{% load trans blocktrans from i18n %}
{% comment "rst" %}
  Remove button
  =============

  Use in a list display to add a remove icon button. The remove icon button is
  responsible for activating a modal on click that will confirm the removal and
  submit the remove form to a view URL.  This removes the need to have a
  separate view just for removal, or a removal hidden in the edit form.

  How this works is each list item would output the ``<div class="ui modal" />``
  element, and when the corresponding remove button is clicked, the correct
  modal element is targetted and is shown to the user.

  Template parameters
  -------------------

  .. describe:: id

      Object id/pk for the modal. This is used to create a unique modal element
      for each list item.

  .. describe:: form_url

      URL for the form post. This should normally be the delete/remove view for
      the model being listed.

  .. describe:: field_name

      Optional form field name for hidden field

  .. describe:: field_value

      Optional form field value for hidden field

  .. describe:: action_text

      Header and button text for modal

  .. describe:: action_name

      Form button name, ie:

      .. code:: html

          <button name="{{ action_name }}" />

  .. describe:: content_text

      Modal content text

  .. describe:: warning_text

     Optional warning text

  .. describe:: is_disabled

      Show the button as disabled

{% endcomment %}

<div class="ui {% if is_disabled %}disabled{% endif %} icon button"
     data-bind="click: $root.show_modal('remove-{{ id }}')"
     data-content="{{ action_text }}">
  <i class="fa-solid fa-trash icon"></i>

  {# Avoid rogue modals leaking this UI if the button is disabled #}
  {% if not is_disabled %}
    {% comment %}
      This placement is important, as ``.ui.buttons`` uses :last-child, so we
      can't place this after the last ``.ui.button``
    {% endcomment %}
    <div class="ui {% if warning_text %}tiny{% else %}mini{% endif %} modal"
         data-modal-id="remove-{{ id }}">
      <div class="header">{{ action_text }}</div>
      <div class="content">
        <p>{{ content_text }}</p>
        {% if warning_text %}
          <div class="ui warning message">{{ warning_text }}</div>
        {% endif %}
      </div>
      <div class="actions">
        <form method="post" action="{{ form_url }}">
          {% csrf_token %}
          {% if field_name and field_value %}
            <input type="hidden" name="{{ field_name }}" value="{{ field_value }}" />
          {% endif %}
          <div class="ui cancel button">{% trans "Cancel" %}</div>
          <input class="ui button negative"
                 type="submit"
                 value="{{ action_text }}"
                 name="{{ action_name }}">
        </form>
      </div>
    </div>
  {% endif %}
</div>