{% 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">{% 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">{% translate 'Then...' %}</div>
  {% for action in transaction_rule.transaction_actions.all %}
  <div class="card mb-3">
    <div class="card-body">
      <div class="card mb-3">
        <div class="card-header">{% translate 'Set' %}</div>
        <div class="card-body">{{ action.get_field_display }}</div>
      </div>
      <div class="card mb-3">
        <div class="card-header">{% translate 'to' %}</div>
        <div class="card-body">{{ action.value }}</div>
      </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>
  {% empty %}
    <div class="card">
      <div class="card-body">
        {% translate 'This rule has no actions' %}
      </div>
    </div>
  {% endfor %}
  <hr>
  <a class="btn btn-outline-primary text-decoration-none w-100"
     hx-get="{% url 'transaction_rule_action_add' transaction_rule_id=transaction_rule.id %}"
     role="button"
     hx-target="#generic-offcanvas">
      <i class="fa-solid fa-circle-plus me-2"></i>{% translate 'Add new' %}
  </a>
</div>
</div>
{% endblock %}