<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Small data{% endblock %}</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css">

        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css"
              integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
              crossorigin=""/>
        <!-- Make sure you put this AFTER Leaflet's CSS -->
        <script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"
                integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q=="
                crossorigin=""></script>
        <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.48.0/mapbox-gl.css' rel='stylesheet' />
        <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.48.0/mapbox-gl.js'></script>

        <link rel="stylesheet" href="{{ asset('css/main.css') }}">

        {% block head_scripts %}
        {% endblock %}

        {% block stylesheets %}
               {% endblock %}




    </head>
    <body>
    {#CHECK https://codepen.io/KrupeshAnadkat/pen/bjwKqG?editors=1010#}
    {#https://www.youtube.com/watch?v=87ONyGaOlh4#}
    {#https://stackoverflow.com/questions/44467377/bootstrap-4-multilevel-dropdown-inside-navigation#}

    <nav class="navbar navbar-expand-md navbar-dark bg-primary">
        <a class="navbar-brand" href="{{ path('home') }}">Small data</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                {#<li class="nav-item">#}
                    {#<a class="nav-link" href="#">About the site</a>#}
                {#</li>#}
                <li class="nav-item dropdown">
                    <a class=" nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Species </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">

                        {% for phylum in phyla %}
                        <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="{{ path('index_species_per_phylum', {'idPhylum': phylum.id}) }}">{{ phylum.phylumNameWorms }}</a>
                            <ul class="dropdown-menu">
                                <li class="dropdown-submenu"><a class="dropdown-item" href="{{ path('index_species_per_phylum', {'idPhylum': phylum.id}) }}">List</a>
                               {% for singleSpecies in phylum.species %}
                                <li class="dropdown-submenu"><a href="#" class="dropdown-item dropdown-toggle"><i>{{ singleSpecies.speciesNameWorms }}</i></a>
                                    <ul class="dropdown-menu">
                                        <li ><a href="{{ path('species_details', {'idSpecies': singleSpecies.id}) }}" class="dropdown-item ">Details</a></li>
                                        <li ><a href="{{ path('occurrences_list', {'idSpecies': singleSpecies.id}) }}" class="dropdown-item ">Occurrences list</a></li>
                                    </ul>
                                </li>
                                {% endfor %}
                            </ul>
                        </li>
                        <div class="dropdown-divider"></div>
                        {% endfor %}
                    </ul>
                </li>
                
                {% if app.user and 'ROLE_VALIDATOR' in app.user.roles %}
                    <li class="nav-item dropdown">
                        <a href="" class="nav-link dropdown-toggle" id="navbarDropdwon" role="button"  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Validation</a>
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                            {#<li><a href="" class="dropdown-item">Your expertise</a></li>#}

                            {% for expertise in app.user.phylumOfExpertise %}
                                <li ><a href="{{ path('non_valid_list_for_phylum', {'idPhylum': expertise.id}) }}" class="dropdown-item ">{{ expertise.phylumNameWorms }}</a>



                                </li>
                            {% endfor %}

                        </ul>
                    </li>
                {% endif %}


                {% if app.user and 'ROLE_ADMINISTRATOR' in app.user.roles %}
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Admin</a>
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <li ><a href="{{ path('admin_species') }}" class="dropdown-item ">Species</a></li>
                            <li ><a href="{{ path ('admin_users') }}" class="dropdown-item ">Users</a></li>

                        </ul>

                    </li>

                {% endif %}

                {% if app.user %}
                    <li class="nav-item">
                        <a class="nav-link" href="{{ path('security_logout') }}">Logout</a>
                    </li>
                {% else %}
                    <li class="nav-item">
                        <a class="nav-link" href="{{ path('security_registration') }}">Registration</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ path('security_login') }}">Login</a>
                    </li>
                {% endif %}



            </ul>

        </div>

        {#Logger status on the right of the navbar#}
        <div>
                {% if app.user %}
                    <p class="navbar-brand">You are logged in as: '{{ app.user.username }}'(
                        {% if 'ROLE_ADMINISTRATOR' in (app.user.roles)  %}
                        administrator
                        {% elseif ('ROLE_VALIDATOR' in app.user.roles) and ('ROLE_ADMINISTRATOR' not in (app.user.roles)) %}
                        validator
                        {% else %}
                        inputter
                        {% endif %}
                    )</p>

                {% endif %}
        </div>
    </nav>


    <div class="container">
        {% block body %}{% endblock %}
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

    <script>
        $('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
            if (!$(this).next().hasClass('show')) {
                $(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
            }
            var $subMenu = $(this).next(".dropdown-menu");
            $subMenu.toggleClass('show');


            $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
                $('.dropdown-submenu .show').removeClass("show");
            });


            return false;
        });

    </script>



    {% block scripts_bottom %}

        {% endblock %}
    </body>
</html>
