Volet : Ajouter un fichier

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

     x-data="initModalSide()"

     data-modal="add-file"

     @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 class="flex items-center justify-between gap-5 border-b border-ui">

                <div class="pl-7.5 font-semibold tracking-tightened">Ajouter un document dans mon coffre-fort</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="px-7.5 py-10 flex-1">

                <div class="mb-7.5">

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

                        <input name="name the file" class="form-input w-full" id="add_file_name" type="text" title="Nommer le document" placeholder=" " pattern="\S+">

                        <label class="label" for="add_file_name">

                            <span>Nommer le document</span>

                        </label>

                    </div>

                </div>



                <div x-data="dragAndDrop"

                     class="relative flex justify-center items-center gap-2.5 flex-col bg-white border-2 border-ui-border hover:border-icon border-dashed rounded-[15px] py-6.5 max-w-[415px] w-full p-2 link text-icon transition duration-300"

                     :class="{

                        'border-icon': highlight,

                        'border-ui-border bg-white text-icon': !highlight && status === null,

                        'border-error bg-error-light text-error' : status === 'error',

                        'border-success bg-success-light text-success' : status === 'success'

                     }"

                >

                    <?= icon('document', 'w-8.5 shrink-0 text-icon m-2'); ?>

                    <span class="text-center text-sm">Déposez votre document ici, ou <button class="text-background">téléchargez</button></span>

                    <span class="text-center text-xs">PDF, Doc, JPG sont autorisé</span>

                    <input x-ref="input" @change="change()" id="add_file_upload" type="file" accept="image/jpeg, application/pdf, application/doc" class="absolute inset-0 opacity-0 cursor-pointer" />

                    <div x-show="status === 'error'" class="text-xxs text-error tracking-tightened font-medium">Ce type de fichier n'est pas accepté.</div>

                </div>

            </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" @click="close()">Annuler</button>

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

            </div>

        </div>

    </div>

</div>