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

{% if nested %}
    <div class="d-flex justify-content-between mb-1">
        {% if field.uiSettings.labelTemplate %}
            {% include resolvePath( field.uiSettings.labelTemplate) %}
        {% else %}
        <label>
            {{ field.name | tr }}
            {% if field.uiSettings.descriptionText %}
                <small id="{{key}}-help" class="{{ field.uiSettings.descriptionTextClasses if field.uiSettings.descriptionTextClasses }} description-label">{{ field.uiSettings.descriptionText | tr }}</small>
            {% endif %}
        </label>
        {% endif %}
        <div>
            {% if req.params.id != 0 and field.readOnly != true and data[key + '__disable_creation'] != true and AUIcanWrite(req, req.params.entityName)%}
                {% if field.uiSettings.actionListTemplate %}
                    {% include resolvePath( field.uiSettings.actionListTemplate) %}
                {% else %}
                    <button type="button" class="btn btn-primary" onclick='openModal{{key}}(0)'>
                        {{ "admin-ui.add" | tr }}
                    </button>
                {% endif %}
            {% endif %}
        </div>
    </div>
    <table class="table table-sm table-striped">
        <thead>
            <tr>
                {% for _key, _field in field.metadata.fields %}
                    {% if _field.onSummary %}
                        <th class="header-{{_key}}">
                            {{dgUtils.orderableHeader(_field.name | tr, _key, data[key])}}
                        </th>
                    {% endif %}
                {% endfor %}
                <th></th>
            </tr>
        </thead>
        <tbody>
            {% for d in data[key].data %}
                <tr>
                    {% for _key, _field in field.metadata.fields %}
                        {% if _field.onSummary %}
                            {% if _field.uiSettings and _field.uiSettings.listTemplate %}
                                {% set value = d[_key] %}
                                <td class="cell-{{_key}}">{% include resolvePath(_field.uiSettings.listTemplate) %}
                                </td>
                            {% elif _field.uiSettings and _field.uiSettings.listFilter %}
                                <td class="cell-{{_key}}">{{ d[_key] | _adminUIMasterFilter_(_field.uiSettings.listFilter) | safe }}</td>
                            {% else %}
                                <td class="cell-{{_key}}">{{d[_key]}}</td>
                            {% endif %}
                        {% endif %}
                    {% endfor %}
                    <td class="text-right">
                        {% if field.uiSettings.actionListTemplate %}
                            {% include resolvePath( field.uiSettings.actionListTemplate) %}
                        {% else %}
                            <button type="button" class="btn btn-primary btn-details" onclick='openModal{{key}}({{d.getId()}})'>{{ 'admin-ui.details' | tr }}</button>
                            {% if field.readOnly != true and AUIcanWrite(req, req.params.entityName) %}
                                <form method="POST" class="nested-form" action="{{ route('adminUI.nested', {entityName: req.params.entityName, id: req.params.id, nestedKey: key, remove: d.getId() }) }}">
                                    <button class="btn btn-danger btn-delete">
                                        <i class="far fa-trash-alt"></i>
                                    </button>
                                </form>
                            {% endif %}
                        {% endif %}

                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
    {% if data[key].length == 0 %}
        {% if field.uiSettings and field.uiSettings.noDataTemplate %}
                {% include resolvePath(field.uiSettings.noDataTemplate) %}
            {% else %}
            <div class="w-100 no-data-table-{{field.selfType}}">
                <h5 class="text-center">
                    {% if field.uiSettings and field.uiSettings.noDataString %}
                        {{ field.uiSettings.noDataString | tr }}
                    {% else %}
                        {{ 'admin-ui.no-data' | tr }}
                    {% endif %}
                </h5>
            </div>
            {% endif %}
    {% endif %}
    {{ dgUtils.pagination(data[key]) }}
    <script>
        function openModal{{key}}(id) {
            var src = "{{ route('adminUI.details', {entityName: field.selfType, id: ''}) }}";
            var index = src.lastIndexOf('/');
            src = src.substring(0, index);
            src += '/' + id + '?popup=true&frameKey={{key}}';
            {% if field.inverseSide %}
                if (id == 0) {
                    var dv = {
                        {{field.inverseSide}}: "{{req.params.id}}"
                    };
                    src += '&defaultValues=' + JSON.stringify(dv);
                }
            {% endif %}
            console.log('src:', src);
            openPopup("#modalEdit{{key}}", "#modalEditFrame{{key}}", src);
            //$("#modalEditFrame{{key}}").attr('src', src);
            //$("#modalEdit{{key}}").modal();
        }
    </script>
{% else %}
    <iframe id="nested-frame-{{key}}" class="nested-frame" onLoad="var self = this; setTimeout(function() { calculateFrameHeight(self); }, 200)" src="{{ route('adminUI.nested', {entityName: req.params.entityName, id: req.params.id, nestedKey: key }) }}"></iframe>
    <div class="modal fade" id="modalEdit{{key}}" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modifica {{field.name | 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 nested-frame">
                    <iframe class="nested-frame nested-frame-modal" id="modalEditFrame{{key}}" onLoad=" var self = this; setTimeout(function() { calculateFrameHeightForPopup(self); }, 200)"  src=""></iframe>
                </div>
            </div>
        </div>
    </div>
    <script>
        window.addEventListener('AdminUI.TAB_CHANGED', function (e) {
            {% if field.uiSettings and field.uiSettings.tab %}
                if (e.detail == '{{field.uiSettings.tab}}') {
                    setTimeout(() => {
                        calculateFrameHeight(document.getElementById("nested-frame-{{key}}"));
                    }, 200)
                    setTimeout(() => {
                        calculateFrameHeightForPopup(document.getElementById("modalEditFrame{{key}}"));
                    }, 200)
                }
            {% endif %}
        }, false);  
    </script>
{% endif %}