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

{% macro menu(o) %}
    {% if o.href is defined and o.href %}
    <a href='{{o.href}}' class='upper block bold top-20'>{{o.label}}</a>
    {% else %}
    <span class='upper block bold top-20'>{{o.label}}</span>
    {% endif %}
    {% if o.submenus is defined %}
    <ul class='p-alt text-left white flex col'>
        {% for k in o.submenus %}
        <li class='relative'>
            <a href='{{k.href}}' class='vt-5-in adapt block'>{{k.label}}</a>
        </li>
        {% endfor %}
    </ul>
    {% endif %}
{% endmacro %}


{% block html %}



<footer id="footer" class="bg-success relative gpadding flex col {{desktop('vt-80-in')}} {{mobile('vt-40-in')}}">
    <figure class="absolute top left fill hoverflow {{desktop('')}} {{mobile('')}}">
        <img src="{{asset('images/footer-bg.jpg')}}" class="block cover">
    </figure>
    <div class="relative bottom-80-in">
        <figure class="relative block-center {{desktop('w100 quarter-80 hz-40-in')}} {{mobile('half')}}">
            <img src="{{asset(os_param('logowhite'))}}" class="block w100 {{desktop('')}} {{mobile('')}}">
        </figure>
        <ul class="list flex row center top-30 vt-20-in h6 white upper light border border-noleft border-noright border-solid border-gray-alt border-1x">
            {% for o in customerTypes %}
            <li>
                <a class="hz-20-in {{customerType == o.slug ? 'medium'}}" href="{{path('home-customer',{slug:o.slug})}}">{{o|os_trans("label")}}</a>
            </li>
            {% endfor %}
        </ul>
        <div class="flex row space {{mobile('wrap center text-center ')}}">
            <ul class='w100 list p w100 {{desktop("flex space row wrap top right-40")}} {{mobile("")}}'>
                <li class='{{desktop("third-40 top-40 ")}} {{mobile("w100 top-15")}}'>
                    <h5 class="h6 white medium bottom-10">{{"Nos comptes"|os_trans("Our accounts")}}</h5>
                    <ul class="gray-alt">
                        <li><a href="{{path('currentaccounts')}}">{{"Comptes courants"|os_trans("Current accounts")}}</a></li>
                        <li><a href="{{path('savingaccounts')}}">{{"Comptes épargnes"|os_trans("Saving accounts")}}</a></li>
                        <li><a href="{{path('mutualfunds')}}">{{"Fonds communs de placement"|os_trans("Mutual funds")}}</a></li>
                        <li><a href="{{path('DAT')}}">{{"Dépôts à terme"|os_trans("Term deposits")}}</a></li>
                    </ul>
                </li>
                <li class='{{desktop("third-40 top-40 ")}} {{mobile("w100 top-15")}}'>
                    <h5 class="h6 white medium bottom-10">{{"Autres produits"|os_trans("Other products")}}</h5>
                    <ul class="gray-alt">
                        <li><a href="{{path('credits')}}">{{"Prêts"|os_trans("Loans")}}</a></li>
                        <li><a href="{{path('insurances')}}">{{"Assurances"|os_trans("Insurances")}}</a></li>
                        <li><a href="{{path('nova-plus')}}">Nova Plus</a></li>
                        <li><a href="{{path('cards')}}">{{"Cartes bancaires"|os_trans("Bank cards")}}</a></li>
                    </ul>
                </li>
                <li class='{{desktop("third-40 top-40 ")}} {{mobile("w100 top-15")}}'>
                    <h5 class="h6 white medium bottom-10">{{"Publications"|os_trans("Posts")}}</h5>
                    <ul class="gray-alt">
                        {% for o in articlesCats %}
                        <li><a href="{{path('articles-cat',{cat:o.slug})}}">{{o|os_trans("name")}}</a></li>
                        {% endfor %}
                        <li><a href="{{path('resources')}}">Documentation</a></li>
                    </ul>
                </li>
                <li class='{{desktop("third-40 top-40 ")}} {{mobile("w100 top-15")}}'>
                    <h5 class="h6 white medium bottom-10">{{"Services clients"|os_trans("Customer services")}}</h5>
                    <ul class="gray-alt">
                        <li><a href="{{path('complaint')}}">{{"Faire une réclamation"|os_trans("Make a claim")}}</a></li>
                        <li><a href="{{path('denunciation')}}">{{"Dénoncer un fait"|os_trans("Report a fact")}}</a></li>
                    </ul>
                    <h5 class="h6 white medium bottom-10 top-30">{{"Simulateurs"|os_trans("Simulators")}}</h5>
                    <ul class="gray-alt">
                        <li><a href="{{path('simulator-credit')}}">{{"Prêt"|os_trans("Loans")}}</a></li>
                        <li><a href="{{path('simulator-capacity')}}">{{"Capacité d'emprunt"|os_trans("Borrowing capacity")}}</a></li>
                    </ul>
                </li>
                <li class='{{desktop("third-40 top-40 ")}} {{mobile("w100 top-15")}}'>
                    <h5 class="h6 white medium bottom-10">{{"Réseau NSIA"|os_trans("NSIA Network")}}</h5>
                    <ul class="gray-alt">
                        <li><a href="{{path('agencies')}}">{{"Agences du Bénin"|os_trans("Agencies")}}</a></li>
                        <li><a href="{{path('gabs')}}">{{"Distributeurs automatiques de billets"|os_trans("ATMs")}}</a></li>
                        <li><a href="{{path('branchs')}}">{{"Succursales"|os_trans("Branches")}}</a></li>
                    </ul>
                </li>
                <li class='{{desktop("third-40 top-40 ")}} {{mobile("w100 top-15")}}'>
                    <h5 class="h6 white medium bottom-10">{{"Nous découvrir"|os_trans("Discover us")}}</h5>
                    <ul class="gray-alt">
                        <li><a href="{{path('about')}}">{{"Vision et mission"|os_trans("Vision and mission")}}</a></li>
                        <li><a href="{{path('history')}}">{{"Historique"|os_trans("History")}}</a></li>
                        <li><a href="{{path('values')}}">{{"Valeurs"|os_trans("Values")}}</a></li>
                        <li><a href="{{path('organisation')}}">Organisation</a></li>
                    </ul>
                </li>
            </ul>

            <ul class='list p w100 {{desktop("quarter-40 flex col top")}} {{mobile("")}}'>
                <li class='{{desktop("top-40 ")}} {{mobile("w100 top-15")}}'>
                    <h5 class="h6 white bold bottom-10">Contacts</h5>
                    <ul class='p white flex row {{mobile("center")}}'>
                        <li class='relative flex col top  {{mobile("center")}}'>
                            <span class='vt-5-in flex row middle'>
                                <i class='fa fa-envelope top-5 right-10'></i>
                                <span>{{os_param("contacts").email}}</span>
                            </span>
                            <span class='vt-5-in flex row middle'>
                                <i class='fa fa-phone top-5 right-10'></i>
                                <span>{{os_param("contacts").phone}}</span>
                            </span>
                        </li>
                    </ul>
                    <div class='h6 success flex row vt-10  {{mobile("center")}}'>
                        {% set social = os_param('socialmedia') %}
                        {% if social.whatsapp %}<a href='{{social.whatsapp}}' class='icon small circle bg-white fab fa-whatsapp right-10' target="_blank" title="Nous écrire sur WhatsApp"></a>{% endif %}
                        {% if social.facebook %}<a href='{{social.facebook}}' class='icon small circle bg-white fab fa-facebook-f right-10' target="_blank" title="Page Facebook officiel"></a>{% endif %}
            			{% if social.twitter %}<a href='{{social.twitter}}' class='icon small circle bg-white fab fa-twitter right-10' target="_blank" title="Compte Twitter officiel"></a>{% endif %}
                        {% if social.youtube %}<a href='{{social.youtube}}' class='icon small circle bg-white fab fa-youtube right-10' target="_blank" title="Compte Youtube officiel"></a>{% endif %}
                        {% if social.linkedin %}<a href='{{social.linkedin}}' class='icon small circle bg-white fab fa-linkedin right-10' target="_blank" title="Compte Flickr officiel"></a>{% endif %}
                    </div>
                </li>
                <li class='flex col {{desktop("top-40")}} {{mobile("w100 center top-40")}}'>
                    <figure class="relative {{desktop('w100 right-80-in')}} {{mobile('half')}}">
                        <img src="{{asset('images/veritas.png')}}" class="block w100 {{desktop('')}} {{mobile('')}}" alt="NSIA Banque Bénin certifié ISO 9001:2015 par BUREAU VERITAS">
                    </figure>
                </li>
            </ul>
        </div>
    </div>
    <div class="relative flex row middle space white border-top border-1x border-black-alt border-solid {{desktop('top-60-in')}}{{mobile('')}}">
        <p class="white">
            © {{"now"|date('Y')}} {{sitename}}
        </p>
        <a href="{{path('resources-cat',{slug:'textes-reglementaires'})}}">Nos conditions de banque</a>
        <a href="{{path('page',{slug:'politique-confidentialite'})}}">Politique de confidentialité</a>
    </div>
</footer>
{% endblock %}