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

{% block title %}Thunder Video Game{% endblock %}

{% block body %}
    <h1>Games</h1>

    <form method="get">
        <div class="clearfix mbot30">
            <p class="float-left">
                <a class="btn btn-outline-info" href="{{ path('admin_game_add') }}">
                    Ajouter
                </a>
            </p>
            <p class="float-right">
                <label>
                    <select class="select2" name="machine" id="filterMachine">
                        <option value="0">Filtrer par machine</option>
                        {% for id, machine in machineList %}
                            <option value="{{ id }}" {{ filters.machine == id ? 'selected' : '' }}>
                                {{ machine }}
                            </option>
                        {% endfor %}
                    </select>
                </label>

                <button class="btn btn-xs btn-outline-primary">
                    filtrer
                </button>
            </p>
        </div>
    </form>
    <table id="game-table" class="data-table">
        <thead>
        <tr>
            <th>Name</th>
            <th>sorties</th>
            <th>licences</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
{% endblock %}

{% block js %}
    <script>
        $(function() {
            $('.select2').select2();

            let dataTableUrl = '/admin/game/list/load';
            let filterMachine = parseInt($('#filterMachine').val());

            if (0 !== filterMachine) {
                dataTableUrl += '?filterMachine='+filterMachine;
            }

            $('#game-table').DataTable({
                pageLength: 50,
                serverSide: true,
                ajax: dataTableUrl,
                columns: [
                    {name: 'name', searchable: true},
                    {name: 'sortie', searchable: false, sortable: false},
                    {name: 'licences', searchable: true, sortable: false}
                ]
            });
        });
    </script>
{% endblock %}