preview (image)
<div class="side-modale-panel fixed inset-0 z-[80]"
x-data="initModalSide()"
data-modal="side-modal"
@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 des photos</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="flex-1 overflow-scroll hide-scrollbar">
<div class="p-7.5 flex flex-col gap-5">
<div class="flex flex-col gap-2">
<div class="flex items-center gap-1 overflow-scroll hide-scrollbar">
<div class="flex justify-center items-center gap-2.5 flex-col bg-white rounded-[15px] aspect-[1.06] min-w-[100px] p-2 relative">
<button class="absolute z-10 right-0 top-0"><?= icon('label-suppress-colored', 'w-5'); ?></button>
<img class="absolute w-full rounded-button" <?= renderImageUrl('placeholder-tile-2.jpg', 'styleguide') ?>>
</div>
<div class="flex justify-center items-center gap-2.5 flex-col bg-white rounded-[15px] aspect-[1.06] min-w-[100px] p-2 relative">
<button class="absolute z-10 right-0 top-0"><?= icon('label-suppress-colored', 'w-5'); ?></button>
<img class="absolute w-full rounded-button" <?= renderImageUrl('placeholder-tile-2.jpg', 'styleguide') ?>>
</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 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('image', 'w-8.5 shrink-0 text-icon m-2'); ?>
<span class="text-center text-sm">Déposez votre photo ici, ou <button
class="text-background">téléchargez</button></span>
<span class="text-center text-xs">PNG, JPG et GIF sont autorisé</span>
<input x-ref="input" @change="change()" id="upload_image" type="file"
accept="image/jpeg, application/png, application/gif"
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>
</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">Ajouter une véhicule</button>
</div>
</div>
</div>
</div>