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

{% block meta_og_title %}
{% apply spaceless %}
    {% if app.request.locale == 'fr' %}
        Liste de tous les systemes disponibles sur Le Musee des Jeux Video
    {% else %}
        All the systems available on The Video Games Museum
    {% endif %}
{% endapply %}
{% 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 %}
{% apply spaceless %}
    {% if app.request.locale == 'fr' %}
        Liste de tous les systemes disponibles sur Le Musee des Jeux Video
    {% else %}
        All systems of The Video Games Museum
    {% endif %}
{% endapply %}
{% endblock %}

{% block meta_description %}
{% apply spaceless %}
    {% if app.request.locale == 'fr' %}
        Liste de tous les systemes disponibles sur Le Musee des Jeux Video
    {% else %}
        All systems of The Video Games Museum
    {% endif %}
{% endapply %}
{% endblock %}

{% block chemin %}<div><a href="{{ path('homepage') }}">{% trans %}Accueil{% endtrans %}</a> > <h1 class="chemin_h1_normal">{% trans %}Liste de tous les syst&egrave;mes{% endtrans %}</h1></div>{% endblock %}

{% block sous_chemin %}
{% endblock %}

{% block body %}
<div class="row">
    <div class="col-md-12" style="margin-top: 10px; margin-bottom: 10px;">
        <div><h2>{% trans %}ARCADE{% endtrans %}</h2></div>
        {% for systeme in listeSystemes %}
            {% if systeme.categorie == 'Arcade' %}
            <div class="blocs-systeme">
                <div class="photo_systeme"><a href="{{ path('systeme3', {'systemePourUrl': systeme.systemePourUrl, 'idSysteme': systeme.id, 'onglet': systeme.onglet, 'lettre': 'all', 'page': 0}) }}"><img src="{{ asset( 'screenshots/' ~ systeme.repertoire ~ '/system_site.png' ) }}" width="194" height="120" border="0" alt="{{ systeme.systemePropre }}" title="{{ systeme.systemePropre }}"></a></div>
                <div style="margin-left: 6px; margin-top: 4px;">
                    <a class="lien_noir" href="{{ path('systeme3', {'systemePourUrl': systeme.systemePourUrl, 'idSysteme': systeme.id, 'onglet': systeme.onglet, 'lettre': 'all', 'page': 0}) }}">{{ systeme.systemePropre }}</a>
                </div>
            </div>
            {% endif %}
        {% endfor %}
        <div style="clear:both;"><br /><h2>{% trans %}CONSOLES{% endtrans %}</h2></div>
        {% for systeme in listeSystemes %}
            {% if systeme.categorie == 'Consoles' %}
            <div class="blocs-systeme">
                <div class="photo_systeme"><a href="{{ path('systeme3', {'systemePourUrl': systeme.systemePourUrl, 'idSysteme': systeme.id, 'onglet': systeme.onglet, 'lettre': 'all', 'page': 0}) }}"><img src="{{ asset( 'screenshots/' ~ systeme.repertoire ~ '/system_site.png' ) }}" width="194" height="120" border="0" alt="{{ systeme.systemePropre }}" title="{{ systeme.systemePropre }}"></a></div>
                <div style="margin-left: 6px; margin-top: 4px;">
                    <a class="lien_noir" href="{{ path('systeme3', {'systemePourUrl': systeme.systemePourUrl, 'idSysteme': systeme.id, 'onglet': systeme.onglet, 'lettre': 'all', 'page': 0}) }}">{{ systeme.systemePropre }}</a>
                </div>
            </div>
            {% endif %}
        {% endfor %}
        <div style="clear:both;"><br /><h2>{% trans %}ORDINATEURS{% endtrans %}</h2></div>
        {% for systeme in listeSystemes %}
            {% if systeme.categorie == 'Ordinateurs' %}
            <div class="blocs-systeme">
                <div class="photo_systeme"><a href="{{ path('systeme3', {'systemePourUrl': systeme.systemePourUrl, 'idSysteme': systeme.id, 'onglet': systeme.onglet, 'lettre': 'all', 'page': 0}) }}"><img src="{{ asset( 'screenshots/' ~ systeme.repertoire ~ '/system_site.png' ) }}" width="194" height="120" border="0" alt="{{ systeme.systemePropre }}" title="{{ systeme.systemePropre }}"></a></div>
                <div style="margin-left: 6px; margin-top: 4px;">
                    <a class="lien_noir" href="{{ path('systeme3', {'systemePourUrl': systeme.systemePourUrl, 'idSysteme': systeme.id, 'onglet': systeme.onglet, 'lettre': 'all', 'page': 0}) }}">{{ systeme.systemePropre }}</a>
                </div>
            </div>
            {% endif %}
        {% endfor %}
        <div style="clear:both;"><br /><h2>{% trans %}Pong{% endtrans %}</h2></div>
        {% for systeme in listeSystemes %}
            {% if systeme.categorie == 'Pong' %}
            <div class="blocs-systeme">
                <div class="photo_systeme"><a href="{{ path('systeme3', {'systemePourUrl': systeme.systemePourUrl, 'idSysteme': systeme.id, 'onglet': systeme.onglet, 'lettre': 'all', 'page': 0}) }}"><img src="{{ asset( 'screenshots/' ~ systeme.repertoire ~ '/system_site.png' ) }}" width="194" height="120" border="0" alt="{{ systeme.systemePropre }}" title="{{ systeme.systemePropre }}"></a></div>
                <div style="margin-left: 6px; margin-top: 4px;">
                    <a class="lien_noir" href="{{ path('systeme3', {'systemePourUrl': systeme.systemePourUrl, 'idSysteme': systeme.id, 'onglet': systeme.onglet, 'lettre': 'all', 'page': 0}) }}">{{ systeme.systemePropre }}</a>
                </div>
            </div>
            {% endif %}
        {% endfor %}
        <div style="clear:both;"><br /><h2>{% trans %}AUTRES{% endtrans %}</h2></div>
        {% for systeme in listeSystemes %}
            {% if systeme.categorie == 'Autres' %}
            <div class="blocs-systeme">
                <div class="photo_systeme"><a href="{{ path('systeme3', {'systemePourUrl': systeme.systemePourUrl, 'idSysteme': systeme.id, 'onglet': systeme.onglet, 'lettre': 'all', 'page': 0}) }}"><img src="{{ asset( 'screenshots/' ~ systeme.repertoire ~ '/system_site.png' ) }}" width="194" height="120" border="0" alt="{{ systeme.systemePropre }}" title="{{ systeme.systemePropre }}"></a></div>
                <div style="margin-left: 6px; margin-top: 4px;">
                    <a class="lien_noir" href="{{ path('systeme3', {'systemePourUrl': systeme.systemePourUrl, 'idSysteme': systeme.id, 'onglet': systeme.onglet, 'lettre': 'all', 'page': 0}) }}">{{ systeme.systemePropre }}</a>
                </div>
            </div>
            {% endif %}
        {% endfor %}
    </div>
</div>
{% endblock %}