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


{% macro enum(s) %}
{% for k in s|split('\n') %}
<div class="flex row top p vt-5">
    <i class="relative icon inf right-10 top-5-in"><img src="{{asset('icons/select.png')}}" class="contain"></i>
    <span>{{k|replace({'- ':''})}}</span>
</div>
{% endfor %}
{% endmacro %}

<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 ? o.icon.thumbnail) }}

        <h2 class="h4 semibold {{desktop('')}} {{mobile('')}}">{{o.label}}</h2>
        <div class="flex col center vt-7-in ">
            <span class="monthlyFee p-alt gray-alt upper">Coût</span>
            <i class="h4 bold warning">{{o.cost}}</i>
        </div>

        <div class="">
            <div class="flex col vt-5 black text-left">
                {{_self.enum(o.network)}}
            </div>
        </div>
    </div>

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

</article>
{% endmacro %}