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

{% block meta_og_title %}{% trans %}Collection{% endtrans %} {{ nomDuSysteme }} {% trans %}de{% endtrans %} {{ nomUser }}{% endblock %}
{% block meta_og_type %}website{% endblock %}
{% block meta_og_image %}{% if app.request.locale == 'fr' %}{{ base_url_fr_sans_langue }}images/logo-mjv-1.png{% else %}{{ base_url_en_sans_langue }}images/logo-vgm-1.png{% endif %}{% endblock %}

{% block meta_title %}{% if app.request.locale == 'fr' %}{% trans %}Collection{% endtrans %} {{ nomDuSysteme }}{% else %}{{ nomDuSysteme }} collection{% endif %} {% trans %}de{% endtrans %} {{ nomUser }}{% endblock %}

{% block meta_description %}{% if app.request.locale == 'fr' %}{% trans %}Collection{% endtrans %} {{ nomDuSysteme }}{% else %}{{ nomDuSysteme }} collection{% endif %} {% trans %}de{% endtrans %} {{ nomUser }}{% endblock %}

{% block chemin %}<div><a href="{{ path('collection', {'idUser': idUser, 'nomUser': nomUser}) }}">{% trans %}Accueil{% endtrans %}</a> > {% if app.request.locale == 'fr' %}{% trans %}Collection{% endtrans %} {{ nomDuSysteme }}{% else %}{{ nomDuSysteme }} collection{% endif %} {% trans %}de{% endtrans %} {{ nomUser }}</div>{% endblock %}

{% block sous_chemin %}
<div id="sous_chemin">
    <div class="container">
        <div class="row" id="browse_version_repliee">
            {% if totalDesJeux > 0 %}
            <div class="col-md-11">
                <div class="row row_lettre">
                    {% for systeme in infosDuSysteme %}
                    {% for listelettres in listeLettresSysteme %}
                    
                        {% if listelettres.type != 'vide' %}
                        <div class="lettre_systeme lettre_{{ listelettres.type }}" onclick="document.location='{{ path('collection2', {'idUser': idUser, 'nomUser': nomUser, 'systemePourUrl': systemePourUrl, 'idSysteme': idSysteme, 'page': 0, 'tri': tri, 'lettre': listelettres.lettre}) }}';" onmouseover="ancienneclasse=this.className; if(this.className=='lettre_systeme lettre_normale') { this.className='lettre_systeme lettre_active'; }" onmouseout="if(this.className=='lettre_systeme lettre_active') { this.className=ancienneclasse; }"><p><a href="{{ path('collection2', {'idUser': idUser, 'nomUser': nomUser, 'systemePourUrl': systemePourUrl, 'idSysteme': idSysteme, 'page': 0, 'tri': tri, 'lettre': listelettres.lettre}) }}">{% if listelettres.lettre != '0' %}{{ listelettres.lettre }}{% endif %}{% if listelettres.lettre == '0' %}#{% endif %}</a></p></div>
                        {% endif %}
                        {% if listelettres.type == 'vide' %}
                        <div class="lettre_systeme lettre_{{ listelettres.type }}" onmouseover="ancienneclasse=this.className; if(this.className=='lettre_systeme lettre_normale') { this.className='lettre_systeme lettre_active'; }" onmouseout="if(this.className=='lettre_systeme lettre_active') { this.className=ancienneclasse; }"><p>{% if listelettres.lettre != '0' %}{{ listelettres.lettre }}{% endif %}{% if listelettres.lettre == '0' %}#{% endif %}</p></div>
                        {% endif %}
                    {% endfor %}
                    <div class="lettre_systeme_all {% if app.request.locale == 'fr' %}lettre_systeme_all_fr {% endif %}{% if lettre != 'all' %}lettre_normale{% endif %}{% if lettre == 'all' %}lettre_active{% endif %}" onclick="document.location='{{ path('collection2', {'idUser': idUser, 'nomUser': nomUser, 'systemePourUrl': systemePourUrl, 'idSysteme': idSysteme, 'page': 0, 'tri': tri, 'lettre': 'all'}) }}';" onmouseover="ancienneclasse=this.className; if(this.className=='lettre_systeme_all {% if app.request.locale == 'fr' %}lettre_systeme_all_fr {% endif %}lettre_normale') { this.className='lettre_systeme_all {% if app.request.locale == 'fr' %}lettre_systeme_all_fr {% endif %}lettre_active'; }" onmouseout="if(this.className=='lettre_systeme_all {% if app.request.locale == 'fr' %}lettre_systeme_all_fr {% endif %}lettre_active') { this.className=ancienneclasse; }"><p><a href="{{ path('collection2', {'idUser': idUser, 'nomUser': nomUser, 'systemePourUrl': systemePourUrl, 'idSysteme': idSysteme, 'page': 0, 'tri': tri, 'lettre': 'all'}) }}">{% trans %}Tout{% endtrans %}</a></p></div>
                    {% endfor %}
                </div>
                <!--<div class="row">{% trans %}Affichage{% endtrans %} : &nbsp; {% if systemeAffichage == 'screenshots' %}<strong>{% trans %}screenshots{% endtrans %}</strong>{% endif %}{% if systemeAffichage != 'screenshots' %}<a href="?systeme_affichage=screenshots">{% trans %}screenshots{% endtrans %}</a>{% endif %} / {% if systemeAffichage == 'boxarts' %}<strong>{% trans %}boxarts{% endtrans %}</strong>{% endif %}{% if systemeAffichage != 'boxarts' %}<a href="?systeme_affichage=boxarts">{% trans %}boxarts{% endtrans %}</a>{% endif %} / {% if systemeAffichage == 'liste' %}<strong>{% trans %}liste{% endtrans %}</strong>{% endif %}{% if systemeAffichage != 'liste' %}<a href="?systeme_affichage=liste">{% trans %}liste{% endtrans %}</a>{% endif %}</div>-->
            </div>
            {% endif %}
        </div>
        <div class="row" id="browse_version_depliee">
            {% if totalDesJeux > 0 %}
            <div class="col-md-5">
                <div class="row">{% if app.request.locale == 'fr' %}Parcourir les jeux {{ nomDuSysteme }}{% else %}Browse {{ nomDuSysteme }} games{% endif %} :</div>
                <div class="row row_lettre">
                    {% for systeme in infosDuSysteme %}
                    {% for listelettres in listeLettresSysteme %}
                        {% if listelettres.type != 'vide' %}
                        <div class="lettre_systeme lettre_{{ listelettres.type }}" onclick="document.location='{{ path('collection2', {'idUser': idUser, 'nomUser': nomUser, 'systemePourUrl': systemePourUrl, 'idSysteme': idSysteme, 'page': 0, 'tri': tri, 'lettre': listelettres.lettre}) }}';" onmouseover="ancienneclasse=this.className; if(this.className=='lettre_systeme lettre_normale') { this.className='lettre_systeme lettre_active'; }" onmouseout="if(this.className=='lettre_systeme lettre_active') { this.className=ancienneclasse; }"><p><a href="{{ path('collection2', {'idUser': idUser, 'nomUser': nomUser, 'systemePourUrl': systemePourUrl, 'idSysteme': idSysteme, 'page': 0, 'tri': tri, 'lettre': listelettres.lettre}) }}">{% if listelettres.lettre != '0' %}{{ listelettres.lettre }}{% endif %}{% if listelettres.lettre == '0' %}#{% endif %}</a></p></div>
                        {% endif %}
                        {% if listelettres.type == 'vide' %}
                        <div class="lettre_systeme lettre_{{ listelettres.type }}" onmouseover="ancienneclasse=this.className; if(this.className=='lettre_systeme lettre_normale') { this.className='lettre_systeme lettre_active'; }" onmouseout="if(this.className=='lettre_systeme lettre_active') { this.className=ancienneclasse; }"><p>{% if listelettres.lettre != '0' %}{{ listelettres.lettre }}{% endif %}{% if listelettres.lettre == '0' %}#{% endif %}</p></div>
                        {% endif %}
                    {% endfor %}
                    <div class="lettre_systeme_all {% if app.request.locale == 'fr' %}lettre_systeme_all_fr {% endif %}{% if lettre != 'all' %}lettre_normale{% endif %}{% if lettre == 'all' %}lettre_active{% endif %}" onclick="document.location='{{ path('collection2', {'idUser': idUser, 'nomUser': nomUser, 'systemePourUrl': systemePourUrl, 'idSysteme': idSysteme, 'page': 0, 'tri': tri, 'lettre': 'all'}) }}';" onmouseover="ancienneclasse=this.className; if(this.className=='lettre_systeme_all {% if app.request.locale == 'fr' %}lettre_systeme_all_fr {% endif %}lettre_normale') { this.className='lettre_systeme_all {% if app.request.locale == 'fr' %}lettre_systeme_all_fr {% endif %}lettre_active'; }" onmouseout="if(this.className=='lettre_systeme_all {% if app.request.locale == 'fr' %}lettre_systeme_all_fr {% endif %}lettre_active') { this.className=ancienneclasse; }"><p><a href="{{ path('collection2', {'idUser': idUser, 'nomUser': nomUser, 'systemePourUrl': systemePourUrl, 'idSysteme': idSysteme, 'page': 0, 'tri': tri, 'lettre': 'all'}) }}">{% trans %}Tout{% endtrans %}</a></p></div>
                    {% endfor %}
                </div>
                <!--<div class="row">{% trans %}Affichage{% endtrans %} : &nbsp; {% if systemeAffichage == 'screenshots' %}<strong>{% trans %}screenshots{% endtrans %}</strong>{% endif %}{% if systemeAffichage != 'screenshots' %}<a href="?systeme_affichage=screenshots">{% trans %}screenshots{% endtrans %}</a>{% endif %} / {% if systemeAffichage == 'boxarts' %}<strong>{% trans %}boxarts{% endtrans %}</strong>{% endif %}{% if systemeAffichage != 'boxarts' %}<a href="?systeme_affichage=boxarts">{% trans %}boxarts{% endtrans %}</a>{% endif %} / {% if systemeAffichage == 'liste' %}<strong>{% trans %}liste{% endtrans %}</strong>{% endif %}{% if systemeAffichage != 'liste' %}<a href="?systeme_affichage=liste">{% trans %}liste{% endtrans %}</a>{% endif %}</div>-->
            </div>
            {% endif %}
            <div class="col-md-6" style="padding-top: 10px;">
                <div style="float: right;">
                {% for systeme in infosDuSysteme %}
                <div class="icone_systeme"><img src="{{ asset( 'images/deroulant/' ~ systeme.id ~ '.png' ) }}" border="0"></div>
                <div class="bloc1_systeme"><p>{{ systeme.systemePropre }}</p>{% if systeme.logo != '0' %}<p class="logo_systeme"><img src="{{ asset( 'images/logos/' ~ systeme.logo ~ '.png' ) }}" border="0"></p>{% endif %}</div>
                <div class="photo_systeme"><img src="{{ asset( 'screenshots/' ~ systeme.repertoire ~ '/system_site.png' ) }}" border="0"></div>
                <div class="specs_systeme">
                    {% if systeme.annee != '0' %}
                    <p>{% trans %}Ann&eacute;e{% endtrans %} : {{ systeme.annee }}</p>
                    <p>{% trans %}CPU{% endtrans %} : {{ systeme.cpu }}</p>
                    <p>{% trans %}Fr&eacute;quence{% endtrans %} : {{ systeme.vitesseCpu }}</p>
                    <p>{% trans %}R&eacute;solution{% endtrans %} : {{ systeme.resolution }}</p>
                    {% endif %}
                </div>
                {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block pagination1 %}
<div class="text-center text-bold container container_search">

    <!-- bloc systemes -->
    {% if ( lettre == 'all' ) and ( page == 0 ) %}
    <h2>{{ nomDuSysteme }} {% trans %}de{% endtrans %} {{ nomUser }}</h2>
	{% if ( (app.user) and (app.user.id==idUser) ) %}
	<br /><p><a class="simple-ajax-popup btn-collection" href="#form-collection-systeme-ajout"><img src="{{ asset('images/142-Upload-26.png') }}"> &nbsp;{% trans %}Ajouter{% endtrans %}</a></p><br />
	{% endif %}
    {% if nbSystemes > 0 %}
    <div class="row">
        <div class="col-md-12 consoles_page_collection">
            <div class="newtab-grid">
                {% for systeme in listeDesSystemesDuUser %}
                <div id="div_systeme_{{ systeme.id }}">
                    <a title="{{ systeme.description }} : {{ systeme.pays }}, {{ systeme.etat }}" href="{{ asset( 'temp_upload/collection/systemes/' ~ idUser ~ '/' ~ systeme.id ~ '.jpg' ) }}" class="screen_pour_popup"><img class="collection_consoles" border="0" title="{{ systeme.description }} : {{ systeme.pays }}, {{ systeme.etat }}" alt="{{ systeme.description }} : {{ systeme.pays }}, {{ systeme.etat }}" src="{{ asset( 'temp_upload/collection/systemes/' ~ idUser ~ '/' ~ systeme.id ~ '.jpg' ) }}"></a>
					{% if ( systeme.photoSysteme1 ) %}
                    <a title="{{ systeme.description }} : {{ systeme.pays }}, {{ systeme.etat }}" href="{{ asset( 'temp_upload/collection/systemes/' ~ idUser ~ '/' ~ systeme.id ~ '_1.jpg' ) }}" class="screen_pour_popup"><img class="collection_consoles" border="0" title="{{ systeme.description }} : {{ systeme.pays }}, {{ systeme.etat }}" alt="{{ systeme.description }} : {{ systeme.pays }}, {{ systeme.etat }}" src="{{ asset( 'temp_upload/collection/systemes/' ~ idUser ~ '/' ~ systeme.id ~ '_1.jpg' ) }}"></a>
					{% endif %}
					{% if ( systeme.photoSysteme2 ) %}
                    <a title="{{ systeme.description }} : {{ systeme.pays }}, {{ systeme.etat }}" href="{{ asset( 'temp_upload/collection/systemes/' ~ idUser ~ '/' ~ systeme.id ~ '_2.jpg' ) }}" class="screen_pour_popup"><img class="collection_consoles" border="0" title="{{ systeme.description }} : {{ systeme.pays }}, {{ systeme.etat }}" alt="{{ systeme.description }} : {{ systeme.pays }}, {{ systeme.etat }}" src="{{ asset( 'temp_upload/collection/systemes/' ~ idUser ~ '/' ~ systeme.id ~ '_2.jpg' ) }}"></a>
					{% endif %}
					{% if ( (app.user) and (app.user.id==idUser) ) %}<br /><span><a class="simple-ajax-popup btn-collection btn-collection-jeu btn-collection-gris-1" href="#form-collection-systeme-modifier" onclick="$('#modifier_systeme_id').val({{ systeme.id }}); $('#modifier_systeme_etat').val('{{ systeme.etatOriginal }}'); $('#modifier_systeme_pays_systeme').val({{ systeme.paysOriginal }}); $('#modifier_systeme_description_systeme').val('{{ systeme.description|escape('js') }}');">{% trans %}Modifier{% endtrans %}</a> &nbsp; <a href="#" onclick="supprimer_un_systeme({{ systeme.id }}); return false;" class="btn-collection btn-collection-jeu btn-collection-gris-2">{% trans %}Supprimer{% endtrans %}</a></span>{% endif %}
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
    {% endif %}
{% if ( (app.user) and (app.user.id==idUser) ) %}
<div id="form-collection-systeme-modifier" style="max-width: 600px; margin: 20px auto;" class="white-popup-block mfp-hide">
<script language="Javascript">
<!--
function verif_form_collection_systeme_modifier()
{
    if( $("#modifier_systeme_etat").val() == '' )
        return false;

    return true;
}
-->
</script>
    <form id="form-collection-systeme-modifier" action="" method="post" enctype="multipart/form-data" onsubmit="return verif_form_collection_systeme_modifier();">
        <input type="hidden" name="testform-systeme-modifier" value="testform-systeme-modifier">
        <input type="hidden" id="modifier_systeme_id" name="idsysteme" value="">
        <h2>{% trans %}Modifier un syst&egrave;me de votre collection{% endtrans %}</h2>
        <label for="modifier_systeme_etat">{% trans %}Etat{% endtrans %}</label>
        <select id="modifier_systeme_etat" name="etat" style="width:100%; height:38px;">
            <option value="occasion">{% trans %}Occasion{% endtrans %}</option>
            <option value="neuf">{% trans %}Neuf{% endtrans %}</option>
            <option value="neuf_blister">{% trans %}Neuf (sous blister){% endtrans %}</option>
        </select><br /><br />
        <label for="modifier_systeme_pays_systeme">{% trans %}Pays / Zone{% endtrans %}</label>
        <select id="modifier_systeme_pays_systeme" name="pays" style="width:100%; height:38px;">
            {% for pays in listePaysBoxarts %}
                {% if pays.fr != '' %}<option value="{{ pays.id }}">{% if app.request.locale == 'fr' %}{{ pays.fr }}{% else %}{{ pays.en }}{% endif %}</option>{% endif %}
            {% endfor %}
        </select><br /><br />
        <label for="modifier_systeme_photo_systeme">{% trans %}Photo{% endtrans %} (jpg)</label>
        <input type="file" id="modifier_systeme_photo_systeme" name="photo_systeme"><br /><br />
        <label for="modifier_systeme_description_systeme">{% trans %}Description{% endtrans %}</label>
        <textarea id="modifier_systeme_description_systeme" name="description" style="width:100%; height:120px;"></textarea><br />
        <br /><input type="submit" value="{% trans %}Modifier{% endtrans %}"><br />
    </form>
</div>

<div id="form-collection-systeme-ajout" style="max-width: 600px; margin: 20px auto;" class="white-popup-block mfp-hide">
<script language="Javascript">
<!--
function verif_form_collection_systeme_ajout()
{
    var fileName = $("#photo_systeme").val();
    if( fileName.length == 0 )
        return false;

    if( $("#etat").val() == '' )
        return false;

    return true;
}

-->
</script>

<style>
.select2-results__option--selectable {
  cursor: pointer;
  color: black;
}
#form_ajout_jeu, #form-collection-systeme-ajout, #form-collection-systeme-modifier, #form_collection_jeu_modifier, #form_collection_accessoire_modifier, #form_collection_accessoire_ajout, #form_collection_ajout {
  font-size: 15px;
}
</style>

    <form id="form-collection-systeme-ajout" action="" method="post" enctype="multipart/form-data" onsubmit="return verif_form_collection_systeme_ajout();">
        <input type="hidden" name="testform-systeme" value="testform-systeme">
        <input type="hidden" name="idsysteme" value="{{ idSysteme }}">
        <h2>{% trans %}Ajouter un syst&egrave;me &agrave; votre collection{% endtrans %}</h2>
        <label for="etat">{% trans %}Etat{% endtrans %}</label>
        <select id="etat" name="etat" style="width:100%; height:38px;">
            <option value="occasion">{% trans %}Occasion{% endtrans %}</option>
            <option value="neuf">{% trans %}Neuf{% endtrans %}</option>
            <option value="neuf_blister">{% trans %}Neuf (sous blister){% endtrans %}</option>
        </select><br /><br />
        <label for="pays_systeme">{% trans %}Pays / Zone{% endtrans %}</label>
        <select id="pays_systeme" name="pays" style="width:100%; height:38px;">
            {% for pays in listePaysBoxarts %}
                {% if pays.fr != '' %}<option value="{{ pays.id }}">{% if app.request.locale == 'fr' %}{{ pays.fr }}{% else %}{{ pays.en }}{% endif %}</option>{% endif %}
            {% endfor %}
        </select><br /><br />
<script type="text/javascript">
$('#pays_systeme').val('21');
</script>
        <label for="photo_systeme">{% trans %}Photo{% endtrans %} (jpg)</label>
        <input type="file" id="photo_systeme" name="photo_systeme"><br /><br />
        <label for="description_systeme">{% trans %}Description{% endtrans %}</label>
        <textarea id="description_systeme" name="description" style="width:100%; height:120px;"></textarea><br />
        <br /><input type="submit" value="{% trans %}Ajouter{% endtrans %}"><br />
    </form>
</div>
{% endif %}
    {% endif %}

    <!-- bloc accessoires -->
    {% if ( lettre == 'all' ) and ( page == 0 ) %}
    <h2>{% if app.request.locale == 'fr' %}Accessoires {{ nomDuSysteme }}{% else %}{{ nomDuSysteme }} accessories{% endif %} {% trans %}de{% endtrans %} {{ nomUser }}</h2>
	{% if ( (app.user) and (app.user.id==idUser) ) %}
	<br /><p><a class="simple-ajax-popup btn-collection" href="#form-collection-accessoire-ajout"><img src="{{ asset('images/142-Upload-26.png') }}"> &nbsp;{% trans %}Ajouter{% endtrans %}</a></p><br />
	{% endif %}
    {% if nbAccessoires > 0 %}
    <div class="row">
        <div class="col-md-12 consoles_page_collection">
            <div class="newtab-grid">
                {% for accessoire in listeDesAccessoiresDuUser %}
                <div id="div_access_{{ accessoire.id }}">
                    <a title="{{ accessoire.description }} : {{ accessoire.pays }}, {{ accessoire.etat }}" href="{{ asset( 'temp_upload/collection/accessoires/' ~ idUser ~ '/' ~ accessoire.id ~ '.jpg' ) }}" class="screen_pour_popup"><img class="collection_consoles" border="0" title="{{ accessoire.description }} : {{ accessoire.pays }}, {{ accessoire.etat }}" alt="{{ accessoire.description }} : {{ accessoire.pays }}, {{ accessoire.etat }}" src="{{ asset( 'temp_upload/collection/accessoires/' ~ idUser ~ '/' ~ accessoire.id ~ '.jpg' ) }}"></a>{% if ( (app.user) and (app.user.id==idUser) ) %}<br /><span><a class="simple-ajax-popup btn-collection btn-collection-jeu btn-collection-gris-1" href="#form-collection-accessoire-modifier" onclick="$('#modifier_access_idaccess').val({{ accessoire.id }}); $('#modifier_access_etat_accessoire').val('{{ accessoire.etatOriginal|escape('js') }}'); $('#modifier_access_pays_accessoire').val('{{ accessoire.paysOriginal|escape('js') }}'); $('#modifier_access_description_accessoire').val('{{ accessoire.description|escape('js') }}'); return false;">{% trans %}Modifier{% endtrans %}</a> &nbsp; <a href="#" onclick="supprimer_un_accessoire({{ accessoire.id }}); return false;" class="btn-collection btn-collection-jeu btn-collection-gris-2">{% trans %}Supprimer{% endtrans %}</a></span>{% endif %}
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
    {% endif %}
{% if ( (app.user) and (app.user.id==idUser) ) %}
<div id="form-collection-accessoire-modifier" style="max-width: 600px; margin: 20px auto;" class="white-popup-block mfp-hide">
<script language="Javascript">
<!--
function verif_form_collection_accessoire_modifier()
{
    if( $("#modifier_access_etat_accessoire").val() == '' )
        return false;

    return true;
}
-->
</script>
    <form id="form_collection_accessoire_modifier" action="" method="post" enctype="multipart/form-data" onsubmit="return verif_form_collection_accessoire_modifier();">
        <input type="hidden" name="testform-accessoire-modifier" value="testform-accessoire-modifier">
        <input type="hidden" id="modifier_access_idaccess" name="idaccess" value="">
        <h2>{% trans %}Modifier un accessoire de votre collection{% endtrans %}</h2>
        <label for="modifier_access_etat_accessoire">{% trans %}Etat{% endtrans %}</label>
        <select id="modifier_access_etat_accessoire" name="etat" style="width:100%; height:38px;">
            <option value="occasion">{% trans %}Occasion{% endtrans %}</option>
            <option value="neuf">{% trans %}Neuf{% endtrans %}</option>
            <option value="neuf_blister">{% trans %}Neuf (sous blister){% endtrans %}</option>
        </select><br /><br />
        <label for="modifier_access_pays_accessoire">{% trans %}Pays / Zone{% endtrans %}</label>
        <select id="modifier_access_pays_accessoire" name="pays" style="width:100%; height:38px;">
            {% for pays in listePaysBoxarts %}
                {% if pays.fr != '' %}<option value="{{ pays.id }}">{% if app.request.locale == 'fr' %}{{ pays.fr }}{% else %}{{ pays.en }}{% endif %}</option>{% endif %}
            {% endfor %}
        </select><br /><br />
        <label for="modifier_access_photo_accessoire">{% trans %}Photo{% endtrans %} (jpg)</label>
        <input type="file" id="modifier_access_photo_accessoire" name="photo_accessoire"><br /><br />
        <label for="modifier_access_description_accessoire">{% trans %}Description{% endtrans %}</label>
        <textarea id="modifier_access_description_accessoire" name="description" style="width:100%; height:120px;"></textarea><br />
        <br /><input type="submit" value="{% trans %}Modifier{% endtrans %}"><br />
    </form>
</div>

<div id="form-collection-accessoire-ajout" style="max-width: 600px; margin: 20px auto;" class="white-popup-block mfp-hide">
<script language="Javascript">
<!--
function verif_form_collection_accessoire_ajout()
{
    var fileName = $("#photo_accessoire").val();
    if( fileName.length == 0 )
        return false;

    if( $("#etat_accessoire").val() == '' )
        return false;

    return true;
}
-->
</script>
    <form id="form_collection_accessoire_ajout" action="" method="post" enctype="multipart/form-data" onsubmit="return verif_form_collection_accessoire_ajout();">
        <input type="hidden" name="testform-accessoire" value="testform-accessoire">
        <input type="hidden" name="idsysteme" value="{{ idSysteme }}">
        <h2>{% trans %}Ajouter un accessoire &agrave; votre collection{% endtrans %}</h2>
        <label for="etat_accessoire">{% trans %}Etat{% endtrans %}</label>
        <select id="etat_accessoire" name="etat" style="width:100%; height:38px;">
            <option value="occasion">{% trans %}Occasion{% endtrans %}</option>
            <option value="neuf">{% trans %}Neuf{% endtrans %}</option>
            <option value="neuf_blister">{% trans %}Neuf (sous blister){% endtrans %}</option>
        </select><br /><br />
        <label for="pays_accessoire">{% trans %}Pays / Zone{% endtrans %}</label>
        <select id="pays_accessoire" name="pays" style="width:100%; height:38px;">
            {% for pays in listePaysBoxarts %}
                {% if pays.fr != '' %}<option value="{{ pays.id }}">{% if app.request.locale == 'fr' %}{{ pays.fr }}{% else %}{{ pays.en }}{% endif %}</option>{% endif %}
            {% endfor %}
        </select><br /><br />
<script type="text/javascript">
$('#pays_accessoire').val('21');
</script>
        <label for="photo_accessoire">{% trans %}Photo{% endtrans %} (jpg)</label>
        <input type="file" id="photo_accessoire" name="photo_accessoire"><br /><br />
        <label for="description_accessoire">{% trans %}Description{% endtrans %}</label>
        <textarea id="description_accessoire" name="description" style="width:100%; height:120px;"></textarea><br />
        <br /><input type="submit" value="{% trans %}Ajouter{% endtrans %}"><br />
    </form>
</div>
{% endif %}
    {% endif %}
<script type="text/javascript">
<!--
  $(document).ready(function() {
    $('.consoles_page_collection').magnificPopup({
      delegate: 'a.screen_pour_popup',
      type: 'image',
      tLoading: 'Loading image #%curr%...',
      mainClass: 'mfp-img-mobile',
      gallery: {
        enabled: true,
        navigateByImgClick: true,
        preload: [0,1]
      },
      image: {
        tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
        titleSrc: function(item) {
          return item.el.attr('title');
        }
      }
    });
  });
-->
</script>
    
    <!-- bloc jeux -->
    <h2>{% if app.request.locale == 'fr' %}Jeux {{ nomDuSysteme }}{% else %}{{ nomDuSysteme }} games{% endif %} {% trans %}de{% endtrans %} {{ nomUser }}</h2>
	{% if ( (app.user) and (app.user.id==idUser) ) %}
	<br /><p><a class="simple-ajax-popup btn-collection" href="#form-collection-ajout"><img src="{{ asset('images/142-Upload-26.png') }}"> &nbsp;{% trans %}Ajouter{% endtrans %}</a></p><br />
	{% endif %}
    {% if nombrePages > 1 %}
    <div class="row">
        <div class="col-md-12 nbresultats_pagination1">
            {% if app.request.locale == 'fr' %}
            {{ debutPagination }} &agrave; {{ finPagination }} sur {{ totalDesJeux }} jeux
            {% else %}
            {{ debutPagination }} - {{ finPagination }} of {{ totalDesJeux }} games
            {% endif %}
        </div>
    </div>
    {% endif %}
    <div class="row">
        <div class="col-md-12">
            <div class="newtab-grid">
            <ul class="sync-pagination pagination">
            {% for page in listingNumerotationPagination %}
                {% if ( page.numeroAffiche != 'laquo' ) and ( page.numeroAffiche != 'raquo' ) %}<li class="{{ page.classe }}"><a href="{{ path('collection2', {'idUser': idUser, 'nomUser': nomUser, 'systemePourUrl': systemePourUrl, 'idSysteme': idSysteme, 'page': page.numero, 'tri': tri, 'lettre': lettre}) }}">{{ page.numeroAffiche }}</a></li>{% endif %}
                {% if page.numeroAffiche == 'laquo' %}<li class="{{ page.classe }}"><a href="{{ path('collection2', {'idUser': idUser, 'nomUser': nomUser, 'systemePourUrl': systemePourUrl, 'idSysteme': idSysteme, 'page': page.numero, 'tri': tri, 'lettre': lettre}) }}">&laquo;</a></li>{% endif %}
                {% if page.numeroAffiche == 'raquo' %}<li class="{{ page.classe }}"><a href="{{ path('collection2', {'idUser': idUser, 'nomUser': nomUser, 'systemePourUrl': systemePourUrl, 'idSysteme': idSysteme, 'page': page.numero, 'tri': tri, 'lettre': lettre}) }}">&raquo;</a></li>{% endif %}
            {% endfor %}
            </ul>
            </div>
        </div>
    </div>
</div>

{% if ( (app.user) and (app.user.id==idUser) ) %}
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<div id="form-collection-jeu-modifier" style="max-width:600px; margin: 20px auto;" class="white-popup-block mfp-hide">
<script language="Javascript">
<!--
function verif_form_collection_jeu_modifier()
{
    if( $("#modifier_id_du_jeu").val() == '' )
        return false;
    if( $("#modifier_etat_du_jeu").val() == '' )
        return false;
    if( $("#modifier_zone_du_jeu").val() == '' )
        return false;

    return true;
}
-->
</script>
    <form id="form_collection_jeu_modifier" action="" method="post" enctype="multipart/form-data" onsubmit="return verif_form_collection_jeu_modifier();">
        <input type="hidden" name="testform-modifier-jeu" value="testform-modifier-jeu">
        <input type="hidden" id="modifier_id_du_jeu" name="id_du_jeu" value="">
        <h2>{% trans %}Modifier un jeu de votre collection{% endtrans %}</h2>
        <label for="modifier_etat_du_jeu">{% trans %}Etat du jeu{% endtrans %}</label>
        <select id="modifier_etat_du_jeu" name="etat_du_jeu" style="width:100%; height:38px;">
            <option value="occasion">{% trans %}Occasion{% endtrans %}</option>
            <option value="neuf">{% trans %}Neuf{% endtrans %}</option>
            <option value="neuf_blister">{% trans %}Neuf (sous blister){% endtrans %}</option>
        </select><br /><br />
        <label for="modifier_zone_du_jeu">{% trans %}Pays / Zone{% endtrans %}</label>
        <select id="modifier_zone_du_jeu" name="zone_du_jeu" style="width:100%; height:38px;">
            {% for pays in listePaysBoxarts %}
                {% if pays.fr != '' %}<option value="{{ pays.id }}">{% if app.request.locale == 'fr' %}{{ pays.fr }}{% else %}{{ pays.en }}{% endif %}</option>{% endif %}
            {% endfor %}
        </select><br /><br />
        <label for="modifier_photo_jeu">{% trans %}Photo{% endtrans %} (jpg)</label>
        <input type="file" id="modifier_photo_jeu" name="photo_jeu"><br /><br />
        <label for="modifier_description">{% trans %}Description{% endtrans %}</label>
        <textarea id="modifier_description" name="description" style="width:100%; height:120px;"></textarea><br />
        <br /><input type="submit" value="{% trans %}Modifier{% endtrans %}"><br />
    </form>
</div>

<div id="form-collection-ajout" style="max-width:600px; margin: 20px auto;" class="white-popup-block mfp-hide">
{% for systeme in infosDuSysteme %}
<script language="Javascript">
var systemeId = '{{ systeme.id }}';
</script>
{% endfor %}
<script language="Javascript">
<!--
function verif_form_collection_ajout()
{
    if( $("#id_du_jeu").val() == '' )
        return false;
    if( $("#etat_du_jeu").val() == '' )
        return false;
    if( $("#zone_du_jeu").val() == '' )
        return false;

	stopperQuagga();

    return true;
}

function affichage_resultat_code_barre_suite( data )
{
	if (data != '') {
		const words = data.split(',');
		$('#id_du_jeu').val(words[1].trim());
		$('#id_du_jeu').trigger('change');
		if (words[2].trim() != '') {
			$('#zone_du_jeu').val(words[2].trim());
			$('#zone_du_jeu').trigger('change');
		}
	}
}

function affichage_resultat_code_barre( code )
{
    $('#div_resultats_file_2').show();
    $('#div_trouves_file_2').html('');
    $.ajax({
        type: 'GET',
        url: "{{ path('collection_codebarre_jeux') }}",
        data: "code=" + code + "&syst=" + systemeId,
    	success: function (data) {
			if (data != '') {
				$('#div_trouves_file_2').html(data);
			}
    	}
    });
}

function tester_code_saisi( code )
{
    $.ajax({
        type: 'GET',
        url: "{{ path('collection_codebarre_tester') }}",
        data: "code=" + code,
    	success: function (data) { return data; }
    });
}

$(document).ready(function() {
    $('#id_du_jeu').select2({ width: '100%', dropdownParent: $("#form_collection_ajout") });
    $('#etat_du_jeu').select2({ width: '100%', dropdownParent: $("#form_collection_ajout") });
    $('#zone_du_jeu').select2({ width: '100%', dropdownParent: $("#form_collection_ajout") });
});
-->
</script>

{% include 'Collection/inclusion_module_quagga.html.twig' %}

    <form id="form_collection_ajout" action="" method="post" enctype="multipart/form-data" onsubmit="return verif_form_collection_ajout();">
        <input type="hidden" name="testform" value="testform">
        <h2>{% trans %}Ajouter un jeu &agrave; votre collection{% endtrans %}</h2>
        
        <label for="code_barre">{% trans %}Code barre / Code{% endtrans %}</label><br />
        <input type="text" id="code_barre" name="code_barre" style="width: 200px;height: 38px;">&nbsp;<a href="#" style="color:#2394AF;font-weight:bold;" onclick="affichage_resultat_code_barre($('#code_barre').val(), true); return false;">{% trans %}Tester un code{% endtrans %}</a><br />
        <div id="div_resultat_code" style="display:none; margin-left: 164px;margin-bottom: 18px;font-weight: bold;color: red;"></div>
		
		<div style="float:left" class="div-file-1 div-file-2" onclick="$('#code_barre').val(''); $('#lien_arreter_scan').show(); App.init(); $('#interactive').show();"><p style="margin: auto;text-align: center;"><img src="{{ asset('images/video_icon.svg') }}" style="margin-left: 8px;margin-right: 10px;"><span>{% trans %}Scanner un code barre{% endtrans %}</span></p></div>
		<div style="float:left;padding-top: 16px;"><span id="lien_arreter_scan" style="display:none">&nbsp;&nbsp;&nbsp;<a href="" style="color: #337ab7; font-weight:bold;" onclick="stopperQuagga(); return false;">{% trans %}Arreter le scan{% endtrans %}</a></span></div>
		<div style="clear:both"></div>
		
        <input id="file-1" type="file" class="inputfile" value="{% trans %}Uploader un code barre{% endtrans %}" accept="image/*;capture=camera"><div class="div-file-1" id="div-file-1" onclick="jQuery('#code_barre').val(''); document.getElementById('file-1').click();"><p style="margin: auto;text-align: center;"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17" style="margin-left: 8px;margin-right: 10px;color: white;fill: currentColor;"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"></path></svg><span id="span-file-1">{% trans %}Charger une image de code barre{% endtrans %}</span></p></div>
		<hr class="hr_collection">

		<div id="div_resultats_file_2" style="display:none">
			<div id="div_trouves_file_2"></div>
			<hr class="hr_collection">
		</div>
		
        <label for="id_du_jeu">{% trans %}Nom du jeu{% endtrans %}</label>
        <select id="id_du_jeu" name="id_du_jeu">
            <option value="">{% trans %}Choisir un jeu{% endtrans %}</option>
            {% for infosDuJeu in listeJeuxDuSysteme %}
                <option value="{{ infosDuJeu.idReel }}">{{ infosDuJeu.titrePropreTronque }}</option>
            {% endfor %}
        </select><br /><br />
        <label for="etat_du_jeu">{% trans %}Etat du jeu{% endtrans %}</label>
        <select id="etat_du_jeu" name="etat_du_jeu">
            <option value="occasion">{% trans %}Occasion{% endtrans %}</option>
            <option value="neuf">{% trans %}Neuf{% endtrans %}</option>
            <option value="neuf_blister">{% trans %}Neuf (sous blister){% endtrans %}</option>
        </select><br /><br />
        <label for="zone_du_jeu">{% trans %}Pays / Zone{% endtrans %}</label>
        <select id="zone_du_jeu" name="zone_du_jeu">
            {% for pays in listePaysBoxarts %}
                {% if pays.fr != '' %}<option value="{{ pays.id }}">{% if app.request.locale == 'fr' %}{{ pays.fr }}{% else %}{{ pays.en }}{% endif %}</option>{% endif %}
            {% endfor %}
        </select><br /><br />
<script type="text/javascript">
$('#zone_du_jeu').val('21');
</script>
        <label for="photo_jeu">{% trans %}Photo{% endtrans %} (jpg)</label>
        <input type="file" id="photo_jeu" name="photo_jeu"><br /><br />
        <label for="description">{% trans %}Description{% endtrans %}</label>
        <textarea id="description" name="description" style="width:100%; height:120px;"></textarea><br />
        <br /><input type="submit" value="{% trans %}Ajouter{% endtrans %}"><br />
    </form>
	<button title="Close (Esc)" type="button" class="mfp-close">×</button>
</div>
<script language="Javascript">
<!--
function supprimer_un_jeu(idjeu)
{
    if( confirm('{% trans %}Voulez-vous vraiment supprimer ce jeu ?{% endtrans %}') )
    {
        $.getJSON('{{ path('collection_ajax_jeu_supprimer') }}?idjeu='+idjeu, function(data) {
            $('#tr_jeu_'+idjeu).hide();
        });
    }
}
function supprimer_un_systeme(idsysteme)
{
    if( confirm('{% trans %}Voulez-vous vraiment supprimer ce syst\350me ?{% endtrans %}') )
    {
        $.getJSON('{{ path('collection_ajax_systeme_supprimer') }}?idsysteme='+idsysteme, function(data) {
            $('#div_systeme_'+idsysteme).hide();
        });
    }
}
function supprimer_un_accessoire(idaccess)
{
    if( confirm('{% trans %}Voulez-vous vraiment supprimer cet accessoire ?{% endtrans %}') )
    {
        $.getJSON('{{ path('collection_ajax_access_supprimer') }}?idaccess='+idaccess, function(data) {
            $('#div_access_'+idaccess).hide();
        });
    }
}
-->
</script>
{% endif %}
<script type="text/javascript">
<!--
$('button.mfp-close').on( "click", function() {
  stopperQuagga();
  $.magnificPopup.close();
});
$(document).ready(function() {
    $('.simple-ajax-popup').magnificPopup({
        type: 'inline',
        preloader: false,
    });
});
-->
</script>
{% endblock %}

{% block body %}
<div class="row">
    <div class="col-md-12">

        {% if systemeAffichage == 'screenshots' %}
            <div class="newtab-grid">
            {% for jeu in listeDesJeux %}
                {% if jeu.clone == 0 %}
                <div onmouseover="$('#span_screen_jeu_{{ jeu.idreel }}').show()" onmouseout="$('#span_screen_jeu_{{ jeu.idreel }}').hide()">
                    <img src="{{ asset( jeu.lien_screen ) }}" alt="{{ jeu.titrePropre }}" title="{{ jeu.titrePropre }}" border="0" class="jeu_screenshot">
                    <span id="span_screen_jeu_{{ jeu.idreel }}" class="titre_dessus_screen" style="display:none;">{{ jeu.titrePropreTronque }}</span>
                </div>
                {% endif %}
                {% if jeu.clone != 0 %}
                <div onmouseover="$('#span_screen_jeu_{{ jeu.idreel }}').show()" onmouseout="$('#span_screen_jeu_{{ jeu.idreel }}').hide()">
                    <img src="{{ asset( jeu.lien_screen ) }}" alt="{{ jeu.titrePropre }}" title="{{ jeu.titrePropre }}" border="0" class="jeu_screenshot">
                    <span id="span_screen_jeu_{{ jeu.idreel }}" class="titre_dessus_screen" style="display:none;">{{ jeu.titrePropreTronque }}</span>
                </div>
                {% endif %}
            {% endfor %}
            </div>
        {% endif %}

        {% if systemeAffichage == 'boxarts' %}
            <div class="newtab-grid">
            {% for jeu in listeDesJeux %}
                {% if jeu.lien_boxart != '' %}
                {% if jeu.clone == 0 %}
                <div onmouseover="$('#span_box_jeu_{{ jeu.idreel }}').show()" onmouseout="$('#span_screen_jeu_{{ jeu.idreel }}').hide()">
                    <img src="{{ asset( jeu.lien_boxart ) }}" alt="{{ jeu.titrePropre }}" title="{{ jeu.titrePropre }}" border="0" class="jeu_screenshot">
                    <span id="span_box_jeu_{{ jeu.idreel }}" class="titre_dessus_screen" style="display:none;">{{ jeu.titrePropreTronque }}</span>
                </div>
                {% endif %}
                {% if jeu.clone != 0 %}
                <div onmouseover="$('#span_box_jeu_{{ jeu.idreel }}').show()" onmouseout="$('#span_screen_jeu_{{ jeu.idreel }}').hide()">
                    <img src="{{ asset( jeu.lien_boxart ) }}" alt="{{ jeu.titrePropre }}" title="{{ jeu.titrePropre }}" border="0" class="jeu_screenshot">
                    <span id="span_box_jeu_{{ jeu.idreel }}" class="titre_dessus_screen" style="display:none;">{{ jeu.titrePropreTronque }}</span>
                </div>
                {% endif %}
                {% endif %}
            {% endfor %}
            </div>
        {% endif %}

        {% if ( systemeAffichage == 'liste' ) and ( totalDesJeux > 0 ) %}
            <table id="simple-example-table" cellspacing="0">
                <tbody>
                    <tr class="thead" align="left">
                        <th width="61%">{% trans %}Titre{% endtrans %}</th>
                        <th width="15%">{% trans %}Etat{% endtrans %}</th>
                        <th width="10%">{% trans %}Pays / Zone{% endtrans %}</th>
                        <th width="10%">{% trans %}Description{% endtrans %}</th>
                        <th width="10%">{% trans %}Photo{% endtrans %}</th>
                    </tr>
                    {% for jeu in listeDesJeux %}
                    <tr id="tr_jeu_{{ jeu.idVrai }}">
                        <td><div>{{ jeu.titrePropre }}</div>{% if ( (app.user) and (app.user.id==idUser) ) %}<div style="margin-top: 10px;margin-bottom: 10px;"><a class="simple-ajax-popup btn-collection btn-collection-jeu btn-collection-gris-1" href="#form-collection-jeu-modifier" onclick="$('#modifier_id_du_jeu').val({{ jeu.idVrai }}); $('#modifier_nom_du_jeu').val('{{ jeu.titrePropre|escape('js') }}'); $('#modifier_etat_du_jeu').val('{{ jeu.etatOriginal }}'); $('#modifier_zone_du_jeu').val({{ jeu.paysOriginal }}); $('#modifier_description').val('{{ jeu.description|escape('js') }}');">{% trans %}Modifier{% endtrans %}</a> &nbsp; <a href="#" onclick="supprimer_un_jeu({{ jeu.idVrai }}); return false;" class="btn-collection btn-collection-jeu btn-collection-gris-2">{% trans %}Supprimer{% endtrans %}</a></div>{% endif %}</td>
                        <td>{{ jeu.etat }}</td>
                        <td>{{ jeu.pays }}</td>
                        <td>{{ jeu.description }}</td>
                        <td>{% if jeu.id != '' %}<a class="box_jeu_pour_popup" title="{{ jeu.titrePropre }} : {{ jeu.pays }}, {{ jeu.etat }}" href="{{ asset( 'temp_upload/collection/jeux/' ~ idUser ~ '/' ~ jeu.id ~ '.jpg' ) }}">{% trans %}voir{% endtrans %}</a>{% endif %}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
<script src="{{ asset('js/stacktable.js') }}" type="text/javascript"></script>
<script type="text/javascript">
<!--
$('#simple-example-table').stacktable({myClass:'your-custom-class'});
-->
</script>
<script type="text/javascript">
<!--
  $(document).ready(function() {
    $('.stacktable').magnificPopup({
      delegate: 'a.box_jeu_pour_popup',
      type: 'image',
      tLoading: 'Loading image #%curr%...',
      mainClass: 'mfp-img-mobile',
      gallery: {
        enabled: true,
        navigateByImgClick: true,
        preload: [0,1]
      },
      image: {
        tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
        titleSrc: function(item) {
          return item.el.attr('title');
        }
      }
    });
  });
-->
</script>
        {% endif %}
        
    </div>
</div>
{% endblock %}

{% block pagination2 %}
<div class="text-center text-bold container">
    <div class="row">
        <div class="col-md-12">
            <div class="newtab-grid">
            <ul class="sync-pagination pagination pagination_bas">
            {% for page in listingNumerotationPagination %}
                {% if ( page.numeroAffiche != 'laquo' ) and ( page.numeroAffiche != 'raquo' ) %}<li class="{{ page.classe }}"><a href="{{ path('collection2', {'idUser': idUser, 'nomUser': nomUser, 'systemePourUrl': systemePourUrl, 'idSysteme': idSysteme, 'page': page.numero, 'tri': tri, 'lettre': lettre}) }}">{{ page.numeroAffiche }}</a></li>{% endif %}
                {% if page.numeroAffiche == 'laquo' %}<li class="{{ page.classe }}"><a href="{{ path('collection2', {'idUser': idUser, 'nomUser': nomUser, 'systemePourUrl': systemePourUrl, 'idSysteme': idSysteme, 'page': page.numero, 'tri': tri, 'lettre': lettre}) }}">&laquo;</a></li>{% endif %}
                {% if page.numeroAffiche == 'raquo' %}<li class="{{ page.classe }}"><a href="{{ path('collection2', {'idUser': idUser, 'nomUser': nomUser, 'systemePourUrl': systemePourUrl, 'idSysteme': idSysteme, 'page': page.numero, 'tri': tri, 'lettre': lettre}) }}">&raquo;</a></li>{% endif %}
            {% endfor %}
            </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}