{% extends 'Default/parameters.html.twig' %}

{% block html %}
{% apply spaceless %}
{% set firstMenus = [] %}
{% set lastMenus = [] %}
{% set menus = [] %}

{% set submenus = [] %}
{% set submenus = submenus|merge([{label:"Nos agences"|os_trans("Our agencies"), href: url("agencies") }]) %}
{% set submenus = submenus|merge([{label:"Nos distributeurs automatiques"|os_trans("ATMs"), href: url("gabs") }]) %}
{% set submenus = submenus|merge([{label:"Nos Succursales"|os_trans("Our branches"), href: url("branchs") }]) %}
{% set submenus = submenus|merge([{separator:true }]) %}
{% set submenus = submenus|merge([{label:"Vision et mission"|os_trans("Vision and mission"), href: url("about") }]) %}
{% set submenus = submenus|merge([{label:"Nos Valeurs"|os_trans("Our values"), href: url("values") }]) %}
{% set submenus = submenus|merge([{label:"Historique"|os_trans("History"), href: url("history") }]) %}
{% set submenus = submenus|merge([{label:"Comité de direction"|os_trans("Executive committee"), href: url("members") }]) %}
{% set firstMenus = firstMenus|merge({'about':{label:"Nous découvrir"|os_trans("Discover us"), submenus: submenus, id:'about'}}) %}

{% set submenus = [] %}
{% for o in articlesCats %}
{% set submenus = submenus|merge([{label:o|os_trans('name'), href: url("articles-cat",{cat:o.slug}) }]) %}
{% endfor %}
{% set submenus = submenus|merge([{separator:true }]) %}
{% for o in resourcesCats %}
{% set submenus = submenus|merge([{label:o|os_trans('label'), href: url("resources-cat",{slug:o.slug}) }]) %}
{% endfor %}
{% set lastMenus = lastMenus|merge({'articles':{label:"Nos publications"|os_trans("Our posts"), href:url("articles"), submenus: submenus, id:'articles'}}) %}


{% set menus = menus|merge(firstMenus) %}
{% if contentMenus is defined %}
{% set menus = menus|merge(contentMenus) %}
{% endif %}
{% set menus = menus|merge(lastMenus) %}



{% block content %}
{% if isMobile() %}
<div class=''>
    <ul class='list h4 upper flex col vt-15-in gpadding white'>
        {% for o in menus %}
        <li class='vt-3-in relative'>
			{% if o.href is defined and o.href and o.submenus is not defined %}
            <a href='{{o.href}}' class='vt-8-in nowrap flex col middle relative pointer medium'>{{o.label}}</a>
            {% else %}
            <span class='vt-8-in nowrap flex row space middle relative pointer medium os-click' data-target='next'>
				<span>{{o.label}}</span>
				<i class='fa fa-chevron-down'></i>
			</span>
            {% endif %}
            {% if o.submenus is defined %}
            <ul class='absolute shadow transition-1s bg-white p-alt text-left success medium hz-20-in vt-20-in overflow-scroll ytop-100 anim-display anim-from-right' style="z-index: 1; max-height: 60vh">
                {% for k in o.submenus %}
                <li class='relative'>
                    {% if k.separator is not defined %}
                    <a href='{{k.href ?? "#"}}' class='flex col middle relative pointer vt-8-in {{k.important is defined ? "semibold black" : "left-20-in"}}'>{{k.label}}</a>
                    {% else %}
                    <i class="block vt-1-in vt-5 bg-warning"></i>
                    {% endif %}
                </li>
                {% endfor %}
            </ul>
            {% endif %}
        </li>
        {% endfor %}
    </ul>
</div>
{% else %}
<div class='fill top'>
    <ul class='list flex row center p black fill text-center'>
        {% for o in menus %}
        <li class='relative h100 menu transition {{activeMenu == o.id ? "active"}}'>
            {% if o.href is defined and o.href %}
            <a href='{{o.href}}' class='nowrap transition relative pointer iflex row middle h100'>
                <span class='vt-5-in hz-15-in'>{{o.label}}</span>
            </a>
            {% else %}
            <span class='transition relative pointer iflex row middle h100'>
                <span class='vt-5-in hz-15-in'>{{o.label}}</span>
            </span>
            {% endif %}

            {% if o.id == 'accounts' %}
            <div class='special absolute shadow transition-1s text-left success medium vt-30-in hz-30-in hoverflow ytop-100'>
                <i class="absolute fill top left bg-white"></i>
                <div class="w100 flex row wrap space relative">
                    <div class="half-20 flex col">
                        <h4 class="h6 black bottom-10"><a href="{{url('currentaccounts')}}">{{"Comptes courants"|os_trans("Current accounts")}}</a></h4>
                        {% for k in currentAccounts %}
                        <a class="flex row p middle" href="{{url('currentaccount',{slug:k.slug})}}">
                            <i class="bg-warning padding-2 circle transition right-10"></i>
                            <span>{{k|os_trans("label")}}</span>
                        </a>
                        {% endfor %}
                    </div>
                    <div class="half-20 flex col">
                        <h4 class="h6 black bottom-10"><a href="{{url('savingaccounts')}}">{{"Comptes épargnes"|os_trans("Saving accounts")}}</a></h4>
                        {% for k in savingAccounts %}
                        <a class="flex row p middle" href="{{url('savingaccount',{slug:k.slug})}}">
                            <i class="bg-warning padding-2 circle transition right-10"></i>
                            <span>{{k|os_trans("label")}}</span>
                        </a>
                        {% endfor %}
                    </div>
                    <div class="half-20 flex col top-40">
                        <h4 class="h6 black bottom-10"><a href="{{url('mutualfunds')}}">{{"Fonds communs de placement"|os_trans("Mutual funds")}}</a></h4>
                        {% for k in mutualFunds %}
                        <a class="flex row p middle" href="{{url('mutualfund',{slug:k.slug})}}">
                            <i class="bg-warning padding-2 circle transition right-10"></i>
                            <span>{{k|os_trans("label")}}</span>
                        </a>
                        {% endfor %}
                    </div>
                    <div class="half-20 flex col top-40">
                        <h4 class="h6 black bottom-10"><a href="{{url('DAT')}}">{{"Dépôts à terme"|os_trans("Term deposits")}}</a></h4>
                    </div>
                </div>
            </div>
            {% elseif o.submenus is defined %}
            <ul class='absolute shadow transition-1s p text-left success vt-20-in hz-40-in hoverflow ytop-100'>
                <i class="absolute fill top left bg-white"></i>
                {% for k in o.submenus %}
                <li class='relative'>
                    {% if k.separator is not defined %}
                    <a href='{{k.href is defined ? k.href : "#"}}' class='flex col middle relative pointer vt-5-in {{k.important is defined ? "bold h6 black"}}'>{{k.label}}</a>
                    {% else %}
                    <i class="block top-1-in vt-8 bg-gray-alt"></i>
                    {% endif %}
                </li>
                {% endfor %}
            </ul>
            {% endif %}
        </li>
        {% endfor %}
    </ul>
</div>
{% endif %}

{% endblock %}

{% endapply %}
{% endblock %}