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

{% block title %}
    {{ parent() }} -  Benutzerverwaltung
{% endblock %}

{% block description %}
    {{ parent() }} -  Userverwaltung
{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col">
            <button type="button" class="btn btn-default" onclick="showCreateUserForm()" data-bs-toggle="modal"
                    data-bs-target="#modalCenter">
                <i class="fas fa-plus"></i> {{ 'nav.user.add'|trans }}</button>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col">
            <table class="table table-bordered table-hover">
                <thead>
                <tr>
                    <th>{{ 'user.username'|trans }}</th>
                    <th>{{ 'user.firstname'|trans }}</th>
                    <th>{{ 'user.lastname'|trans }}</th>
                    <th>{{ 'user.action'|trans }}</th>
                </tr>
                </thead>
                <tbody>
                {% for user in users %}
                    <tr>
                        <td>{{ user.username }}</td>
                        <td>{{ user.firstname }}</td>
                        <td>{{ user.lastname }}</td>
                        <td>
                            <a href="#" title="{{ 'button.details'|trans }}" data-bs-toggle="modal" data-bs-target="#modalCenter">
                                <i onclick="getEntry({{ user.id }})" class="fas fa-info-circle"></i></a>
                            <a href="#" title="{{ 'button.edit'|trans }}">
                                <i onclick="editEntry({{ user.id }})" class="fas fa-edit" data-bs-toggle="modal" data-bs-target="#modalCenter"></i></a>
                            <a href="#" title="{{ 'button.delete'|trans }}">
                                <i onclick="deleteEntry({{ user.id }})" class="fas fa-trash-alt"></i></a>
                        </td>
                    </tr>
                    <tr id="entry-{{ user.id }}" class="d-none">
                        <td colspan="6" id="entry-cell-{{ user.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>
    $(function() {
        $.ajaxSetup({
            cache: false
        });
        
        // the default modal width is used here
        $("#modalCenter .modal-dialog").removeClass('modal-lg');
    }); 

    function showCreateUserForm() {
        getContentForModal("{{ path('users.new.user') }}");
    }
    
    function getEntry(id) {
        let url = replacePlaceholder("{{ path('users.edit.user', {'id': 'placeholder'}) }}", id);
        getContentForModal(url);        
    }
    
    function editEntry(id) {
        let url = replacePlaceholder("{{ path('users.edit.user', {'id': 'placeholder'}) }}", id);
        getContentForModal(url, "", function() {
            enableEditForm(id);
        });        
    }

    function saveUser(id) {
        let url = replacePlaceholder("{{ path('users.edit.user', {'id': 'placeholder'}) }}", id);
        return _doPost('#entry-form-'+id, url);
    }

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

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

    function createNewUser() {
        let url = "{{ path('users.new.user')}}";
        return _doPost('#entry-form-new', url, '{{ path('users.overview') }}');
    }
    </script>
{% endblock %}