{% 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 %}
    <!--test-->
    <div class="row mt-4">
        <div class="d-flex justify-content-between mb-2">
             <h3 class=""><i class="fa-solid fa-book"></i> {% trans "Accounts" %}</h3>
             <a href="{% url 'account_create' %}" class="btn btn-md btn-phoenix-primary"><i class="fa fa-plus me-2"></i>{% trans 'New Account' %}</a>
        </div>
        {% include "partials/search_box.html" %}

        {% if page_obj.object_list %}
        <div class="table-responsive px-1 scrollbar mt-3">
            <table class="table align-items-center table-flush">
                <thead>
                    <tr class="bg-body-highlight">
                        <th class="sort white-space-nowrap align-middle" scope="col">{% trans "Type" %}</th>
                        <th class="sort white-space-nowrap align-middle" scope="col">{% trans "Account Name" %}</th>
                        <th class="sort white-space-nowrap align-middle" scope="col">{% trans "Code" %}</th>
                        <th class="sort white-space-nowrap align-middle" scope="col">{% trans "Balance Type" %}</th>
                        <th class="sort white-space-nowrap align-middle" scope="col">{% trans "Active" %}</th>
                        <th class="sort white-space-nowrap align-middle" 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 class="hover-actions-trigger btn-reveal-trigger position-static">
                            <td class="align-middle product white-space-nowrap">
                               {{ account.role_bs|upper }}
                            </td>
                            <td class="align-middle product white-space-nowrap">
                                {{ account.name }}
                            </td>
                            <td class="align-middle product white-space-nowrap">
                                {{ account.code }}
                            </td>
                            <td class="align-middle product white-space-nowrap">

                                {% if account.balance_type == 'debit' %}
                                    <div class="badge badge-phoenix fs-10 badge-phoenix-success"><span class="fw-bold"><i class="fa-solid fa-circle-up"></i> {{ _("Debit") }}</span></div>
                                {% else %}
                                    <div class="badge badge-phoenix fs-10 badge-phoenix-danger"><span class="fw-bold"><i class="fa-solid fa-circle-down"></i> {{ _("Credit") }}</span></div>
                                {% endif %}
                            </td>
                            <td class="align-middle product white-space-nowrap">
                                 {% 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 class="align-middle white-space-nowrap text-start">
                                <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="6" class="text-center text-muted">{% trans "No Accounts Found" %}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <div class="d-flex justify-content-end mt-3">
          <div class="d-flex">
              {% if is_paginated %}
                  {% include 'partials/pagination.html' %}
              {% endif %}
          </div>
        </div>
    {% endif %}

    </div>
    <!--test-->

{% endblock %}