{% extends '_include/base.html.twig' %}

{% block title %}Unit List{% endblock %}

{# Cache role check to avoid repeated is_granted() calls #}
{% set isAdmin = is_granted('ROLE_ADMIN') %}

{% block breadcrumbs %}
    <nav aria-label="Breadcrumb">
        <ul class="breadcrumb__list">
            <li class="breadcrumb__item"><a href="{{ path('dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb__item" aria-current="page">Unit List</li>
        </ul>
    </nav>
{% endblock %}

{% block page_title %}Unit List{% endblock %}

{% block page_actions %}
    {% if isAdmin %}
        <a href="{{ path('app_unit_new') }}" class="btn btn--primary"><i class="fa fa-plus" aria-hidden="true"></i> New Unit</a>
    {% endif %}
{% endblock %}

{% block content %}
    <div class="card">
        <div class="card__body">
            <table id="table" class="data-table table-full">
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>Abbreviation</th>
                        <th>Active</th>
                        {% if isAdmin %}
                            <th>Actions</th>
                        {% endif %}
                    </tr>
                    </thead>
                    <tbody>
                    {% for unit in units %}
                        <tr>
                            <td>{{ unit.name }}</td>
                            <td>{{ unit.abbreviation }}</td>
                            <td>
                                          <a href="#" id="toggle-status" data-id="{{ unit.id }}" data-status="{{ unit.active ? 'active' : 'inactive' }}"
                                              class="status-dot" title="Toggle status" aria-label="Toggle unit status"></a>
                            </td>
                            {% if isAdmin %}
                                <td>
                                    <a class="btn btn--secondary" href="{{ path('app_unit_show', {'id': unit.id}) }}" title="Show" aria-label="View unit">
                                        <i class="fa fa-eye" aria-hidden="true"></i>
                                    </a>
                                    <a class="btn btn--secondary" href="{{ path('app_unit_edit', {'id': unit.id}) }}" title="Edit" aria-label="Edit unit">
                                        <i class="fa fa-edit" aria-hidden="true"></i>
                                    </a>
                                    <a href="#"
                                       class="btn btn--secondary btn--delete"
                                       data-id="{{ unit.id }}"
                                       data-csrf="{{ csrf_token('delete-unit' ~ unit.id) }}"
                                       title="Delete"
                                       aria-label="Delete unit"
                                    >
                                        <i class="fa fa-trash" aria-hidden="true"></i>
                                    </a>
                                </td>
                            {% endif %}
                        </tr>
                    {% else %}
                        <tr>
                            <td colspan="{% if isAdmin %}4{% else %}3{% endif %}">no records found</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <link href="{{ asset('assets/lib/DataTables/datatables.min.css') }}" rel="stylesheet">
    <script src="{{ asset('assets/lib/DataTables/datatables.min.js') }}"></script>

    <script>
        $(document).ready(function () {
            $('#table').DataTable();

            $('.btn--delete').on('click', function (e) {
                e.preventDefault();

                if (!confirm('Are you sure you want to delete this item?')) {
                    return;
                }

                var btn = $(this);
                var id = btn.data('id');
                var csrfToken = btn.data('csrf');

                $.ajax({
                    url: "{{ path('app_unit_delete', {'id': 'ID_PLACEHOLDER'}) }}".replace('ID_PLACEHOLDER', id),
                    method: 'POST',
                    data: {
                        _method: 'DELETE',
                        _token: csrfToken
                    },
                    success: function () {
                        btn.closest('tr').fadeOut(500, function () {
                            $(this).remove();
                        });
                    },
                    error: function () {
                        alert('Error while deleting.');
                    }
                });
            });
        });
    </script>
{% endblock %}