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

{% block title %}Koncová zařízení{% endblock %}

{% block main %}
    <home-row>
        <home-wrap>
            <h4 class="text-center">Koncová zařízení <a href="{{ path('app_endpoint_add') }}"> <i class="fa-solid
            fa-plus
            btn-secondary"></i></a>
                <a href="{{ path('app_ise_refresh', {what: 'endpoints'})
                }}"><i class="fa-solid fa-arrows-rotate"></i></a>
            </h4>
            <div class="accordion" id="groupsAccordion">
                {% for group in groups %}
                <div class="accordion-item">
                    <h5 class="accordion-header" id="heading{{ group.name }}">
                        <button type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{group.name }}"
                                aria-expanded="false" aria-controls="collapse{{ group.name }}"
                                class="accordion-button">
                            {{ group.name|group }}
                        </button>
                    </h5>
                    <div id="collapse{{ group.name }}" class="accordion-collapse collapse show"
                         aria-labelledby="heading{{ group.name }}" data-bs-parent="groupsAccordion">
                        <div class="accordion-body">
                            <div class="d-flex flex-fill justify-content-center align-items-center flex-wrap table-responsive">
                                <table class="table table-hover align-middle text-center">
                                    <thead>
                                    <tr>
                                        <th scope="col">MAC adresa</th>
                                        <th scope="col">Název</th>
                                        <th scope="col">Přístup do internetu</th>
                                        <th scope="col">Upravit</th>
                                        <th scope="col">Smazat</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                         {% for endpoint in group.endpoints %}
                                             <tr>
                                                 <th scope="row">{{ endpoint.mac }}</th>
                                                 <td>{{ endpoint.name }}</td>
                                                 <td><input type="checkbox" {% if endpoint.internetAccess %} checked
                                                             {% endif %}
                                                            disabled></td>
                                                 <td><a type="button" class="btn"
                                                     href="{{ path('app_endpoint_edit', {id: endpoint.id}) }}">
                                                         <i class="fa-solid fa-pen-to-square"></i>
                                                     </a>
                                                 </td>
                                                 <td><a type="button" class="btn"
                                                        href="{{ path('app_endpoint_remove', {id: endpoint.id}) }}">
                                                         <i class="fa-sharp fa-solid fa-trash"></i>
                                                     </a>
                                                 </td>

                                             </tr>
                                         {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}

            </div>


        </home-wrap>
    </home-row>
{% endblock %}