{% extends '/base.html.twig' %}
{% block title %}Inscription au Karaoke{% endblock %}
{% block body %}
    <div class="page">
    <section class="section swiper-container swiper-slider swiper-slider-corporate swiper-pagination-style-2" data-swiper='{"autoplay":{"delay":5000},"loop":false,"simulateTouch":true,"nav":false,"breakpoints":{"768":{"direction":"vertical"}}}'>
        <div class="swiper-wrapper text-center">
                <div class="swiper-slide context-dark" style="
                        height: 48vh;
                        background: url('images/karaoke1.jpg');
                        background-position: center;
                        background-size: cover;
                        background-repeat: no-repeat">
                </div>
        </div>
        <!-- Swiper Pagination-->
        <div class="swiper-pagination"></div>
    </section>
    <section class="section section-md section-last bg-default text-start">
        {% if isActive.isActive %}
            <div class="container">
                <div class="row">
                    <div class="col-md-3">
                        <img src="images/clanimations.png" class="mt-4">
                    </div>
                    <div class="col-md-9">
                        <article class="title-classic">
                            <div class="title-classic-title">
                                <h3 class="font-weight-bold">S'inscrire au Karaoke</h3>
                            </div>
                        </article>
                        {{ form_start(form, {'attr' : {'class': 'rd-form rd-form-variant-2 front-form', 'data-form-output':"form-output-global", 'data-form-type':"contact"}}) }}
                        <div class="my-custom-class-for-errors">
                            {{ form_errors(form) }}
                        </div>

                        <div class="row row-14 gutters-14">
                            <div class="col-md-4">
                                <div class="form-wrap">
                                    {{ form_row(form.nomPrenom, {'attr' : {'class': 'form-input'}}) }}
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-wrap">
                                    {{ form_row(form.Artiste, {'attr' : {'class': 'form-input'}}) }}
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-wrap">
                                    {{ form_row(form.Musique, {'attr' : {'class': 'form-input'}}) }}
                                </div>
                            </div>
                            {{ form_row(form.save) }}
                        </div>
                        {{ form_end(form) }}
                    </div>

                </div>

            </div>
        {% else %}
            <div class="container">
                <article class="title-classic">
                    <div class="title-classic-title">
                        <h3>Les inscriptions sont fermées</h3>
                    </div>
                </article>
            </div>
        {% endif %}

    </section>
    </div>
{% endblock %}