Side newsletter

<div class="side-modale-panel fixed inset-0 z-[80]"

     x-data="initModalSide()"

     data-modal="add-member"

     @keydown.escape.window="close()"

     :class="{

        'block' : modalOpen,

        'hidden' : !modalOpen

     }"

     x-cloak

>

    <div class="absolute inset-0 translate-x-full cursor-pointer opacity-40 transition duration-300 side-modale-panel__overlay bg-primary"

         :class="{

            'translate-x-0' : isOpen,

            'translate-x-full' : !isOpen

         }"

         @click="close()"

    ></div>

    <div class="side-modale-panel__content absolute z-10 right-0 top-0 bottom-0 flex flex-col transition duration-[350ms] w-full lg:max-w-[500px]"

         :class="{

            'translate-x-0' : isOpen,

            'translate-x-full' : !isOpen

         }"

    >

        <div class="ml-auto flex h-screen w-full flex-col bg-white">

            <div>



            </div>

            <div class="flex items-center justify-between gap-5 border-b border-ui">

                <div class="pl-7.5 font-semibold tracking-tightened">Créez votre revue de presse personnalisée</div>

                <div>

                    <button @click="close()"

                            class="link px-7.5 py-8.5 hover:text-secondary"><?= icon('close', 'w-3.25'); ?></button>

                </div>

            </div>

            <div class="overflow-scroll flex-1 flex flex-col justify-between hide-scrollbar">

                <div>

                    <div class="p-7.5 gap-5 flex flex-col border-b border-ui">

                        <div class="font-semibold tracking-tightened">Vos centres d'intérêt</div>

                        <div class="grid grid-cols-2 gap-3">

                            <?php include renderTemplate('atoms/form/checkbox', 'checkbox-label'); ?>

                            <?php include renderTemplate('atoms/form/checkbox', 'checkbox-label'); ?>

                            <?php include renderTemplate('atoms/form/checkbox', 'checkbox-label'); ?>

                            <?php include renderTemplate('atoms/form/checkbox', 'checkbox-label'); ?>

                            <?php include renderTemplate('atoms/form/checkbox', 'checkbox-label'); ?>

                            <?php include renderTemplate('atoms/form/checkbox', 'checkbox-label'); ?>

                        </div>

                    </div>

                    <div class="p-7.5 gap-5 flex flex-col border-b border-ui">

                        <div class="font-semibold tracking-tightened">Quel rythme pour les newsletter ?</div>

                        <div class="form-element form-element--blue form-select w-full"

                             x-data="selectInput('semaine', 'Une fois par semaine')"

                             :class="{ 'active' : active }"

                             @click.away="active = false"

                        >

                            <input x-ref="input"

                                   name="status"

                                   class="" id="id_select_blue"

                                   type="text" pattern="\S+"

                                   x-model="currentValue"

                            >

                            <div x-ref="display" @click="toggle()" class="form-input select" x-text="currentLabel"></div>

                            <label @click="toggle()" class="moved" :class="{ 'moved' : full }" for="id_select_blue">Choisir le rythme</label>

                            <ul x-ref="options" class="select-options" x-show="active">

                                <li><button type="button" value="semaine">Une fois par semaine</button></li>

                            </ul>

                        </div>

                    </div>

                    <div class="p-7.5 gap-5 flex flex-col border-b border-ui">

                        <div class="font-semibold tracking-tightened">Votre adresse email est</div>

                        <div class="form-element text w-full">

                            <input name="email" class="form-input w-full" id="email" type="email" title="Nom" placeholder=" " pattern="\S+">

                            <label class="label" for="email">

                                <span>Votre e-mail</span>

                            </label>

                        </div>

                    </div>

                    <div class="p-7.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae eros sit amet leo lobortis cursus...</div>



                </div>

                <img <?= renderImageUrl('side-newsletter.png', 'cms') ?> class="" alt="">

            </div>

            <div class="px-7.5 py-6.25 flex gap-3.25 border-t border-ui">

                <button class="btn btn-secondary-grey py-2.75 md:px-10 flex-1 md:flex-none" @click="close()">Annuler</button>

                <button class="btn btn-primary py-2.75 md:px-10 flex-1">M'abonner</button>

            </div>

        </div>

    </div>

</div>