{#
component: offer choice
text {string}: Texte d'introduction
hasAccomodationOption {bool}: Si option d'hébergement existe
choiceTitle {string}: Titre pour faire un choix
items: [{
title {string}: Titre
titleAnnex {string}: Titre annexe (au dessus du titre)
maxDays {int||null}: Nombre maximum de jours à réserver
minDays {int||null}: Nombre minimum de jours à réserver
excerpt {string}: Détails de l'offre
text {string}: WYSIWYG Description de l'offre
price {string}: Prix de l'offre
priceWithAccomodation {string}: Prix de l'offre avec hébergement inclus
informations {string}: Info de l'offre
link: {
text {string}: Texte du lien
to {string}: Lien
}
}]
#}
{% set props = {
text: null,
hasAccommodationOption: false,
choiceTitle: null,
items: []
}|merge(props|default({})) %}
{# Modifier classes #}
{% set modifierClasses = [] %}
{% if props.text %}
{% set modifierClasses = modifierClasses|merge(['has-text']) %}
{% endif %}
{% if props.hasAccommodationOption %}
{% set modifierClasses = modifierClasses|merge(['has-accomodation-option']) %}
{% endif %}
<section data-component="offer-choice" class="OfferChoice-component{{ ' ' ~ modifierClasses | join(' ') }}">
{# Background pattern #}
<div class="OfferChoice-backgroundPattern backgroundPatternWaves">
{% include "component/waves.html.twig" with {
props: {
speed:0.1,
shape:{
src:props.shape.src,
backgroundcolor:props.shape.src
}
}
} %}
</div>
<div class="l-container">
{# Text #}
{% if props.text %}
<div class="l-row u-center">
<div
class="l-column OfferChoice-textColumn">
{# Text #}
<p class="OfferChoice-text">{{ props.text|raw }}</p>
</div>
</div>
{% endif %}
{# Accomodation option #}
{% if props.hasAccommodationOption %}
<div class="l-row u-center">
{# Accomodation option #}
<div class="l-column OfferChoice-accomodationOption">
{% if props.accomodationText[0] is not null %}
{# Accomodation option choice #}
<div class=" offerchoice-accomodationoptiontextwrapper">
<p class="OfferChoice-accomodationOptionText" ref="labelItem">{{ props.accomodationText[0] }}</p>
</div>
{% endif %}
{# Accomodation option switch #}
<div class="OfferChoice-accomodationOptionSwitch" {% if props.accomodationText[0] is empty or props.accomodationText[1] is empty %} style="display: none;"{% endif %}>
<input type="checkbox" checked id="accomodation-option-id" ref="checkbox"></input>
<label for="accomodation-option-id" ref="labelButton"></label>
</div>
{% if props.accomodationText[1] is not null %}
{# Accomodation option choice #}
<div class="OfferChoice-accomodationOptionTextWrapper">
<p class="OfferChoice-accomodationOptionText" ref="labelItem">{{ props.accomodationText[1] }}</p>
</div>
{% endif %}
</div>
<p class="OfferChoice-choiceTitle">{{ props.choiceTitle }}</p>
</div>
{% endif %}
<div class="l-row u-center">
<div class="OfferChoice-itemHeadingAnnex">
{% for item in props.items %}
<p class="OfferChoice-itemDuration {% if item == props.items[0] %}selected {% endif %}" ref="button">{{ item.title }}</p>
{% endfor %}
</div>
{# Main #}
<div class="l-column OfferChoice-main">
{% for item in props.items %}
{# Item #}
<div
class="OfferChoice-item {% if item == props.items[0] %}selected {% endif %} " ref="item" {% if item.indexCalendar is defined %} data-idoption="{{ item.id }}" data-indexcalendar="{{item.indexCalendar|json_encode()}}" {% endif %}>
{# Item heading #}
<div
class="OfferChoice-itemHeading">
{# Item name #}
<p class="OfferChoice-itemName" ref="titleAnnex">{{ item.titleAnnex }}</p>
{# Item duration #}
<p class="OfferChoice-itemDuration" ref="title">{{ item.title }}</p>
<p style="display:none" ref="maxDays">{{ item.maxDays }}</p>
<p style="display:none" ref="minDays">{{ item.minDays }}</p>
{# Item excerpt #}
<p class="OfferChoice-itemExcerpt" ref="details">{{ item.excerpt }}</p>
</div>
{# Item services #}
<ul class="OfferChoice-itemServices">
{% include "component/wysiwyg.html.twig" with {
props: {
content: item.text
}
} %}
</ul>
{# Item booking #}
<div
class="OfferChoice-itemBooking">
{# Item price #}
<div class="OfferChoice-itemPriceWrapper">
<p class="OfferChoice-itemPriceFrom">{{ item.priceFrom }}</p>
<p class="OfferChoice-itemPrice" ref="price">{{ item.price }}</p>
{% if props.hasAccommodationOption %}
<p class="OfferChoice-itemPriceAccommodation" ref="accommodationPrice">{{ item.priceWithAccommodation }}</p>
{% endif %}
</div>
{# Item informations #}
<div class="OfferChoice-itemInformations">{{ item.informations|raw }}</div>
{# Item link #}
<div class="OfferChoice-itemLink" ref="selectButton">
{% include "component/button.html.twig" with {
props: item.link|merge_object({
theme: 'invert'
})
} %}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div></section>