{% extends 'base.html' %}
{% load i18n %}

{% block title %}
  {{ page_title }}
{% endblock %}

{% block content %}
  <!-- Delete Modal -->
  <div class="modal fade" id="deleteModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
      <div class="modal-content rounded">
        <div class="modal-body d-flex justify-content-center">
          <h1 class="text-danger me-2"><i class="bi bi-exclamation-diamond-fill"></i></h1>
          <span class="text-danger">{% trans 'Are you sure you want to delete this account?' %}</span>
        </div>
        <div class="btn-group">
          <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">{% trans 'No' %}</button>
          <div class="btn btn-sm btn-danger">
            <form action="{% url 'account_delete' account.pk %}" method="post">
              {% csrf_token %}
              <button type="submit" class="btn btn-sm btn-danger">{% trans 'Yes' %}</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row my-5">
    <div class="card rounded">
      <div class="card-header">
        <p class="mb-0">{{ header_title|upper }}</p>
      </div>
      <div class="card-body">
        <div class="row">
          <div class="col-md-6">
            <p>
              <strong>{{ _('Account Name') }}:</strong> {{ account.name }}
            </p>
            <p>
              <strong>{{ _('Account Code') }}:</strong> {{ account.code }}
            </p>
          </div>
          <div class="col-md-6">
            <p>
              <strong>{{ _('Balance Type') }}:</strong> {{ account.balance_type }}
            </p>
            <p>
              <strong>{{ _('Active') }}:</strong> {{ account.active }}
            </p>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <table class="table is-fullwidth is-narrow is-striped is-bordered django-ledger-table-bottom-margin-75">
              <tr>
                <th class="has-text-centered">{{ _('JE Number') }}</th>
                <th class="has-text-centered">{{ _('Date') }}</th>
                <th class="has-text-centered">{{ _('Debit') }}</th>
                <th class="has-text-centered">{{ _('Credit') }}</th>
                <th class="has-text-centered">{{ _('Description') }}</th>
                <th class="has-text-centered">{{ _('Unit') }}</th>
                <th class="has-text-centered">{{ _('Actions') }}</th>
              </tr>

              {% for tx in account.transactionmodel_set.all %}
                <tr class="has-text-centered">
                  <td>{{ tx.journal_entry.je_number }}</td>
                  <td>{{ tx.journal_entry.timestamp }}</td>
                  <td>
                    {% if tx.tx_type == 'debit' %}
                      ${{ tx.amount }}
                    {% endif %}
                  </td>
                  <td>
                    {% if tx.tx_type == 'credit' %}
                      ${{ tx.amount }}
                    {% endif %}
                  </td>
                  <td>{{ tx.description }}</td>
                  <td>{{ tx.journal_entry.entity_unit.name }}</td>
                  <td>
                    <div class="btn-reveal-trigger position-static">
                      <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs-10"></span></button>
                      <div class="dropdown-menu dropdown-menu-end py-2">
                        <a class="dropdown-item" href="{% url 'payment_details' tx.journal_entry.pk %}">{% trans 'view'|capfirst %}</a>
                      </div>
                    </div>
                  </td>
                </tr>
              {% endfor %}
              <tr class="has-text-weight-bold">
                <td></td>
                <td class="has-text-right">Total</td>
                <td class="has-text-centered">${{ total_debits }}</td>
                <td class="has-text-centered">${{ total_credits }}</td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
            </table>
          </div>
        </div>
      </div>
      <div class="card-footer d-flex">
        <a class="btn btn-sm btn-primary me-1" href="{% url 'account_update' account.pk %}">
          <!-- <i class="bi bi-pencil-square"></i> -->
          {{ _('Edit') }}
        </a>
        <a class="btn btn-sm btn-danger me-1" data-bs-toggle="modal" data-bs-target="#deleteModal">
          <!-- <i class="bi bi-trash-fill"></i> -->
          {{ _('Delete') }}
        </a>
        <a class="btn btn-sm btn-secondary" href="{% url 'account_list' %}">
          <!-- <i class="bi bi-arrow-left-square-fill"></i> -->
          {% trans 'Back to List' %}
        </a>
      </div>
    </div>
  </div>
{% endblock %}