{% macro render(o, alt = false) %}
{% import "Macros/button.html.twig" as button %}
{% import "Macros/productHeader.html.twig" as header %}

<article class="account anim-scroll anim-from-bottom shadow-alt-3 flex col space success text-center {{desktop((alt ? 'w100' : 'third-25 ')~' radius-20 vt-40 bottom-40-in hz-30-in')}} {{mobile('w100 vt-40 bottom-20-in radius-10 hz-20-in')}}">
    <div class="flex col center">
        {{ header.render(o.icon) }}
        <h2 class="h4 semibold {{desktop('')}} {{mobile('')}}">{{o|os_trans("label")}}</h2>
        <div class="flex col center">
            <div class="flex col center hz-20-in vt-7-in ">
                <span class="p-alt black-alt upper">{{"Frais mensuel"|os_trans("Monthly fee")}}</span>
                <i class="h4 bold warning">{{o.monthlyFee}} F CFA</i>
            </div>
        </div>
        <div class="black lh-4x top-20">
            <p class="bold bottom-20">{{"Ce compte inclut :"|os_trans("This account include")}}</p>
            <div class="flex row middle vt-5">
                <i class="relative icon inf right-10"><img src="{{asset('icons/select.png')}}" class="contain"></i>
                <span>{{"Un compte épargne sur demande"|os_trans("A saving account on demand")}}</span>
            </div>
            {% if o.deathInsurance %}
            <div class="flex row middle vt-5">
                <i class="relative icon inf right-10"><img src="{{asset('icons/select.png')}}" class="contain"></i>
                <span>Une assurance décès-invalidité</span>
            </div>
            {% endif %}
            {% if o.momoExpress %}
            <div class="flex row middle vt-5">
                <i class="relative icon inf right-10"><img src="{{asset('icons/select.png')}}" class="contain"></i>
                <span>Activation MoMo Express</span>
            </div>
            {% endif %}
            {% if o.SMSAlert %}
            <div class="flex row middle vt-5">
                <i class="relative icon inf right-10"><img src="{{asset('icons/select.png')}}" class="contain"></i>
                <span>{{"Alerte SMS"|os_trans("SMS Alert")}}</span>
            </div>
            {% endif %}
            {% if o.internetBanking %}
            <div class="flex row middle vt-5">
                <i class="relative icon inf right-10"><img src="{{asset('icons/select.png')}}" class="contain"></i>
                <span>Internet Banking</span>
            </div>
            {% endif %}
            {% if o.mobileApp %}
            <div class="flex row middle vt-5">
                <i class="relative icon inf right-10"><img src="{{asset('icons/select.png')}}" class="contain"></i>
                <span>{{"Application mobile"|os_trans("Mobile app")}}</span>
            </div>
            {% endif %}
            {# {% if o.remuneration %}
            <div class="flex row middle vt-5">
                <i class="relative icon inf right-10"><img src="{{asset('icons/select.png')}}" class="contain"></i>
                <strong>Rémunéré</strong>
            </div>
            {% endif %} #}
        </div>
    </div>

    {% if not alt %}
    {{button.render(path("currentaccount",{slug:o.slug}))}}
    {% endif %}

</article>
{% endmacro %}