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

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

    #game_layout
    {
        min-height: 500x;
        width: 80%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    h2
    {
       margin-left: 20px;
    }

    .list
    {
        width: 100%;
        height: 600px;
        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: 90%;
    }

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

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

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

       

{% endblock %}


{% block breadcrumb %}
{{ parent() }}
    <a href="{{ path('admin_games') }}" class="breadcrumb" >> jeux</a>
    <a href="{{ path('admin_game', {'gameid': game.id}) }}" class="breadcrumb" >> {{ game.name }}</a>
{% endblock %}

{% block member_content %}           
    <h1>{{ title }}</h1> 
    <div>
        <a href="{{ path('admin_book_new', {'gameid':game.id}) }}"><button class="btn-add">nouveau supplément</button></a>
        <a href="{{ path('admin_game_rules_configuration', {'gameid':game.id}) }}"><button class="btn-add">configurer les règles</button></a>
    </div>
    
    <div>
        <p>
            Les suppléments ci-dessous, dans le cas où ils sont considérés comme disponibles, apportent leur contribution au contenu du système de règles. 
        </p>
    </div>
    
    <h2>suppléments</h2>
    
    <div id="game_layout">
    
        {% for book in books %}
            <div class="list">
                <div class=list_header>
                    <div class="list_header_title">
                        <a href=""><h3>{{ book.name }}</h3></a>
                    </div>
                    <div class="list_header_label">
                        {% if book.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=""><img src="{{ asset('uploads/games/'~ book.poster) }}"  alt="{{ book.code }}" ></a>
                    </div>
                    <div class="list_body_description">
                        <p>{{ book.description }}</p>
                    </div>
                </div>
            </div>
       
        
            
        {% endfor %}
    
    </div>

        
{% endblock %}

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