{% from 'utils.html.twig' import ico, moeda, btnAddCart %}
{% set labelUserSubscriptionCycle = {
(enum('UserSubscriptionEnum::CYCLE_MONTHLY')): getLanguage('monthly', 'my_subscription'),
(enum('UserSubscriptionEnum::CYCLE_QUARTERLY')): getLanguage('quarterly', 'my_subscription'),
(enum('UserSubscriptionEnum::CYCLE_SEMIANNUAL')): getLanguage('semiannual', 'my_subscription'),
(enum('UserSubscriptionEnum::CYCLE_YEARLY')): getLanguage('yearly', 'my_subscription'),
(enum('UserSubscriptionEnum::CYCLE_BIENNIAL')): getLanguage('biennial', 'my_subscription'),
(enum('UserSubscriptionEnum::CYCLE_TRIENNIAL')): getLanguage('triennial', 'my_subscription'),
(enum('UserSubscriptionEnum::CYCLE_WEEKLY')): getLanguage('weekly', 'my_subscription'),
(enum('UserSubscriptionEnum::CYCLE_BIWEEKLY')): getLanguage('biweekly', 'my_subscription'),
}%}
{% set labelUserSubscriptionAccess = {
(enum('UserSubscriptionEnum::CYCLE_MONTHLY')): "1 #{getLanguage('month', 'product')}",
(enum('UserSubscriptionEnum::CYCLE_QUARTERLY')): "3 #{getLanguage('months', 'product')}",
(enum('UserSubscriptionEnum::CYCLE_SEMIANNUAL')): "6 #{getLanguage('months', 'product')}",
(enum('UserSubscriptionEnum::CYCLE_YEARLY')): "1 #{getLanguage('year', 'product')}",
(enum('UserSubscriptionEnum::CYCLE_BIENNIAL')): "2 #{getLanguage('year', 'product')}",
(enum('UserSubscriptionEnum::CYCLE_TRIENNIAL')): "3 #{getLanguage('year', 'product')}",
(enum('UserSubscriptionEnum::CYCLE_WEEKLY')): "1 #{getLanguage('week', 'product')}",
(enum('UserSubscriptionEnum::CYCLE_BIWEEKLY')): "2 #{getLanguage('weeks', 'product')}",
}%}
<section class="planos pag-sec sec-bg-alt" id="section-plans">
<div class="container mobile--wid">
<div class="lateral-products">
<header class="tit-sec tx-centro">
<h2>{{ productOffersSubscriptionSection.title }}</h2>
<span class="sub">{{ productOffersSubscriptionSection.subtitle }}</span>
</header>
{% set full = true %}
{% set periodo = [ null,
getLanguage('month', 'product'),
getLanguage('quarter', 'product'),
getLanguage('semester', 'product'),
getLanguage('year', 'product')
] %}
<div class="slider-animado--{{ layout }} {{ full? 'status--full' : 'status--not-full' }}">
<div class="contem-slider-animado">
<div id="slider-planos"
class="{{ full ? 'js--slider' : 'js--slider-not-full' }}"
data-slider-options-label="slider-ofertas">
{% for planOffer in productOffersSubscriptionSection.items %}
<div>
<article class="plano">
<div class="box">
<header>
<h3 class="name">{{ planOffer.product.title }}</h3>
{% if (planOffer.trialPeriod > 0) %}
<p class="acesso">
{{ getLanguage('free_access_by', 'product') }} {{ planOffer.trialPeriod }} {{ getLanguage('days', 'product') }}
</p>
{% endif %}
{# FREE #}
{% if planOffer.saleOption == enum('ProductOfferEnum::FREE') %}
<p class="price">
<small>{{ planOffer.currencySymbol }} </small>
<b>{{ moeda(planOffer.priceDisplay, false) }}</b>
<span class="periodo"> {{ labelUserSubscriptionCycle[planOffer.planCycle] }}</span>
</p>
{% endif %}
</header>
<ul>
<li>
<i class="book">{{ ico('book') }}</i>
{% set numCursos = planOffer.product.course|length %}
<span>
{{ plural(numCursos,
"<b>#{numCursos}</b> #{getLanguage('included_course', 'product')}",
"<b>#{numCursos}</b> #{getLanguage('included_courses', 'product')}"
)|raw }}
</span>
</li>
<li>
<i class="check">{{ ico('check') }}</i>
<span>
{{ getLanguage('access', 'product') }} <b>{{ getLanguage('immediate', 'product') }}</b> {{ getLanguage('and_valid_for', 'product') }} {{ labelUserSubscriptionAccess[planOffer.planCycle] }}
</span>
</li>
{% if (planOffer.planChargeNumberMax > 1) %}
<li>
<i class="check">{{ ico('check') }}</i>
<span>{{ getLanguage('installment_up_to', 'product') }} <b>{{ planOffer.planChargeNumberMax }}×</b> {{ getLanguage('interest_free', 'cart') }}</span>
</li>
{% endif %}
</ul>
<footer>
{% set link = path('productDetailPlan', { type: 'plan', slug: planOffer.product.productLink }) %}
<a href="{{ link }}" class="btn-continuar-gde btn-escolher">{{ getLanguage('know_more', 'product') }} {{ ico('arrow-right') }}</a>
</footer>
</div>
</article>
</div>
{% endfor %}
</div>
{% if full %}
<div id="arrows-slider-planos">
<button id="slider-planos-btn-prev" class="seta-prev">{% include 'svg/arrow-left.svg' %}</button>
<button id="slider-planos-btn-next" class="seta-next">{% include 'svg/arrow-right.svg' %}</button>
</div>
{% endif %}
</div>
</div>
</div>
</div>
</section>