{% if competition.games|length == 0 %}
    <div class="trivial trivial-empty-message col-xs-12">
        <h2>Aún no se ha creado ningún juego</h2>
    </div>
{% else %}
    {% for trinder in competition.games %}
        <div {% if trinder.type=="TRIVIAL" %} class="trivial" {% elseif trinder.type=="TRINDER" %}  class="trinder"  {% elseif trinder.type=="TINDER" %}  class="tinder" {% else %}  class="trivial" {% endif %}  >
            {% set cont = 0 %}
            {% set playsUser = 0 %}
            {% set contvidas = 0 %}
            {% set completed = 0 %}
            {% set noinit = 0 %}
            {% set inprogress = 0 %}
            <div id="trivial-name" class="trivial-name-xs col-xs-12">
                {{trinder.name}}
            </div>
            <div class="trivial-description-xs col-xs-12">{{trinder.description}}</div>
            <div class="trivial-sm-image trivial-xs-1">
                <img src="{{ asset('images/trivials/'~trinder.image) }}" width="100%" height="auto">
                <div class="trivial-description">{{trinder.description}}</div>
            </div>
            <div class="trivial-md-2 trivial-data trivial-xs-1">
                <div class="col-md-11 trivial-name">{{trinder.name}}</div>

                {# Logica trivial completado, en progreso, no iniciado #}

                {% for user in trinder.competition.users %}
                    {% set finished_attempt = 0 %}
                    {% set started_attempt = 0 %}
                    {% for attempt in trinder.attempt %}
                        {% set wrong_answer = 0 %}
                        {% if attempt.game.id == trinder.id and attempt.user.id == user.id %}
                            {% for tracking in attempt.tracking %}
                                {% if tracking.status == 0 %}
                                    {% set wrong_answer = wrong_answer + 1 %}
                                {% endif %}
                            {% endfor %}
                            {% if attempt.tracking|length > 0 and ((wrong_answer < trinder.life and trinder.life != 0) or (trinder.life == 0)) %}
                                {% set finished_attempt = finished_attempt + 1 %}
                                {% if user.id == app.user.id %}
                                    {% set playsUser = playsUser + 1 %}
                                {% endif %}
                            {% elseif attempt.tracking|length > 0  %}
                                {% set started_attempt =  1 %}
                            {% endif %}
                        {% endif %}
                    {% endfor %}

                    {% if started_attempt != 0 %}
                        {% set completed = completed + 1 %}
                    {% else %}
                        {% set noinit = noinit + 1 %}
                    {% endif %}

                {% endfor %}
                {# END logica trivial #}
                <div class="col-lg-5 trivial-info col-sm-6 col-xs-12">
                    <table>
                        <tr class="trivial-info-white">
                            <td class="trivial-info-title">{% trans %}Lives{% endtrans %}:</td>
                            <td class="trivial-info-number">{% if trinder.life == 0 %}&infin;{% else %}{{trinder.life}}{% endif %}</td>
                        </tr>
                        <tr>
                            <td class="trivial-info-title">{% trans %}Time{% endtrans %}:</td>
                            <td class="trivial-info-number">{% if trinder.time == 0 %}&infin;{% else %}{{trinder.time}}{% endif %}</td>
                        </tr>
                        <tr class="trivial-info-white">
                            <td class="trivial-info-title">{% trans %}Categories{% endtrans %}:</td>
                            <td class="trivial-info-number">{{trinder.category|length}}</td>
                        </tr>
                    </table>
                </div>

                <div class="trivial-players col-lg-offset-1 col-xs-6">
                    <table class="trivial-players-table">
                        <tr>
                            <td class="trivial-players-title">{% trans %}Players{% endtrans %}</td>
                            <td>
                        </tr>
                        <tr>
                            <td class="trivial-players-status trivial-players-total">Total</td>
                            <td class="trivial-players-number">{{trinder.competition.users|length}}</td>
                        </tr>
                        <tr>
                            <td class="trivial-players-status  trivial-players-completed">{% trans %}Completed{% endtrans %}</td>
                            <td class="trivial-players-number">{{completed}}</td>
                        </tr>
                        <tr>
                            <td class="trivial-players-status  trivial-players-noinit">{% trans %}Not started{% endtrans %}</td>
                            <td class="trivial-players-number">{{noinit}}</td>
                        </tr>
                        <tr>
                            <td class="trivial-players-status trivial-players-inprogress">{% trans %}In progress{% endtrans %}</td>
                            <td class="trivial-players-number">{{inprogress}}</td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="trivial-players-mobile trivial-xs-1">
                <table class="trivial-players-table">
                    <tr>
                        <td class="trivial-players-title">{% trans %}Players{% endtrans %}</td>
                        <td>
                    </tr>
                    <tr>
                        <td class="trivial-players-status trivial-players-total">Total</td>
                        <td class="trivial-players-number">{{trinder.competition.users|length}}</td>
                    </tr>
                    <tr>
                        <td class="trivial-players-status  trivial-players-completed">{% trans %}Completed{% endtrans %}</td>
                        <td class="trivial-players-number">{{completed}}</td>
                    </tr>
                    <tr>
                        <td class="trivial-players-status  trivial-players-noinit">{% trans %}Not started{% endtrans %}</td>
                        <td class="trivial-players-number">{{noinit}}</td>
                    </tr>
                    <tr>
                        <td class="trivial-players-status trivial-players-inprogress">{% trans %}In progress{% endtrans %}</td>
                        <td class="trivial-players-number">{{inprogress}}</td>
                    </tr>
                </table>
            </div>
            <div class="trivial-md-1 trivial-xs-1 trivial-chart-div">
                <div id="trivial-chart-{{trinder.id}}" class=" trivial-chart" data-completed="{{completed}}" data-noinit="{{noinit}}" data-inprogress="{{inprogress}}"></div>
            </div>
            <div id="actions-{{trinder.id}}"
                    {% if app.user.role == "ROLE_TUTOR" %}
                        class="trivial-md-1 trivial-actions trivial-actions-tutor trivial-xs-1"
                    {% else %}
                        class="trivial-md-1 trivial-actions col-sm-12"
                    {% endif %}
            >
                <table class="trivial-actions-table" data-trivial="{{trinder.id}}">
                    {% if app.user.role != "ROLE_USER" %}
                        <tr
                                {% if cont == 1 %}
                                    class="trivial-actions-disabled"
                                {% else  %}
                                    id="play-game" class="trivial-actions-enabled" data-toggle="modal" data-target="#modalGame" data-href="#" data-id-trivial="{{trinder.id}}" data-tokenSession="{{app.session.get('tokenSession')}}"
                                {% endif %}
                        >
                            <a href="#">
                                <td class="trivial-actions-img">
                                    <img src="{{asset('img/trivial-jugar.png')}}">
                                </td>
                                <td class="trivial-actions-table-action">{% trans %}Play{% endtrans %}</td>
                            </a>
                        </tr>
                    {% endif %}
                    <tr
                            {% if trinder.competition.beginAt|date("Y-m-d") > "now"|date("Y-m-d") or app.user.role == 'ROLE_ADMIN' %}
                                class="trivial-actions-enabled"  data-href="trinder_edit"
                            {% else %}
                                class="trivial-actions-disabled" title="No se puede editar el tivial porque la campaña ya ha iniciado" data-toggle="tooltip"
                            {% endif %}
                            title="Editar {{trinder.name}}">
                        <td class="trivial-actions-img"><img src="{{asset('img/trivial-editar.png')}}"></td>
                        <td class="trivial-actions-table-action">{% trans %}Edit{% endtrans %}</td>
                    </tr>
                    <tr title="Categorías/Preguntas {{trinder.name}}"
                            {% if app.user.role == 'ROLE_ADMIN' or app.user.role == 'ROLE_TUTOR' %}
                                class="trivial-actions-enabled" data-href="category_list"
                            {% else %}
                                class="trivial-actions-disabled"
                            {% endif %}

                    >
                        <td class="trivial-actions-img"><img src="{{asset('img/trivial-categorias.png')}}"></td>
                        <td class="trivial-actions-table-action">{% trans %}Categories{% endtrans %}</td>
                    </tr>
                    <tr class="trivial-actions-enabled" data-href="record_list" title="Ránking {{trinder.name}}">
                        <td class="trivial-actions-img"><img src="{{asset('img/trivial-registro.png')}}"></td>
                        <td class="trivial-actions-table-action">{% trans %}Ranking{% endtrans %}</td>
                    </tr>
                    <tr class="trivial-actions-enabled" data-href="badge_list" title="Medallas {{trinder.name}}">
                        <td class="trivial-actions-img"><img src="{{asset('img/trivial-medallas.png')}}"></td>
                        <td class="trivial-actions-table-action">{% trans %}Badges{% endtrans %}</td>
                    </tr>
                    <tr
                            {% if trinder.competition.beginAt|date("Y-m-d") > "now"|date("Y-m-d") or app.user.role == 'ROLE_ADMIN' %}
                                title="Eliminar {{trinder.name}}" class="trivial-actions-enabled btn-delete-trivial" data-href="#" data-id="{{trinder.id}}" data-name="{{trinder.name}}"
                            {% else %}
                                class="trivial-actions-disabled" title="No se puede eliminar el tivial porque la campaña ya ha iniciado" data-toggle="tooltip"
                            {% endif %}
                    >

                        <td class="trivial-actions-img"><img src="{{asset('img/trivial-eliminar.png')}}"></td>
                        <td class="trivial-actions-table-action">{% trans %}Delete{% endtrans %}</td>
                    </tr>
                </table>
            </div>
            {# tabla versión movil  #}
            {% if app.user.role != "ROLE_TUTOR" %}
                <div class="col-xs-12 btn-admin-xs">
                    <div
                            {% if cont == 1  %}
                                class="btn trivial-user-btn-jugar-disabled"
                            {% else %}
                                class="btn trivial-user-btn-jugar" id="play-game-user" class="trivial-actions-enabled" data-toggle="modal" data-target="#modalGame" data-href="#" data-id-trivial="{{trinder.id}}"
                            {% endif %}
                    >{% trans %}PLAY{% endtrans %}<img class="trivial-user-btn-jugar-img" src="{{asset('img/trivial-user-play.png')}}"></div>
                </div>
            {% endif %}

            <div id="actions-{{trinder.id}}"
                    {% if app.user.role == "ROLE_TUTOR" %}
                        class="trivial-md-1 trivial-actions-tutor col-xs-12"
                    {% else %}
                        class="trivial-md-1 col-sm-12 col-xs-12"
                    {% endif %}
            >
                <table class="trivial-actions-mobile" data-trivial="{{trinder.id}}">
                    <tr>
                        <td
                                {% if trinder.competition.beginAt|date("Y-m-d") > "now"|date("Y-m-d") or app.user.role == 'ROLE_ADMIN' %}
                                    class="trivial-actions-enabled"  data-href="trinder_edit"
                                {% else %}
                                    class="trivial-actions-disabled" title="No se puede editar el tivial porque la campaña ya ha iniciado" data-toggle="tooltip"
                                {% endif %}
                        ><img src="{{asset('img/trivial-editar.png')}}"></td>
                        <td class="trivial-actions-enabled" data-href="category_list"><img src="{{asset('img/trivial-categorias.png')}}"></td>
                        <td class="trivial-actions-enabled" data-href="record_list"><img src="{{asset('img/trivial-registro.png')}}"></td>
                        <td class="trivial-actions-enabled" data-href="badge_list"><img src="{{asset('img/trivial-medallas.png')}}"></td>
                        <td {% if trinder.competition.beginAt|date("Y-m-d") > "now"|date("Y-m-d") or app.user.role == 'ROLE_ADMIN' %}
                            class="trivial-actions-enabled btn-delete-trivial" data-href="#" data-id="{{trinder.id}}" data-name="{{trinder.name}}"
                        {% else %}
                            class="trivial-actions-disabled" title="No se puede eliminar el tivial porque la campaña ya ha iniciado" data-toggle="tooltip"
                        {% endif %}
                        ><img src="{{asset('img/trivial-eliminar.png')}}"></td>
                    </tr>
                    <tr>
                        <td
                                {% if trinder.competition.beginAt|date("Y-m-d") > "now"|date("Y-m-d") or app.user.role == 'ROLE_ADMIN' %}
                                    class="trivial-actions-enabled"  data-href="trinder_edit"
                                {% else %}
                                    class="trivial-actions-disabled" title="No se puede editar el tivial porque la campaña ya ha iniciado" data-toggle="tooltip"
                                {% endif %}
                        >{% trans %}Edit{% endtrans %}</td>
                        <td class="trivial-actions-enabled" data-href="category_list">{% trans %}Categories{% endtrans %}</td>
                        <td class="trivial-actions-enabled" data-href="record_list">{% trans %}Ranking{% endtrans %}</td>
                        <td class="trivial-actions-enabled" data-href="badge_list">{% trans %}Badges{% endtrans %}</td>
                        <td
                                {% if trinder.competition.beginAt|date("Y-m-d") > "now"|date("Y-m-d") or app.user.role == 'ROLE_ADMIN' %}
                                    class="trivial-actions-enabled btn-delete-trivial" data-href="#" data-id="{{trinder.id}}" data-name="{{trinder.name}}"
                                {% else %}
                                    class="trivial-actions-disabled" title="No se puede eliminar el tivial porque la campaña ya ha iniciado" data-toggle="tooltip"
                                {% endif %}
                        >{% trans %}Delete{% endtrans %}</td>
                    </tr>

                </table>
            </div>
        </div>
        {{ include ('Clientes/forms/form.html.twig',{form: deleteform_trivial_ajax,type:'el trinder', name:trinder.name, id:"form-delete",with_submit:false}) }}
    {% endfor %}
{% endif %}
            {% if app.user.role == 'ROLE_ADMIN' or  competition.finalizeAt|date("Y-m-d") >= "now"|date("Y-m-d") %}
                <a class="btn trivial-button-add btn-add " data-toggle="modal" data-target="#trinderModal-{{competition.id}}" href="#">{% trans %}Create Game{% endtrans %}<span class="trivial-button-add-plus"><img src="{{asset('img/trivial-add-button.png')}}"></span></a>
            {% endif %}
<div>
    <div class="download-competition col-xs-1 pull-right no-padd"><a class="btn" title="Exportar datos de {{competition.name}}" href="{{path('competition_export_options',{id: competition.id})}}"><img src="{{asset('img/downloadDocument.png')}}"></a></div>
</div>
{# {% endif %}                    #}
                {#display navigation#}
<div class="navigation">
    {{ knp_pagination_render(pagination)}}
</div>
<!-- Modal -->
<div class="modal fade" id="modalGame" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">

            <div id="game">

            </div>

        </div>

    </div>
</div>

{{ include ('Trivial/forms/addTrinderform.html.twig',{form: addform_trivial_ajax,message:'Estás seguro?',id:"trinderModal-"~competition.id,with_submit:false}) }}
{{ include ('Badges/forms/reward.html.twig') }}