{% load i18n %}
{% if accounts %}
    <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 "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 %}
                    <tr class="hover-actions-trigger btn-reveal-trigger position-static"
                        data-account-id="{{ account.uuid }}">
                        <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' request.dealer.slug url_kwargs.coa_pk account.uuid %}"
                                       class="dropdown-item text-success-dark">{% trans "View Journal Entries" %}</a>

                                </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>
{% else %}
    <div class="alert ">{% trans "No accounts found in this category." %}</div>
{% endif %}