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

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

        #content-layout
        {
            width:100%;
            min-height: 800px;
            display:flex;
            flex-direction:column;
            align-items: center;
            justify-content: center;
        }
        
    
        .card 
        {
            background-color: #fff;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 10px 5px 13px -1px rgba(0,0,0,0.94);
            width: 600px;
        }
        
        .card div 
        {
            margin-bottom: 15px;
        }
        
        .card input, .card button 
        {
            width: 100%;
            padding: 20px;
            border: none;
            border-bottom: 2px solid #ccc;
            outline: none;
            transition: border-color 0.3s;
        }
        
        .card input:focus 
        {
            border-color: #6200ea;
        }
        
        .card button 
        {
            background-color: #6200ea;
            color: #fff;
            border-radius: 5px;
            cursor: pointer;
            border: none;
            font-size: 16px;
        }
        
        .card button:hover 
        {
            background-color: #3700b3;
        }
        
        .card label 
        {
            font-weight: bold;
            display: block;
            margin-bottom: 5px;
        }         

{% 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_game_new', {'id': app.user.id}) }}" class="breadcrumb" >> nouveau jeu</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 %}
        
<div id="content-layout">  
 
        <h1>Formulaire de création d'un jeu de rôle</h1> 
    
        <div class="card">    
            {{ form(form) }}
        </div>

</div>         

    {% endblock %}

{% endblock %}

{% block javascript %}
    {{ parent() }}
        document.addEventListener("DOMContentLoaded", function() {
            var acc = document.getElementsByClassName("accordion-button");
            for (var i = 0; i < acc.length; i++) {
                acc[i].addEventListener("click", function() {
                    this.classList.toggle("active");
                    var panel = this.nextElementSibling;
                    if (panel.style.display === "block") {
                        panel.style.display = "none";
                    } else {
                        panel.style.display = "block";
                    }
                });
            }
        });
</script>

{% endblock %}