{% extends 'members/admin/admin_template.html.twig' %}

{% block stylesheets %}
    {{ parent() }} 


    #games_layout
    {
        min-height: 500x;
        width: 100%;
        width: 80%;
        display: flex;
        flex-direction: column;
    }

    .list
    {
        width: 100%;
        height: 400px;
        margin-bottom: 50px;
    }
    
    .list_header
    {
        display: flex;
        flex-direction: row;
        height: 30px;
        width: 100%;
        margin-bottom: 10px;
    }

    .list_header_title, .list_header_label
    {
        height: 100%;
    }
    
    .list_header_title
    {
        background-color:  #ebac4b; 
        flex: 4;
        border-right: 1px solid;
        margin-right: 2px; 
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    
    .list_header_title h3
    {
        margin-left: 20px;
    }
    
    .list_header_label
    {
        flex: 1;
        margin-left: 2px;
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        height: 100%;
    }
    
    .list_header_label h3
    {
        margin-left: 20px;
    }    
    
    .list_body
    {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 340px;
    }

    .list_body_poster, .list_body_description
    {
        height: 100%;
    }

    .list_body_poster
    {
        height: 100%;
        width:50%;
    }

    .list_body_poster img
    {
        height: 100%;
        width:100%;
    }
        
    
    .list_body_description
    {
        height: 100%;
        width: 50%;
        margin-left: 20px; 
    }


       

{% endblock %}


{% block breadcrumb %}
{{ parent() }}
    <a href="" class="breadcrumb" >> jeux</a>
{% endblock %}

{% block member_content %}           
    <h1>{{ title }}</h1> 
    <a href="{{ path('admin_game_new', {'id':app.user.id}) }}"><button class="btn-add">nouveau jeu</button></a>        

    <div id="games_layout">
        {% for game in games %}
            <div class="list">
                <div class=list_header>
                    <div class="list_header_title">
                        <a href="{{ path('admin_books', {'id': app.user.id, 'gameid': game.id}) }}"><h3>{{ game.name }}</h3></a>
                    </div>
                    <div class="list_header_label">
                        {% if game.isAvailable == true %}
                            <div class="list_header_label background-green">
                                <h3 class="font-white">disponible</h3>
                            </div>    
                        {% else %}
                            <div class="list_header_label background-red">
                                <h3 class="font-white">indisponible</h3>
                            </div>
                        {% endif %}
                    </div>
                </div>
                <div class="list_body">
                    <div class="list_body_poster">
                        <a href="{{ path('admin_books', {'id': app.user.id, 'gameid': game.id}) }}"><img src="{{ asset('uploads/games/'~ game.poster) }}"  alt="{{ game.code }}" ></a>
                    </div>
                    <div class="list_body_description">
                        <p>{{ game.description }}</p>
                    </div>
                </div>
            </div>
        
        
        {% endfor %}
  </div>
  
        
{% endblock %}

{% block javascript %}
    {{ parent() }}



{% endblock %}