{% extends 'extends/offcanvas.html' %}
{% load i18n %}
{% load crispy_forms_tags %}

{% block title %}{% translate 'Transaction Rule' %}{% endblock %}

{% block body %}
  <div hx-get="{% url 'transaction_rule_view' transaction_rule_id=transaction_rule.id %}"
       hx-trigger="updated from:window" hx-target="closest .offcanvas" class="show-loading">
    <div class="tw:text-2xl">{{ transaction_rule.name }}</div>
    <div class="tw:text-base tw:text-gray-400">{{ transaction_rule.description }}</div>
    <hr>
    <div class="my-3">
      <div class="tw:text-xl mb-2">{% translate 'If transaction...' %}</div>
      <div class="card">
        <div class="card-body">
          {{ transaction_rule.trigger }}
        </div>
        <div class="card-footer text-end">
          <a class="text-decoration-none tw:text-gray-400 p-1"
             role="button"
             data-bs-toggle="tooltip"
             data-bs-title="{% translate "Edit" %}"
             hx-get="{% url 'transaction_rule_edit' transaction_rule_id=transaction_rule.id %}"
             hx-target="#generic-offcanvas">
            <i class="fa-solid fa-pencil fa-fw"></i></a>
        </div>
      </div>
    </div>

    <div class="my-3">
      <div class="tw:text-xl mb-2">{% translate 'Then...' %}</div>
      {% for action in all_actions %}
        {% if action.action_type == "edit_transaction" %}
          <div class="card mb-3">
            <div class="card-header">
              <div>
                {% if action.order != 0 %}<span class="badge text-bg-secondary">{{ action.order }}</span>{% endif %}
                <span class="badge text-bg-primary">{% trans 'Edit transaction' %}</span>
              </div>
            </div>
            <div class="card-body">
              <div>
                {% translate 'Set' %} <span
                  class="badge text-bg-secondary">{{ action.get_field_display }}</span> {% translate 'to' %}
              </div>
              <div class="text-bg-secondary rounded-3 mt-3 p-2">{{ action.value }}</div>
            </div>
            <div class="card-footer text-end">
              <a class="text-decoration-none tw:text-gray-400 p-1"
                 role="button"
                 data-bs-toggle="tooltip"
                 data-bs-title="{% translate 'Edit' %}"
                 hx-get="{% url 'transaction_rule_action_edit' transaction_rule_action_id=action.id %}"
                 hx-target="#generic-offcanvas">
                <i class="fa-solid fa-pencil fa-fw"></i>
              </a>
              <a class="text-danger text-decoration-none p-1"
                 role="button"
                 data-bs-toggle="tooltip"
                 data-bs-title="{% translate 'Delete' %}"
                 hx-delete="{% url 'transaction_rule_action_delete' transaction_rule_action_id=action.id %}"
                 hx-trigger='confirmed'
                 data-bypass-on-ctrl="true"
                 data-title="{% translate 'Are you sure?' %}"
                 data-text="{% translate "You won't be able to revert this!" %}"
                 data-confirm-text="{% translate 'Yes, delete it!' %}"
                 _="install prompt_swal">
                <i class="fa-solid fa-trash fa-fw"></i>
              </a>
            </div>
          </div>
        {% elif action.action_type == "update_or_create_transaction" %}
          <div class="card mb-3">
            <div class="card-header">
              <div>
                {% if action.order != 0 %}<span class="badge text-bg-secondary">{{ action.order }}</span>{% endif %}
                <span class="badge text-bg-primary">{% trans 'Update or create transaction' %}</span>
              </div>
            </div>
            <div class="card-body">
              <div>{% trans 'Edit to view' %}</div>
            </div>
            <div class="card-footer text-end">
              <a class="text-decoration-none tw:text-gray-400 p-1"
                 role="button"
                 data-bs-toggle="tooltip"
                 data-bs-title="{% translate 'Edit' %}"
                 hx-get="{% url 'update_or_create_transaction_rule_action_edit' pk=action.id %}"
                 hx-target="#generic-offcanvas">
                <i class="fa-solid fa-pencil fa-fw"></i>
              </a>
              <a class="text-danger text-decoration-none p-1"
                 role="button"
                 data-bs-toggle="tooltip"
                 data-bs-title="{% translate 'Delete' %}"
                 hx-delete="{% url 'update_or_create_transaction_rule_action_delete' pk=action.id %}"
                 hx-trigger='confirmed'
                 data-bypass-on-ctrl="true"
                 data-title="{% translate 'Are you sure?' %}"
                 data-text="{% translate "You won't be able to revert this!" %}"
                 data-confirm-text="{% translate 'Yes, delete it!' %}"
                 _="install prompt_swal">
                <i class="fa-solid fa-trash fa-fw"></i>
              </a>
            </div>
          </div>
        {% endif %}
      {% empty %}
        <div class="card">
          <div class="card-body">
            {% translate 'This rule has no actions' %}
          </div>
        </div>
      {% endfor %}
      <hr>
      <div class="d-grid d-lg-flex gap-2">
        <div class="dropdown flex-fill">
          <button class="btn btn-outline-primary text-decoration-none w-100" type="button" data-bs-toggle="dropdown"
                  aria-expanded="false">
            <i class="fa-solid fa-flask-vial me-2"></i>{% translate 'Test' %}
          </button>
          <ul class="dropdown-menu">
            {% if transaction_rule.on_create %}
              <li><a class="dropdown-item" role="link" href="#"
                     hx-get="{% url 'transaction_rule_dry_run_created' pk=transaction_rule.id %}"
                     hx-target="#generic-offcanvas">{% trans 'Create' %}</a></li>
            {% endif %}
            {% if transaction_rule.on_update %}
              <li><a class="dropdown-item" role="link" href="#"
                     hx-get="{% url 'transaction_rule_dry_run_updated' pk=transaction_rule.id %}"
                     hx-target="#generic-offcanvas">{% trans 'Update' %}</a></li>
            {% endif %}
            {% if transaction_rule.on_delete %}
              <li><a class="dropdown-item" role="link" href="#"
                     hx-get="{% url 'transaction_rule_dry_run_deleted' pk=transaction_rule.id %}"
                     hx-target="#generic-offcanvas">{% trans 'Delete' %}</a></li>
            {% endif %}
          </ul>
        </div>
        <div class="dropdown flex-fill">
          <button class="btn btn-outline-primary text-decoration-none w-100" type="button" data-bs-toggle="dropdown"
                  aria-expanded="false">
            <i class="fa-solid fa-circle-plus me-2"></i>{% translate 'Add new' %}
          </button>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" role="link" href="#"
                   hx-get="{% url 'transaction_rule_action_add' transaction_rule_id=transaction_rule.id %}"
                   hx-target="#generic-offcanvas">{% trans 'Edit Transaction' %}</a></li>
            <li><a class="dropdown-item" role="link" href="#"
                   hx-get="{% url 'update_or_create_transaction_rule_action_add' transaction_rule_id=transaction_rule.id %}"
                   hx-target="#generic-offcanvas">{% trans 'Update or Create Transaction' %}</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
{% endblock %}