{% extends 'role/member/admin/games/game_homepage.html.twig' %}

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

	#member_template_layout
	{
		display: flex;
		flex-direction: column;
		min-height: 800px;
	}

	#route_game_books
	{
		background-color: #ecf0f1;
	}
	
	#route_users
	{
		background-color: #797d7f;
	}

	#route_game_homepage
	{
		background-color: #797d7f;
	}
	
	#icon_available {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-weight: bold;
}

.list li p
{
    margin: 0px 10px 0px 0px;
}
    
{% endblock %}



        {% block breadcrumbs %}
            {{ parent() }}
            <a href=""> > </a>
            <a href=""> liste des jeux</a>
            <a href=""> > </a>
            <a href="">{{ game.name }}</a>            
        {% endblock %}
          
       
        {% block area_user %}
            {{ parent() }}   
        {% endblock %} 
         

        {% block title_page %}
            {{ title }}
        {% endblock %}
 
    

        {% block body_content %}
                
	    <a href="{{ path('admin_book_new', {'userid': app.user.id, 'gameid':game.id}) }}"><button class="btn-add">nouveau supplément</button></a>
	    
	       {% if books | length == 0 %}
               <p>Il n'y a aucun supplément crée actuellement.</p>
           {% else %}
           
		        <ul class="list">   
			    {% for book in books %}
		
					<li>
						<img alt="poster" src="{{ asset('uploads/games/'~ book.poster) }}" >
			       		<a href="{{ path('admin_book_homepage', {'userid': app.user.id, 'gameid': book.game.id, 'bookid': book.id}) }}">{{ book.name }}</a>
			       		<p id="icon_available" style="background-color: {% if book.isAvailable %}green{% else %}red{% endif %};"></p> 
			       	</li>
			    {% endfor %}
			    </ul>
	    	{% endif %}	
        
        {% for label, messages in app.flashes %}
    {% for message in messages %}
        <div class="alert alert-{{ label }}">
            {{ message }}
        </div>
    {% endfor %}
{% endfor %}
        
        {% endblock %}
  
                        




{% block javascript %}
    {{ parent() }}
    
    
    function setColor (element)
    {
        id= element.id;
        if(id="profile")
        {
        
        }
        else
        {
        
        }
    }
    
{% endblock %}