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

{% block meta_og_title %}
{% spaceless %}
    {% for systeme in infosDuSysteme %}
        {% if app.request.locale == 'fr' %}
            {% if lettre != 'all' %}
            Liste des jeux {{ systeme.marque }} {{ systeme.systemePropre }} commencants par la lettre {{ lettre }} - Page {{ pageActuelleJS }} - Le Musee des Jeux Video
            {% else %}
            Liste de tous les jeux {{ systeme.marque }} {{ systeme.systemePropre }} - Page {{ pageActuelleJS }} - Le Musee des Jeux Video
            {% endif %}
        {% else %}
            {% if lettre != 'all' %}
            Listing of {{ systeme.marque }} {{ systeme.systemePropre }} games starting with the letter {{ lettre }} - Page {{ pageActuelleJS }} - The Video Games Museum
            {% else %}
            Listing of all {{ systeme.marque }} {{ systeme.systemePropre }} games - Page {{ pageActuelleJS }} - The Video Games Museum
            {% endif %}
        {% endif %}
    {% endfor %}
{% endspaceless %}
{% endblock %}
{% block meta_og_type %}website{% endblock %}
{% block meta_og_image %}{% for systeme in infosDuSysteme %}{% if app.request.locale == 'fr' %}{{ base_url_fr_sans_langue }}{% else %}{{ base_url_en_sans_langue }}{% endif %}screenshots/{{ systeme.repertoire }}/system_site.png{% endfor %}{% endblock %}

{% block meta_title %}
{% spaceless %}
    {% for systeme in infosDuSysteme %}
        {% if app.request.locale == 'fr' %}
            {% if lettre != 'all' %}
            Liste des jeux {{ systeme.marque }} {{ systeme.systemePropre }} commencants par la lettre {{ lettre }} - Page {{ pageActuelleJS }} - Le Musee des Jeux Video
            {% else %}
            Liste de tous les jeux {{ systeme.marque }} {{ systeme.systemePropre }} - Page {{ pageActuelleJS }} - Le Musee des Jeux Video
            {% endif %}
        {% else %}
            {% if lettre != 'all' %}
            Listing of {{ systeme.marque }} {{ systeme.systemePropre }} games starting with the letter {{ lettre }} - Page {{ pageActuelleJS }} - The Video Games Museum
            {% else %}
            Listing of all {{ systeme.marque }} {{ systeme.systemePropre }} games - Page {{ pageActuelleJS }} - The Video Games Museum
            {% endif %}
        {% endif %}
    {% endfor %}
{% endspaceless %}
{% endblock %}

{% block meta_description %}
{% spaceless %}
    {% for systeme in infosDuSysteme %}
        {% if app.request.locale == 'fr' %}
            {% if lettre != 'all' %}
            Liste des jeux {{ systeme.marque }} {{ systeme.systemePropre }} commencants par la lettre {{ lettre }} - Page {{ pageActuelleJS }} - Le Musee des Jeux Video
            {% else %}
            Liste de tous les jeux {{ systeme.marque }} {{ systeme.systemePropre }} - Page {{ pageActuelleJS }} - Le Musee des Jeux Video
            {% endif %}
        {% else %}
            {% if lettre != 'all' %}
            List of {{ systeme.marque }} {{ systeme.systemePropre }} games starting with the letter {{ lettre }} - Page {{ pageActuelleJS }} - The Video Games Museum
            {% else %}
            List of all {{ systeme.marque }} {{ systeme.systemePropre }} games - Page {{ pageActuelleJS }} - The Video Games Museum
            {% endif %}
        {% endif %}
    {% endfor %}
{% endspaceless %}
{% endblock %}

{% block chemin %}
    <div>
        <a href="{{ path('homepage') }}">{% trans %}Accueil{% endtrans %}</a> > 
        {% for systeme in infosDuSysteme %}
            <h1 class="chemin_h1_normal"><a class="lien_noir" href="{{ path('systeme3', {'systemePourUrl': systeme.systemePourUrl, 'idSysteme': systeme.id, 'onglet': systeme.onglet, 'lettre': 'all', 'page': 0}) }}">{{ systeme.systemePropre }} ({{ totalJeuxDuSysteme }} {% trans %}jeux{% endtrans %})</a></h1>
        {% endfor %}
    </div>
{% endblock %}

{% block sous_chemin %}
<div id="sous_chemin">
    <div class="container">
        <div class="row" id="browse_version_repliee">
            <div class="col-md-12">
                <div class="row row_lettre">
                    {% for systeme in infosDuSysteme %}
                    {% for listelettres in listeLettresSysteme %}
                        <div class="lettre_systeme lettre_{{ listelettres.type }}" onclick="document.location='{{ path('systeme3', {'systemePourUrl': systeme.systemePourUrl, 'idSysteme': systeme.id, 'onglet': systeme.onglet, 'lettre': listelettres.lettre, 'page': 0}) }}';" 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('systeme3', {'systemePourUrl': systeme.systemePourUrl, 'idSysteme': systeme.id, 'onglet': systeme.onglet, 'lettre': listelettres.lettre, 'page': 0}) }}">{% if listelettres.lettre != '0' %}{{ listelettres.lettre }}{% endif %}{% if listelettres.lettre == '0' %}#{% endif %}</a></p></div>
                    {% 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('systeme3', {'systemePourUrl': systeme.systemePourUrl, 'idSysteme': systeme.id, 'onglet': systeme.onglet, 'lettre': 'all', 'page': 0}) }}';" 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('systeme3', {'systemePourUrl': systeme.systemePourUrl, 'idSysteme': systeme.id, 'onglet': systeme.onglet, 'lettre': 'all', 'page': 0}) }}">{% 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 == 'liste' %}<strong>{% trans %}liste{% endtrans %}</strong>{% endif %}{% if systemeAffichage != 'liste' %}<a href="?systeme_affichage=liste">{% trans %}liste{% endtrans %}</a>{% endif %}</div>
                {% for systeme in infosDuSysteme %}
                <div class="row" style="margin-top: 10px;"><a href="{{ path('systeme_infos', {'systemePourUrl': systeme.systemePourUrl, 'idSysteme': systeme.id}) }}">{% trans %}Voir les specs techniques{% endtrans %} {{ nomDuSysteme }}</a></div>
                {% endfor %}
            </div>
        </div>
        <div class="row" id="browse_version_depliee">
            <div class="col-md-5">
                <div class="row">{% if app.request.locale == 'fr' %}Chercher 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('systeme3', {'systemePourUrl': systeme.systemePourUrl, 'idSysteme': systeme.id, 'onglet': systeme.onglet, 'lettre': listelettres.lettre, 'page': 0}) }}';" 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('systeme3', {'systemePourUrl': systeme.systemePourUrl, 'idSysteme': systeme.id, 'onglet': systeme.onglet, 'lettre': listelettres.lettre, 'page': 0}) }}">{% 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('systeme3', {'systemePourUrl': systeme.systemePourUrl, 'idSysteme': systeme.id, 'onglet': systeme.onglet, 'lettre': 'all', 'page': 0}) }}';" 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('systeme3', {'systemePourUrl': systeme.systemePourUrl, 'idSysteme': systeme.id, 'onglet': systeme.onglet, 'lettre': 'all', 'page': 0}) }}">{% 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 == 'liste' %}<strong>{% trans %}liste{% endtrans %}</strong>{% endif %}{% if systemeAffichage != 'liste' %}<a href="?systeme_affichage=liste">{% trans %}liste{% endtrans %}</a>{% endif %}</div>
                {% for systeme in infosDuSysteme %}
                <div class="row" style="margin-top: 10px;"><a href="{{ path('systeme_infos', {'systemePourUrl': systeme.systemePourUrl, 'idSysteme': systeme.id}) }}">{% trans %}Voir les specs techniques{% endtrans %} {{ nomDuSysteme }}</a></div>
                {% endfor %}
            </div>
            <div class="col-md-6">
                {% for systeme in infosDuSysteme %}
           	 	<a href="{{ path('systeme_infos', {'systemePourUrl': systeme.systemePourUrl, 'idSysteme': systeme.id}) }}">
	                <div style="float: right;">
		                <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>
                	</div>
                </a>
                {% endfor %}
            </div>
        	<div class="col-md-12">
                <div class="row">
        		{% if app.request.locale == 'fr' %}
				<div class="container container_pepsia">
				<div class="row">
				<!-- Pepsia Player musee-des-jeux-video.com -->
				<div class="pepsia_player" data-token="00iW" data-corner="bottom-right" data-logo="0" data-controls="0"></div>
				<script type="text/javascript">(function(){var e=document.createElement("script"),f=document.getElementsByTagName("script")[0];e.src="//player.pepsia.com/sdk.js?d="+(new Date).getTime().toString(16);e.type="text/javascript";e.async=!0;f.parentNode.insertBefore(e,f);})();</script>
				<div class="both"></div>
				</div>
				</div>
				{% else %}<div id="VGMHB_ATF_728x90" class="newtab-grid"></div>{% endif %}
        		</div>
        	</div>
        </div>
    </div>
</div>
{% endblock %}

{% block pagination1 %}
<div class="text-center text-bold container">
    {% if nombrePages > 1 %}
    <div class="row">
        <div class="col-md-12 nbresultats_pagination1">
            {% if app.request.locale == 'fr' %}
            {{ debutPagination }} &agrave; {{ finPagination }} sur {{ totalJeuxDuSystemePourLettre }} jeux
            {% else %}
            {{ debutPagination }} - {{ finPagination }} of {{ totalJeuxDuSystemePourLettre }} games
            {% endif %}
        </div>
    </div>
    {% endif %}
    <div class="row">
        <div class="col-md-12">
            <div class="newtab-grid">
            <ul class="sync-pagination pagination">
            {% for systeme in infosDuSysteme %}
            {% for page in listingNumerotationPagination %}
                {% if ( page.numeroAffiche != 'laquo' ) and ( page.numeroAffiche != 'raquo' ) %}<li class="{{ page.classe }}"><a href="{{ path('systeme3', {'systemePourUrl': systeme.systemePourUrl, 'idSysteme': systeme.id, 'onglet': systeme.onglet, 'lettre': lettre, 'page': page.numero}) }}">{{ page.numeroAffiche }}</a></li>{% endif %}
                {% if page.numeroAffiche == 'laquo' %}<li class="{{ page.classe }}"><a href="{{ path('systeme3', {'systemePourUrl': systeme.systemePourUrl, 'idSysteme': systeme.id, 'onglet': systeme.onglet, 'lettre': lettre, 'page': page.numero}) }}">&laquo;</a></li>{% endif %}
                {% if page.numeroAffiche == 'raquo' %}<li class="{{ page.classe }}"><a href="{{ path('systeme3', {'systemePourUrl': systeme.systemePourUrl, 'idSysteme': systeme.id, 'onglet': systeme.onglet, 'lettre': lettre, 'page': page.numero}) }}">&raquo;</a></li>{% endif %}
            {% endfor %}
            {% endfor %}
            </ul>
            </div>
        </div>
    </div>
</div>
{% 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 onclick="document.location='{{ path('game', {'titreUrl': jeu.titreUrl, 'idSysteme': jeu.idSysteme, 'onglet': jeu.onglet, 'idJeu': jeu.idreel}) }}';" onmouseover="$('#span_screen_jeu_{{ jeu.idreel }}').show()" onmouseout="$('#span_screen_jeu_{{ jeu.idreel }}').hide()">
                    <a href="{{ path('game', {'titreUrl': jeu.titreUrl, 'idSysteme': jeu.idSysteme, 'onglet': jeu.onglet, 'idJeu': jeu.idreel}) }}"><img src="{{ asset( jeu.lien_screen ) }}" alt="{{ jeu.titrePropre }}" title="{{ jeu.titrePropre }}" border="0" class="jeu_screenshot"></a>
                    <span id="span_screen_jeu_{{ jeu.idreel }}" class="titre_dessus_screen" style="display:none;">{{ jeu.titrePropreTronque }}</span>
                </div>
                {% endif %}
                {% if jeu.clone != 0 %}
                <div onclick="document.location='{{ path('game', {'titreUrl': jeu.titreUrl, 'idSysteme': jeu.idSysteme, 'onglet': jeu.onglet, 'idJeu': jeu.clone}) }}';" onmouseover="$('#span_screen_jeu_{{ jeu.idreel }}').show()" onmouseout="$('#span_screen_jeu_{{ jeu.idreel }}').hide()">
                    <a href="{{ path('game', {'titreUrl': jeu.titreUrl, 'idSysteme': jeu.idSysteme, 'onglet': jeu.onglet, 'idJeu': jeu.clone}) }}"><img src="{{ asset( jeu.lien_screen ) }}" alt="{{ jeu.titrePropre }}" title="{{ jeu.titrePropre }}" border="0" class="jeu_screenshot"></a>
                    <span id="span_screen_jeu_{{ jeu.idreel }}" class="titre_dessus_screen" style="display:none;">{{ jeu.titrePropreTronque }}</span>
                </div>
                {% endif %}
            {% endfor %}
            </div>
        {% endif %}

        {% if systemeAffichage == 'liste' %}
            <table id="simple-example-table" cellspacing="0">
                <tbody>
                    <tr class="thead" align="left">
                        <th width="50%">{% trans %}Titre{% endtrans %}</th>
                        <th width="12%">{% trans %}Ann&eacute;e{% endtrans %}</th>
                        <th width="12%">{% trans %}Genre{% endtrans %}</th>
                    </tr>
                    {% for jeu in listeDesJeux %}
                    <tr>
                        {% if jeu.clone == 0 %}
                        <td><a href="{{ path('game', {'titreUrl': jeu.titreUrl, 'idSysteme': jeu.idSysteme, 'onglet': jeu.onglet, 'idJeu': jeu.idreel}) }}">{{ jeu.titrePropre }}</a></td>
                        {% endif %}
                        {% if jeu.clone != 0 %}
                        <td><a href="{{ path('game', {'titreUrl': jeu.titreUrl, 'idSysteme': jeu.idSysteme, 'onglet': jeu.onglet, 'idJeu': jeu.clone}) }}">{{ jeu.titrePropre }}</a></td>
                        {% endif %}
                        <td>{% if ( jeu.annee != 0 ) %}{{ jeu.annee }}{% endif %}{% if ( jeu.annee == 0 ) %}????{% endif %}</td>
                        {% if app.request.locale == 'fr' %}
                        <td>{{ jeu.genre }}</td>
                        {% else %}
                        <td>{{ jeu.genre.genreEn }}</td>
                        {% endif %}
                    </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>
        {% 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 systeme in infosDuSysteme %}
            {% for page in listingNumerotationPagination %}
                {% if ( page.numeroAffiche != 'laquo' ) and ( page.numeroAffiche != 'raquo' ) %}<li class="{{ page.classe }}"><a href="{{ path('systeme3', {'systemePourUrl': systeme.systemePourUrl, 'idSysteme': systeme.id, 'onglet': systeme.onglet, 'lettre': lettre, 'page': page.numero}) }}">{{ page.numeroAffiche }}</a></li>{% endif %}
                {% if page.numeroAffiche == 'laquo' %}<li class="{{ page.classe }}"><a href="{{ path('systeme3', {'systemePourUrl': systeme.systemePourUrl, 'idSysteme': systeme.id, 'onglet': systeme.onglet, 'lettre': lettre, 'page': page.numero}) }}">&laquo;</a></li>{% endif %}
                {% if page.numeroAffiche == 'raquo' %}<li class="{{ page.classe }}"><a href="{{ path('systeme3', {'systemePourUrl': systeme.systemePourUrl, 'idSysteme': systeme.id, 'onglet': systeme.onglet, 'lettre': lettre, 'page': page.numero}) }}">&raquo;</a></li>{% endif %}
            {% endfor %}
            {% endfor %}
            </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}