{% extends 'selector/selector.html.twig' %}

{% block title %}STATUS{% endblock %}
{% block stylesheets_ext %}
    <style>
        .table-fixed tbody {
            height: 740px;
            overflow-y: auto;
            width: 100%;
        }

        .table-fixed thead,
        .table-fixed tbody,
        .table-fixed tr,
        .table-fixed td,
        .table-fixed th {
            display: block;
        }

        .table-fixed tbody td,
        .table-fixed tbody th,
        .table-fixed thead > tr > th {
            float: left;
            position: relative;

            /*&*/
            /*::after {*/
            /*    content: '';*/
            /*    clear: both;*/
            /*    display: block;*/
            /*}*/

        }

    </style>
{% endblock %}
{% block legend %}Current Games Status{% endblock %}
{% block body_content %}
    <p><span class="bg-success" style="padding-left: 2px;padding-right: 2px;"><i class="fas fa-check"></i></span> -
        Реализована и выписана на тест</p>
    <p><span class="bg-warning" style="padding-left: 2px;padding-right: 2px;"><i class="fas fa-check"></i></span> -
        Реализована но не выписана на тест</p>
    <p><span class="bg-primary" style="padding-left: 4px;padding-right: 4px;"><i class="fas fa-times"></i></span> -
        В будущем ожидается реализация</p>
    <p><span class="" style="padding-left: 4px;padding-right: 4px;"><i class="fas fa-minus"></i></span> - Не
        подразумевается (реализация не запланирована)</p>
    <hr>
    <h4>Options</h4>
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <button type="button" class="btn btn-outline-secondary" onclick="showClassic();">Classic</button>
            <button type="button" class="btn btn-outline-secondary" onclick="showModern();">Modern</button>
        </div>
        <input type="text" class="form-control" id="myInput" placeholder="Game name" aria-label="Game name"
               onkeyup="seachNames();" aria-describedby="basic-addon1">
    </div>
    <br>
    <div class="table-responsive">
        <table class="table table-striped table-fixed" id="myTable">
            <thead>
            <tr>
                <th scope="col" class="col-1">#</th>
                <th scope="col" class="col-4">GAME NAME</th>
                <th scope="col" class="col-1 classic">CLASSIC</th>
                <th scope="col" class="col-1 classic">FRUITS</th>
                <th scope="col" class="col-1 classic">JEWEL</th>
                <th scope="col" class="col-1 classic">DRAGON</th>
                <th scope="col" class="col-1 classic">GAUYA</th>
                <th scope="col" class="col-1 classic">SILK</th>
                <th scope="col" class="col-1 classic">NECTAR</th>
                <th scope="col" class="col-1 modern">MODERN</th>
                <th scope="col" class="col-1 modern">FRUITS</th>
                <th scope="col" class="col-1 modern">JEWEL</th>
                <th scope="col" class="col-1 modern">DRAGON</th>
                <th scope="col" class="col-1 modern">GAUYA</th>
                <th scope="col" class="col-1 modern">SILK</th>
                <th scope="col" class="col-1 modern">NECTAR</th>
            </tr>
            </thead>
            <tbody>
            {% for gameDevStat in games %}
                <tr>
                    {% if gameDevStat.isClassic == true %}
                        {% set interfaceVersion = 'classic' %}
                        <th scope='row' class='col-1 {{ interfaceVersion }}'>{{ loop.index }}</th>
                        <td class='col-4 {{ interfaceVersion }}'>{{ gameDevStat.game.name|upper }}</td>
                        <td align="center" class="bg-success col-1 {{ interfaceVersion }}" data-toggle="tooltip"
                            data-placement="top" title="{{ gameDevStat.game.gameVersion|slice(0,8) }}"><i
                                    class="fas fa-check"></i></td>
                        {# <td align="center" class="col-1 {{ interfaceVersion }}"><i class="fas fa-minus"></i></td> #}
                    {% else %}
                        {% set interfaceVersion = 'modern' %}
                        <th scope='row' class='col-1 {{ interfaceVersion }}'>{{ loop.index }}</th>
                        <td class='col-4 {{ interfaceVersion }}'>{{ gameDevStat.game.name|upper }}</td>
                        <td align="center" class="bg-success col-1 {{ interfaceVersion }}" data-toggle="tooltip"
                            data-placement="top"
                            title="{{ gameDevStat.game.gameVersion|slice(8,14) }}">
                            <i
                                    class="fas fa-check"></i></td>
                        {# <td align="center" class="col-1 {{ interfaceVersion }}"><i class="fas fa-minus"></i></td> #}
                    {% endif %}
                    {% if gameDevStat.fruits == 1 %}
                        <td align="center" class="bg-success col-1 {{ interfaceVersion }}" data-toggle="tooltip"
                            data-placement="top" title="{{ gameDevStat.game.gameVersion|slice(0,8) }}"><i
                                    class="fas fa-check"></i></td>
                    {% elseif gameDevStat.fruits == 2 %}
                        <td align="center"
                            class="bg-warning col-1 {{ interfaceVersion }}"><i
                                    class="fas fa-check"></i></td>
                    {% elseif gameDevStat.fruits == 3 %}
                        <td align="center"
                            class="bg-primary col-1 {{ interfaceVersion }}"><i
                                    class="fas fa-times"></i></td>
                    {% else %}
                        <td align="center" class="col-1 {{ interfaceVersion }}"><i
                                    class="fas fa-minus"></i></td>
                    {% endif %}
                    {# ------ #}
                    {% if gameDevStat.jewel == 1 %}
                        <td align="center" class="bg-success col-1 {{ interfaceVersion }}" data-toggle="tooltip"
                            data-placement="top" title="{{ gameDevStat.game.gameVersion|slice(0,8) }}"><i
                                    class="fas fa-check"></i></td>
                    {% elseif gameDevStat.jewel == 2 %}
                        <td align="center"
                            class="bg-warning col-1 {{ interfaceVersion }}"><i
                                    class="fas fa-check"></i></td>
                    {% elseif gameDevStat.jewel == 3 %}
                        <td align="center"
                            class="bg-primary col-1 {{ interfaceVersion }}"><i
                                    class="fas fa-times"></i></td>
                    {% else %}
                        <td align="center" class="col-1 {{ interfaceVersion }}"><i
                                    class="fas fa-minus"></i></td>
                    {% endif %}
                    {# ------ #}
                    {% if gameDevStat.dragon == 1 %}
                        <td align="center" class="bg-success col-1 {{ interfaceVersion }}" data-toggle="tooltip"
                            data-placement="top" title="{{ gameDevStat.game.gameVersion|slice(0,8) }}"><i
                                    class="fas fa-check"></i></td>
                    {% elseif gameDevStat.dragon == 2 %}
                        <td align="center"
                            class="bg-warning col-1 {{ interfaceVersion }}"><i
                                    class="fas fa-check"></i></td>
                    {% elseif gameDevStat.dragon == 3 %}
                        <td align="center"
                            class="bg-primary col-1 {{ interfaceVersion }}"><i
                                    class="fas fa-times"></i></td>
                    {% else %}
                        <td align="center" class="col-1 {{ interfaceVersion }}"><i
                                    class="fas fa-minus"></i></td>
                    {% endif %}
                    {# ------ #}
                    {% if gameDevStat.gauya == 1 %}
                        <td align="center" class="bg-success col-1 {{ interfaceVersion }}" data-toggle="tooltip"
                            data-placement="top" title="{{ gameDevStat.game.gameVersion|slice(0,8) }}"><i
                                    class="fas fa-check"></i></td>
                    {% elseif gameDevStat.gauya == 2 %}
                        <td align="center"
                            class="bg-warning col-1 {{ interfaceVersion }}"><i
                                    class="fas fa-check"></i></td>
                    {% elseif gameDevStat.gauya == 3 %}
                        <td align="center"
                            class="bg-primary col-1 {{ interfaceVersion }}"><i
                                    class="fas fa-times"></i></td>
                    {% else %}
                        <td align="center" class="col-1 {{ interfaceVersion }}"><i
                                    class="fas fa-minus"></i></td>
                    {% endif %}
                    {# ------ #}
                    {% if gameDevStat.silk == 1 %}
                        <td align="center" class="bg-success col-1 {{ interfaceVersion }}" data-toggle="tooltip"
                            data-placement="top" title="{{ gameDevStat.game.gameVersion|slice(0,8) }}"><i
                                    class="fas fa-check"></i></td>
                    {% elseif gameDevStat.silk == 2 %}
                        <td align="center"
                            class="bg-warning col-1 {{ interfaceVersion }}"><i
                                    class="fas fa-check"></i></td>
                    {% elseif gameDevStat.silk == 3 %}
                        <td align="center"
                            class="bg-primary col-1 {{ interfaceVersion }}"><i
                                    class="fas fa-times"></i></td>
                    {% else %}
                        <td align="center" class="col-1 {{ interfaceVersion }}"><i
                                    class="fas fa-minus"></i></td>
                    {% endif %}
                    {# ------ #}
                    {% if gameDevStat.nectar == 1 %}
                        <td align="center" class="bg-success col-1 {{ interfaceVersion }}" data-toggle="tooltip"
                            data-placement="top" title="{{ gameDevStat.game.gameVersion|slice(0,8) }}"><i
                                    class="fas fa-check"></i></td>
                    {% elseif gameDevStat.nectar == 2 %}
                        <td align="center"
                            class="bg-warning col-1 {{ interfaceVersion }}"><i
                                    class="fas fa-check"></i></td>
                    {% elseif gameDevStat.nectar == 3 %}
                        <td align="center"
                            class="bg-primary col-1 {{ interfaceVersion }}"><i
                                    class="fas fa-times"></i></td>
                    {% else %}
                        <td align="center" class="col-1 {{ interfaceVersion }}"><i
                                    class="fas fa-minus"></i></td>
                    {% endif %}
                    {# ------ #}
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
{% endblock %}
        {% block javascripts_ext %}
            <script type="text/javascript">
                function seachNames() {
                    // Declare variables
                    var input, filter, table, tr, td, i, txtValue;
                    input = document.getElementById("myInput");
                    filter = input.value.toUpperCase();
                    table = document.getElementById("myTable");
                    tr = table.getElementsByTagName("tr");

                    // Loop through all table rows, and hide those who don't match the search query
                    for (i = 0; i < tr.length; i++) {
                        td = tr[i].getElementsByTagName("td")[0];
                        if (td) {
                            txtValue = td.textContent || td.innerText;
                            if (txtValue.toUpperCase().indexOf(filter) > -1) {
                                tr[i].style.display = "";
                            } else {
                                tr[i].style.display = "none";
                            }
                        }
                    }
                }

                showModern();

                function showClassic() {
                    var classic = document.getElementsByClassName('classic');
                    var modern = document.getElementsByClassName('modern');
                    for (var i = 0; i < classic.length; i++) {
                        classic[i].style.display = 'block';
                    }
                    for (var i = 0; i < modern.length; i++) {
                        modern[i].style.display = 'none';
                    }
                }

                function showModern() {
                    var classic = document.getElementsByClassName('classic');
                    var modern = document.getElementsByClassName('modern');
                    for (var i = 0; i < classic.length; i++) {
                        classic[i].style.display = 'none';
                    }
                    for (var i = 0; i < modern.length; i++) {
                        modern[i].style.display = 'block';
                    }
                }
            </script>
        {% endblock %}