{% extends 'members/admin/games/rules_configuration.html.twig' %}

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

  

{% endblock %}

{% block main_content %}

    <div id="breadcrumb">
        <ul>
    {% block breadcrumb %}
        {{ parent() }}
        <li><a href="{{ path('admin_games', {'id': app.user.id}) }}" class="breadcrumb" >> jeux</a></li>        
        <li><a href="{{ path('admin_books', {'id': app.user.id, 'gameid': book.game.id}) }}" class="breadcrumb" >> suppléments de {{ book.game.code }}</a></li>
        <li><a href="{{ path('admin_games', {'id': app.user.id}) }}" class="breadcrumb" >> règles du supplément {{ book.name }}</a></li>        
    {% endblock %}
        </ul>
    </div>
    
    {% block tab_bar %}
        <div class="tab">
          <a href="{{ path('admin_dashboard', {'id': app.user.id}) }}"><button class="tablinks" >tableau de bord</button></a>        
          <a href="{{ path('admin_games', {'id': app.user.id}) }}"><button class="tablinks" >jeux</button></a>
          <a href=""><button class="tablinks" >utilisateurs</button></a>
          <a href=""><button class="tablinks" >personnages</button></a>
          <a href=""><button class="tablinks" >campagnes</button></a>
          <a href=""><button class="tablinks">configuration</button></a>    
        </div>
    {% endblock %}
  
 
    {% block content %}
        

        <h1>{{ title }}</h1> 
            <div id="content-config-layout">
                
                <div id="configuration-menu">
                    {% block menu %}
                    {% include 'members/admin/games/game/'~ book.game.code ~'_menu.html.twig' %}
                    
                    {% endblock %}
                </div>
                       
                <div id="admin-config-layout">
                    {% block components %}
        
                        <a href="{{ path('admin_component_new', {'id': app.user.id, 'gameid': book.game.id, 'bookid': book.id, 'component': component}) }}"><button class="btn-add">{{ add_button }}</button></a>
                        <ul>
                            {% for element in components %}
                                <li>{{ element.name }}</li>
                            {% endfor %}    
                        </ul>

                    {% endblock %}
                </div>
            </div>
   
              

    {% endblock %}

{% endblock %}

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

</script>

{% endblock %}