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

{% block title %}
    {{ parent() }} -  {{ 'object.title'|trans }}
{% endblock %}

{% block description %}
    {{ parent() }} -  {{ 'object.description'|trans }}
{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col">
            <button type="button" class="btn btn-default" onclick="showCreateObjectForm()" data-bs-toggle="modal"
                    data-bs-target="#modalCenter">
                <i class="fas fa-plus"></i> {{ 'nav.object.add'|trans }}</button>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col">
            <table class="table table-bordered table-hover">
                <thead>
                <tr>
                    <th>{{ 'object.name'|trans }}</th>
                    <th>{{ 'object.action'|trans }}</th>
                </tr>
                </thead>
                <tbody>
                {% for object in objects %}
                    <tr>
                        <td>{{ object.name }}</td>
                        <td>
                            <a href="#" title="{{ 'button.details'|trans }}" data-bs-toggle="modal" data-bs-target="#modalCenter">
                                <i onclick="getEntity({{ object.id }})" class="fas fa-info-circle"></i></a>
                            <a href="#" title="{{ 'button.edit'|trans }}" data-bs-toggle="modal" data-bs-target="#modalCenter">
                                <i onclick="editEntry({{ object.id }})" class="fas fa-edit"></i></a>
                            <a href="#" title="{{ 'button.delete'|trans }}">
                                <i onclick="deleteEntry({{ object.id }})" class="fas fa-trash-alt"></i></a>
                        </td>
                    </tr>
                    <tr id="entry-{{ object.id }}" class="d-none">
                        <td colspan="6" id="entry-cell-{{ object.id }}">
                            <img src="{{ app.request.basepath }}/resources/images/ajax-loader.gif"/>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript" src="{{ app.request.basepath }}/resources/js/settings.js"></script>
{% endblock %}
{% block bodyjs %}
    {{ parent() }}
    <script>
        $.ajaxSetup({
            cache: false
        });
        
     $(function() {
        // the default modal width is used here
        $("#modalCenter .modal-dialog").removeClass('modal-lg');
    });

    function getEntity(id) {
        let url = replacePlaceholder("{{ path('objects.get.object', {'id': 'placeholder'}) }}", id);
        getContentForModal(url);
        
    }
    
    function editEntry(id) {
        let url = replacePlaceholder("{{ path('objects.get.object', {'id': 'placeholder'}) }}", id);
        getContentForModal(url, "", function() {
            enableEditForm(id);
        });
        
    }
    
    function saveObject(id) {
        let url = replacePlaceholder("{{ path('objects.edit.object', {'id': 'placeholder'}) }}", id);
        return _doPost('#entry-form-'+id, url);
    }

    function deleteEntry(id) {
        let url = replacePlaceholder("{{ path('objects.delete.object', {'id': 'placeholder'}) }}", id);
        _deleteEntry(id, url);        
    }

    function doDeleteEntry(id) {
        let url = replacePlaceholder("{{ path('objects.delete.object', {'id': 'placeholder'}) }}", id);
        return _doPost('#entry-form-'+id, url);
    }

    function showCreateObjectForm() {
        getContentForModal("{{ path('objects.new.object') }}");
    }

    function createNewObject() {
        let url = "{{ path('objects.create.object')}}";
        _doPost('#entry-form-new', url, '{{ path('objects.overview') }}');
        return false;
    }
    </script>
{% endblock %}