{% extends 'base.html.twig' %}
{% form_theme form 'form_theme.html.twig' %}
{% set showContactConfirmation = formType == 'contact' and app.request.query.get('contactConfirmation') == '1' %}
{% block page_class %}
{% if showContactConfirmation %}
page ddd step-5
{% endif %}
{% endblock %}
{% block stylesheets %}
{{ parent() }}
{% if showContactConfirmation %}
{{ encore_entry_link_tags('ddd_styles') }}
{% endif %}
{% endblock %}
{% block header_search %}
{% endblock %}
{% block header_search_mobile %}
{% endblock %}
{% block content %}
{% set formBannerId = 'form-banner-' ~ random() %}
<div class="form-banner" id={{ formBannerId }}>
<div class="media">
{% if content.formBanner is defined and content.formBanner is not null %}
{% set media = sulu_resolve_media(content.formBanner.id, app.request.locale) %}
{% set mediaUrl = sulu_media_original_url(media) %}
{% set mediaMimeType = media.mimeType|default('') %}
{% set isVideo = mediaMimeType starts with 'video/' or mediaUrl matches '/\.(mp4|webm|ogg)(\\?.*)?$/i' %}
{% if isVideo %}
<video class="banner-media" autoplay muted loop playsinline preload="metadata">
<source src="{{ mediaUrl }}" type="{{ mediaMimeType }}">
{{ 'carousel.destination.video_not_supported'|trans }}
</video>
{% else %}
{% set imageUrl = sulu_media_url(media, '1200x') %}
<img class="banner-media" src="{{ imageUrl }}" alt="{{ media.title|default('') }}" />
{% endif %}
{% endif %}
</div>
<div class="text">
<h1>{{ content.formTitle| default('form.page.title_fallback'|trans) }}</h1>
<div>
{{ content.formText|default('')|raw }}
</div>
</div>
</div>
<div class="container">
{% if formType == 'contact' and showContactConfirmation %}
{% include 'pages/_includes/contact/_contact_confirmation.html.twig' %}
{% elseif formType == 'contact' %}
{{ form_start(form, {'attr': {'class': 'contact-form', 'id': 'page-contact-form'}}) }}
{% if not form.vars.valid %}
<div class="alert alert-error">
{{ form_errors(form) }}
</div>
{% endif %}
{% include 'pages/_includes/form/_form_contact_fields.html.twig' with { form: form, show_submit_button: true } only %}
{{ form_end(form) }}
{% elseif formType == 'newsletter' %}
{{ form_start(form, {'attr': {'class': 'newsletter-form'}}) }}
<div class="form-group">
{{ form_label(form.civility) }}
<div class="radio-group">
<div class="radio-input">
{% for option in form.civility %}
<div class="form-check">
<label class="form-check-label">
{{ form_widget(option, {'attr': {'class': 'form-check-input'}}) }}
<span>{{ option.vars.label }}</span>
</label>
</div>
{% endfor %}
</div>
</div>
{{ form_errors(form.civility) }}
</div>
<div class="row">
<div class="form-group col-md-6 col-sm-12">
{{ form_label(form.lastName) }}
{{ form_widget(form.lastName, {'attr': {'class': 'form-control'}}) }}
{{ form_errors(form.lastName) }}
</div>
<div class="form-group col-md-6 col-sm-12">
{{ form_label(form.firstName) }}
{{ form_widget(form.firstName, {'attr': {'class': 'form-control'}}) }}
{{ form_errors(form.firstName) }}
</div>
</div>
<div class="row">
<div class="form-group col-md-6 col-sm-12">
{{ form_label(form.email) }}
{{ form_widget(form.email, {'attr': {'class': 'form-control'}}) }}
{{ form_errors(form.email) }}
</div>
<div class="form-group col-md-6 col-sm-12">
{{ form_label(form.emailConfirmation) }}
{{ form_widget(form.emailConfirmation, {'attr': {'class': 'form-control'}}) }}
{{ form_errors(form.emailConfirmation) }}
</div>
</div>
<div class="form-group checkbox-group">
{{ form_widget(form.consent, {'attr': {'class': 'form-checkbox'}}) }}
{{ form_label(form.consent) }}
{{ form_errors(form.consent) }}
</div>
<div class="form-actions">
<button type="submit" class="btn style1 reverse_color">{{ 'form.page.subscribe'|trans }}</button>
</div>
{{ form_end(form) }}
{% else %}
{{ form_start(form) }}
{{ form_widget(form) }}
<button type="submit" class="btn btn-primary">{{ 'website.ui.contact.send'|trans }}</button>
{{ form_end(form) }}
{% endif %}
<div class="form-footer">
<div class="form-footer-block">
<div class="pictogram">{{ getLucidIcon('map-pin') }}</div>
<div class="info">
<a href="https://www.google.com/maps/place/Croisiland/@45.6441254,5.8680374,16z/data=!3m1!4b1!4m6!3m5!1s0x478b09c944fc6209:0x9fe1b9ddd7358a3f!8m2!3d45.6441218!4d5.8729083!16s%2Fg%2F119w9g765?entry=ttu&g_ep=EgoyMDI1MDEyMi4wIKXMDSoASAFQAw%3D%3D" target="_blanck">
{{ 'form.page.address_html'|trans|raw }}
</a>
</div>
</div>
<div class="form-footer-block">
<div class="pictogram">{{ getLucidIcon('phone') }}</div>
<div class="info">
<div class="form-footer-block-title">{{ 'form.page.info_reservations'|trans }}</div>
<a href="tel:{{ 'phone.default_number'|trans({}, 'general_informations') }}">{{ 'phone.default_number'|trans({}, 'general_informations') }}</a>
</div>
</div>
<div class="form-footer-block">
<div class="pictogram">{{ getLucidIcon('clock') }}</div>
<div class="info">
<div class="form-footer-block-title">{{ 'form.page.opening_hours'|trans }}</div>
<ul>
<li>{{ 'opening_hours'|trans({}, 'general_informations')|striptags|capitalize }}</li>
</ul>
</div>
</div>
</div>
</div>
<style>
#{{formBannerId}}{
--form-text-banner-color: {{ content.formTextBannerColor|default("#000000") }};
--form-text-banner-bg-color: {{ (content.formTextBannerBackgroundColor|default('#ffffff')|hex_to_rgba(content.filterBannerOpacity|default(0))) }};
}
</style>
{# wantsCallback + flatpickr + intl-tel (modale / page) : assets/website/js/common/contact-form-extras.js #}
{% endblock %}