{% extends resolvePath(parentTemplate) %}

{% import resolvePath("/lynx/utils")as utils %}
{% import resolvePath('/datagrid/utility')as dgUtils %}

{% block additional_styles %}
    <link href="{{ route('/adminUI/fontawesome/css/all.css') }}" rel="stylesheet">
    <link href="{{ route('/adminUI/assets/css/admin.css') }}" rel="stylesheet">

    <!--load all styles -->
    {% for key, field in fields %}
        {% include resolvePath(configuration[field.type] + '-css') ignore missing %}
    {% endfor %}
{% endblock %}
{% block additional_scripts %}
    {% for key, field in fields %}
        {% include resolvePath(configuration[field.type] + '-js') ignore missing %}
    {% endfor %}

    <script>
        $('#deleteModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var id = button.data('id');
            var name = button.data('name');
            var modal = $(this)
            modal
                .find('.element-name')
                .text(name);
            var url = "{{route(metadata.classParameters.listCustomDeleteAction if metadata.classParameters.listCustomDeleteAction else 'adminUI.delete', { entityName: req.params.entityName, id: ':id' })}}".replace(':id', id);
            url += '?redirect=' + window.location;
            modal
                .find('.delete-form')
                .attr("action", url);
        });

        var currentSelections = [];

        function toggleSelection(id) {
            var index = currentSelections.indexOf(id);
            if (index == -1) {
                currentSelections.push(id);
            } else {
                currentSelections.splice(index, 1);
            }
            updateDeleteAllBtnVisibility();
        }

        function toggleAllSelections() {
            var all = [];
            /*{% for d in gridData.data %}
                all.push('{{d.getId()}}');
            {% endfor %} @todo uncomment*/

            var selected = true;
            if (currentSelections.length != all.length) {
                currentSelections = all;
            } else {
                currentSelections = [];
                var selected = false;
            }

            for (var i = 0; i < all.length; i++) {
                $("#delete-checkbox-" + all[i]).prop("checked", selected);
            }

            updateDeleteAllBtnVisibility();
        }

        function showDeleteAllBtn() {
            $("#deleteAllBtn").show();
        }

        function hideDeleteAllBtn() {
            $("#deleteAllBtn").hide();
        }

        function updateDeleteAllBtnVisibility() {
            if (currentSelections.length > 0) {
                showDeleteAllBtn();
            } else {
                hideDeleteAllBtn();
            }
        }

        $('#deleteAllModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var id = JSON.stringify(currentSelections);
            var name = button.data('name');
            var modal = $(this)
            modal
                .find('.element-name')
                .text(name);
            var url = "{{route('adminUI.delete_multiple', { entityName: req.params.entityName, ids: ':id' })}}".replace(':id', id);
            url += '&redirect=' + window.location;
            modal
                .find('.delete-form')
                .attr("action", url);
        });
    </script>
{% endblock %}

{% block body %}
    {% set filtersCount = 0 %}
    {% for key, field in fields %}
        {% if field.searchable %}
            {% set filtersCount = filtersCount + 1 %}
        {% endif %}
    {% endfor %}
    {% if hasSmartSearchable %}
        {% set filtersCount = filtersCount + 1 %}
    {% endif %}
    <div class="card">
        <div class="card-body">
            <div class="table-header mb-3">
                {{ utils.alert(flash) }}
                <div id="filterBy"></div>

                <div class="d-flex align-items-center justify-content-between">
                    <span class="entity-title mb-0">
                        {{ metadata.name | tr }}
                    </span>

                    <div class="d-flex align-items-start">
                        {% if filtersCount > 0 %}
                            <div style="position: relative">
                                <button class="btn btn-light btn-search mb-2" type="button" data-toggle="modal" data-target="#filtersModal" aria-expanded="false" aria-controls="filtersModal">
                                    <i class="fas fa-search"></i>
                                    {{ 'admin-ui.filter-title' | tr }}
                                </button>
                                {% if req.__admin_ui_filterCounter > 0 %}
                                    <div class="ui-active-filters">{{req.__admin_ui_filterCounter}}</div>
                                {% endif %}
                            </div>
                        {% endif %}
                        {% if not metadata.classParameters.disableCreation and AUIcanWrite(req, req.params.entityName) %}
                            <a href="{{ route('adminUI.details', {entityName: req.params.entityName, id: 0}) }}" class="btn btn-primary btn-create btn-create-{{req.params.entityName}} ml-3">
                                <i class="fas fa-plus"></i>
                                {{ 'admin-ui.create' | tr }}
                            </a>
                        {% endif %}
                        {% if metadata.classParameters.listAdditionalActionTemplate %}
                            {% include resolvePath(metadata.classParameters.listAdditionalActionTemplate) %}
                        {% endif %}

                    </div>
                </div>
            </div>

            <table class="table table-sm table-striped table-{{req.params.entityName}}">
                <thead>
                    <tr>
                        {% if metadata.classParameters.batchDelete and AUIcanWrite(req, req.params.entityName) %}
                            <th class="header-delete-checkbox">
                                <input type="checkbox" onclick="toggleAllSelections()"/>
                            </th>
                        {% endif %}
                        {% for key, field in fields %}
                            {% if field.onSummary %}
                                <th class="header-{{field.name}}">
                                    {{ dgUtils.orderableHeader(field.name | tr, key, gridData) }}
                                </th>
                            {% endif %}
                        {% endfor %}
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {% for d in gridData.data %}
                        <tr>
                            {% if metadata.classParameters.batchDelete and AUIcanWrite(req, req.params.entityName) %}
                                <th class="cell-delete-checkbox">
                                    <input type="checkbox" onclick="toggleSelection('{{d.getId()}}')" id="delete-checkbox-{{d.getId()}}"/>
                                </th>
                            {% endif %}
                            {% for key, field in fields %}
                                {% if field.onSummary %}
                                    {% if field.uiSettings and field.uiSettings.listTemplate %}
                                        {% set value = d[key] %}
                                        <td class="cell-{{field.name}}">{% include resolvePath(field.uiSettings.listTemplate) %}
                                        </td>
                                    {% elif field.uiSettings and field.uiSettings.listFilter %}
                                        <td class="cell-{{field.name}}">{{ d[key] | _adminUIMasterFilter_(field.uiSettings.listFilter) | safe }}</td>
                                    {% else %}
                                        <td class="cell-{{field.name}}">{{d[key]}}</td>
                                    {% endif %}
                                {% endif %}
                            {% endfor %}
                            <td class="text-right">
                                {% if metadata.classParameters.listActionTemplate %}
                                    {% include resolvePath(metadata.classParameters.listActionTemplate) %}
                                {% else %}
                                    <a class="btn btn-primary btn-details btn-details-{{req.params.entityName}}" href="{{route('adminUI.details', {entityName: req.params.entityName, id: d.getId()})}}">{{ 'admin-ui.details' | tr }}</a>
                                    {% if not metadata.classParameters.disableDelete and AUIcanWrite(req, req.params.entityName) %}
                                        <button class="btn btn-danger btn-delete btn-delete-{{req.params.entityName}}" type="button" data-toggle="modal" data-target="#deleteModal" data-name="{{d.getLabel()}}" data-id="{{d.getId()}}">
                                            <i class="far fa-trash-alt"></i>
                                        </button>
                                    {% endif %}

                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% if gridData.length == 0 %}
                {% if metadata.classParameters.uiSettings and metadata.classParameters.uiSettings.noDataTemplate %}
                    {% include resolvePath(metadata.classParameters.uiSettings.noDataTemplate) %}
                {% else %}
                    <div class="w-100 no-data-{{req.params.entityName}}">
                        <h3 class="text-center">
                            {% if metadata.classParameters.uiSettings and metadata.classParameters.uiSettings.noDataString %}
                                {{ metadata.classParameters.uiSettings.noDataString | tr }}
                            {% else %}
                                {{ 'admin-ui.no-data' | tr }}
                            {% endif %}
                        </h3>
                    </div>
                {% endif %}
            {% endif %}

            {% if not metadata.classParameters.disableDelete and AUIcanWrite(req, req.params.entityName) %}
                <div>
                    <button style="display: none;" id="deleteAllBtn" class="btn btn-danger btn-delete" type="button" data-toggle="modal" data-target="#deleteAllModal">{{ 'admin-ui.delete-selected-elements' | tr }}</button>
                </div>
            {% endif %}

            {{ dgUtils.pagination(gridData) }}

        </div>

        <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{ 'admin-ui.delete-element' | tr }}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        {{ 'admin-ui.delete-confirm-single' | tr }}
                        <b>
                            <span class="element-name">ElementName</span>
                        </b>?
                  </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ 'admin-ui.abort' | tr }}</button>
                        <form method="POST" action="" class="delete-form">
                            <input type="submit" class="delete-url btn btn-danger" value="{{ 'admin-ui.delete' | tr }}"/>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="filtersModal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="card card-body">
                        <h4>
                            {{ 'admin-ui.select-filters' | tr }}
                        </h4>
                        <form method="GET" action="{{route('adminUI.list', { entityName: req.params.entityName })}}">
                            <div class="row">
                                {% if hasSmartSearchable %}
                                    <div class="smart-search col-12">
                                        <div class="form-group">
                                            <input class="form-control" 
                                    name="smartSearch" 
                                    value="{{req.query.smartSearch}}"
                                    placeholder="{{ metadata.classParameters.uiSettings.smartSearchableHint | tr if metadata.classParameters.uiSettings }}"
/>
                                        </div>
                                    </div>
                                {% endif %}

                                {% for key, field in fields %}
                                    {% if field.searchable %}
                                        <div class="{{ field.uiSettings.filterClasses if field.uiSettings and field.uiSettings.filterClasses else 'col-12' }} ">
                                            {% include resolvePath(configuration[field.type]) %}
                                        </div>
                                    {% endif %}
                                {% endfor %}

                            </div>
                            <button class="btn btn-primary">{{ 'admin-ui.filter-do' | tr }}</button>
                            <a href="{{route('adminUI.list', { entityName: req.params.entityName })}}" class="btn btn-secondary">{{ 'admin-ui.filter-clean' | tr}}</a>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="deleteAllModal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{ 'admin-ui.delete-elements' | tr }}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        {{ 'admin-ui.delete-confirm-multiple' | tr}}
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ 'admin-ui.abort' | tr }}</button>
                        <form method="POST" action="" class="delete-form">
                            <input type="submit" class="delete-url btn btn-danger" value="{{ 'admin-ui.delete' | tr }}"/>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}