{% extends "base.html" %}
{% load i18n %}
{% block title %}{% trans "Accounts" %}{% endblock title %}
{% block accounts %}
<a class="nav-link active fw-bold">
    {% trans "Accounts"|capfirst %}
    <span class="visually-hidden">(current)</span>
</a>
{% endblock %}
{% block content %}
<div class="d-flex flex-column min-vh-100">
    <div class="d-flex flex-column flex-sm-grow-1 ms-sm-14 p-4">
        <main class="d-grid gap-4 p-1">
            <!-- Search Bar -->
            <div class="row g-4">
                <div class="col-12">
                    <div class="row-fluid p-2">
                        <form method="get">
                            <div class="input-group input-group-sm">
                                <button class="btn btn-sm btn-secondary rounded-start" type="submit">
                                    {% trans "search" %}
                                </button>
                                <input type="text"
                                       name="q"
                                       class="form-control form-control-sm rounded-end"
                                       value="{{ request.GET.q }}"
                                       placeholder="{% trans 'Search accounts...' %}" />
                                {% if request.GET.q %}
                                <a href="{% url request.resolver_match.view_name %}"
                                   class="btn btn-sm btn-outline-danger ms-1 rounded">
                                    <i class="bi bi-x-lg"></i>
                                </a>
                                {% endif %}
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Customer Table -->

{% if page_obj.object_list %}

                      <div id="accountsTable">
                        <div class="table-responsive">
                          <table class="table table-sm fs-9 mb-0">
                            <thead>

                              <tr class="bg-body-highlight">
                                <th class="border-top border-translucent ps-3">{% trans "Account Name" %}</th>
                                <th class="border-top border-translucent">{% trans "Code" %}</th>
                                <th class="border-top border-translucent text-end pe-3">{% trans "Balance Type" %}</th>
                                <th class="border-top border-translucent text-end pe-3">{% trans "Active" %}</th>
                                  <th class="border-top border-translucent text-end align-middle pe-0 ps-4" scope="col"></th>
                              </tr>

                            </thead>
                            <tbody class="list">
                            {% for account in accounts %}
                                <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">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">

                    {% trans "Delete Account" %}
                     <span data-feather="alert-circle"></span>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center">
                <p class="mb-0 text-danger fw-bold">
                    {% trans "Are you sure you want to delete this Account?" %}
                </p>
                <div class="d-grid gap-2">
                <button type="button" class="btn btn-phoenix-secondary btn-sm" data-bs-dismiss="modal">
                    {% trans "No" %}
                </button>
                <a type="button" class="btn btn-phoenix-danger btn-sm" href="{% url 'account_delete' account.uuid %}">
                    {% trans "Yes" %}
                </a>
                    </div>
            </div>

        </div>
    </div>
</div>
                            <tr>
                                <td class="align-middle ps-3">{{ account.name }}</td>
                                <td class="align-middle">{{ account.code }}</td>
                                <td class="align-middle text-end py-3 pe-3">

                                    {% if account.balance_type == 'debit' %}
                                  <div class="badge badge-phoenix fs-10 badge-phoenix-success"><span class="fw-bold">{{ _("Debit") }}</span><span class="ms-1 fas fa-arrow-circle-down"></span></div>
                                    {% else %}
                                    <div class="badge badge-phoenix fs-10 badge-phoenix-danger"><span class="fw-bold">{{ _("Credit") }}</span><span class="ms-1 fas fa-arrow-circle-up"></span></div>
                                    {% endif %}
                                </td>
                            <td class="align-middle text-end py-3 pe-3">
                            {% if account.active %}
                                <span class="fw-bold text-success fas fa-check-circle"></span>
                            {% else %}
                          <span class="fw-bold text-danger far fa-times-circle"></span>
                            {% endif %}
                                </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 href="{% url 'account_detail' account.uuid %}" class="dropdown-item text-success-dark">
                                       {% trans "View" %}
                                    </a>
                          <div class="dropdown-divider"></div><button class="dropdown-item text-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">{% trans "Delete" %}</button>
                        </div>
                      </div>
                            </td>
                              </tr>

                            {% empty %}
                                    <tr>
                                        <td colspan="5" class="text-center text-muted">
                                            {% trans "No account found." %}
                                        </td>
                                    </tr>
                            {% endfor %}
                            </tbody>
                          </table>
                        </div>

                        <div class="d-flex justify-content-between mt-3"><span class="d-none d-sm-inline-block" data-list-info="data-list-info">{{ page_obj.start_index }} {{ _("to") }} {{ page_obj.end_index }}<span class="text-body-tertiary"> {{ _("Items of")}} </span>{{ page_obj.paginator.count }}</span>
                          <div class="d-flex">

<nav aria-label="Page navigation">
  <ul class="pagination mb-0">
    {% if page_obj.has_previous %}
    <li class="page-item py-0">
      <a class="page-link" href="?page={{ page_obj.previous_page_number }}" aria-label="Previous">
        <span aria-hidden="true"><span class="fas fa-chevron-left"></span></span>
      </a>
    </li>
    {% else %}
    <li class="page-item disabled">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true"><span class="fas fa-chevron-left"></span></span>
      </a>
    </li>
    {% endif %}
    {% for num in page_obj.paginator.page_range %}
    {% if page_obj.number == num %}
    <li class="page-item active"><a class="page-link" href="?page={{ num }}">{{ num }}</a></li>
    {% else %}
    <li class="page-item"><a class="page-link" href="?page={{ num }}">{{ num }}</a></li>
    {% endif %}
    {% endfor %}
    {% if page_obj.has_next %}
    <li class="page-item">
      <a class="page-link" href="?page={{ page_obj.next_page_number }}" aria-label="Next">
        <span aria-hidden="true"><span class="fas fa-chevron-right"></span></span>
      </a>
    </li>
    {% else %}
    <li class="page-item disabled">
      <a class="page-link" href="#" aria-label="Next">
        <span aria-hidden="true"><span class="fas fa-chevron-right"></span></span>
      </a>
    </li>
    {% endif %}
  </ul>
</nav>

                          </div>
                        </div>
                      </div>
        {% endif %}
        </main>
    </div>
</div>
{% endblock %}