<div class="flex flex-col gap-3 adjusted-marg-y-sm">
<div class="flex flex-row justify-between">
<h2 class="h4 flex-1">Commentaires</h2>
<div class="">
<a href="#" class="
underline
link-base
link-dark
">
Se connecter
</a>
</div>
</div>
<div class="flex flex-col gap-3">
<form class="flex flex-col gap-2" action="#" x-data="Object.assign(hyva.formValidation($el), initForm())" @submit.prevent="submitForm()" method="post" enctype="multipart/form-data" id="form-validate">
<div class="grid grid-cols-2 gap-4">
<div class="flex flex-col w-full gap-y-1">
<div class="input-wrapper flex flex-col relative w-full floating-label">
<input type="text" name="firstname" id="firstname" class="form-input w-full peer
required
" placeholder="" required @input.debounce="onChange">
<div class="label-wrapper ">
<label for="firstname" class="flex flex-row items-center gap-2">
<span class="flex-grow">Prénom</span>
<div class="required text-error">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M8.48605 7.23022L8.81938 7.03777L11.8608 5.28179C12.0734 5.15906 12.3452 5.23189 12.468 5.44446C12.5907 5.65704 12.5179 5.92886 12.3053 6.05159L9.26383 7.80757L8.9305 8.00002L9.26383 8.19247L12.3053 9.94845C12.5179 10.0712 12.5907 10.343 12.468 10.5556C12.3452 10.7681 12.0734 10.841 11.8608 10.7183L8.81938 8.96226L8.48605 8.76981V9.15471V12.6667C8.48605 12.9121 8.28706 13.1111 8.0416 13.1111C7.79614 13.1111 7.59716 12.9121 7.59716 12.6667V9.15472V8.76982L7.26382 8.96227L4.22237 10.7183L4.32568 10.8972L4.22237 10.7183C4.0098 10.841 3.73798 10.7681 3.61525 10.5556C3.49252 10.343 3.56536 10.0712 3.77793 9.94845L6.81938 8.19247L7.15272 8.00002L6.81938 7.80757L3.77794 6.05159L3.66964 6.23916L3.77794 6.05159C3.56536 5.92886 3.49253 5.65704 3.61526 5.44446C3.73799 5.23189 4.0098 5.15906 4.22238 5.28179L7.26382 7.03776L7.59716 7.23021V6.84531V3.33335C7.59716 3.08789 7.79614 2.88891 8.0416 2.88891C8.28706 2.88891 8.48605 3.08789 8.48605 3.33335V6.84532V7.23022Z" fill="currentColor" stroke="currentColor" stroke-width="0.444444" />
</svg>
</div>
</label>
</div>
</div>
</div>
<div class="flex flex-col w-full gap-y-1">
<div class="input-wrapper flex flex-col relative w-full floating-label">
<input type="email" name="Email" id="email" class="form-input w-full peer
required
" placeholder="" required @input.debounce="onChange">
<div class="label-wrapper ">
<label for="email" class="flex flex-row items-center gap-2">
<span class="flex-grow">Email</span>
<div class="required text-error">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M8.48605 7.23022L8.81938 7.03777L11.8608 5.28179C12.0734 5.15906 12.3452 5.23189 12.468 5.44446C12.5907 5.65704 12.5179 5.92886 12.3053 6.05159L9.26383 7.80757L8.9305 8.00002L9.26383 8.19247L12.3053 9.94845C12.5179 10.0712 12.5907 10.343 12.468 10.5556C12.3452 10.7681 12.0734 10.841 11.8608 10.7183L8.81938 8.96226L8.48605 8.76981V9.15471V12.6667C8.48605 12.9121 8.28706 13.1111 8.0416 13.1111C7.79614 13.1111 7.59716 12.9121 7.59716 12.6667V9.15472V8.76982L7.26382 8.96227L4.22237 10.7183L4.32568 10.8972L4.22237 10.7183C4.0098 10.841 3.73798 10.7681 3.61525 10.5556C3.49252 10.343 3.56536 10.0712 3.77793 9.94845L6.81938 8.19247L7.15272 8.00002L6.81938 7.80757L3.77794 6.05159L3.66964 6.23916L3.77794 6.05159C3.56536 5.92886 3.49253 5.65704 3.61526 5.44446C3.73799 5.23189 4.0098 5.15906 4.22238 5.28179L7.26382 7.03776L7.59716 7.23021V6.84531V3.33335C7.59716 3.08789 7.79614 2.88891 8.0416 2.88891C8.28706 2.88891 8.48605 3.08789 8.48605 3.33335V6.84532V7.23022Z" fill="currentColor" stroke="currentColor" stroke-width="0.444444" />
</svg>
</div>
</label>
</div>
</div>
</div>
<div class="flex flex-col w-full gap-y-1 col-span-2">
<div class="input-wrapper flex flex-col relative w-full floating-label">
<textarea class="form-textarea form-input w-full peer min-h-24
required
" name="comment" id="comment" placeholder=""></textarea>
<div class="label-wrapper ">
<label for="comment" class="flex flex-row items-center gap-2">
<span class="flex-grow">Votre commentaire</span>
<div class="required text-error">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M8.48605 7.23022L8.81938 7.03777L11.8608 5.28179C12.0734 5.15906 12.3452 5.23189 12.468 5.44446C12.5907 5.65704 12.5179 5.92886 12.3053 6.05159L9.26383 7.80757L8.9305 8.00002L9.26383 8.19247L12.3053 9.94845C12.5179 10.0712 12.5907 10.343 12.468 10.5556C12.3452 10.7681 12.0734 10.841 11.8608 10.7183L8.81938 8.96226L8.48605 8.76981V9.15471V12.6667C8.48605 12.9121 8.28706 13.1111 8.0416 13.1111C7.79614 13.1111 7.59716 12.9121 7.59716 12.6667V9.15472V8.76982L7.26382 8.96227L4.22237 10.7183L4.32568 10.8972L4.22237 10.7183C4.0098 10.841 3.73798 10.7681 3.61525 10.5556C3.49252 10.343 3.56536 10.0712 3.77793 9.94845L6.81938 8.19247L7.15272 8.00002L6.81938 7.80757L3.77794 6.05159L3.66964 6.23916L3.77794 6.05159C3.56536 5.92886 3.49253 5.65704 3.61526 5.44446C3.73799 5.23189 4.0098 5.15906 4.22238 5.28179L7.26382 7.03776L7.59716 7.23021V6.84531V3.33335C7.59716 3.08789 7.79614 2.88891 8.0416 2.88891C8.28706 2.88891 8.48605 3.08789 8.48605 3.33335V6.84532V7.23022Z" fill="currentColor" stroke="currentColor" stroke-width="0.444444" />
</svg>
</div>
</label>
</div>
</div>
</div>
</div>
<button type="submit" class="m-auto btn btn-dark btn-solid btn-size-lg">
Commenter
</button>
</form>
<div>
<div class="flex flex-col gap-4">
<ul class="flex flex-col gap-4">
<li class="flex flex-col gap-2 py-3 border-b border-black/16">
<div class="text-body-sm font-bold">
<span>Jeanne (Invité)</span>
</div>
<div class="text-body-base">
<p>Denique Antiochensis ordinis vertices sub uno elogio iussit occidi ideo efferatus, quod ei celebrari vilitatem intempestivam urgenti, cum inpenderet inopia, gravius rationabili responderunt; et perissent ad unum ni comes orientis tunc Honoratus fixa constantia restitisset.</p>
</div>
<div class="flex flex-row gap-4">
<div class="flex flex-row gap-4">
<a class="hover:text-black/64">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 25" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6.63257 10.2822C7.43892 10.2822 8.16648 9.83639 8.6641 9.20189C9.43726 8.21606 10.4117 7.39562 11.5255 6.80244C12.2477 6.41786 12.8743 5.84651 13.1781 5.08686C13.3908 4.55532 13.5 3.98809 13.5 3.41561V2.78223C13.5 2.36801 13.8358 2.03223 14.25 2.03223C15.4926 2.03223 16.5 3.03959 16.5 4.28223C16.5 5.43386 16.2404 6.52486 15.7766 7.49993C15.511 8.05827 15.8836 8.78223 16.5019 8.78223M16.5019 8.78223H19.6277C20.6544 8.78223 21.5733 9.47622 21.682 10.4971C21.7269 10.9193 21.75 11.3481 21.75 11.7822C21.75 14.6298 20.7581 17.2458 19.101 19.3034C18.7134 19.7847 18.1142 20.0322 17.4962 20.0322H13.4802C12.9966 20.0322 12.5161 19.9543 12.0572 19.8013L8.94278 18.7632C8.48393 18.6102 8.00342 18.5322 7.51975 18.5322H5.90421M16.5019 8.78223H14.25M5.90421 18.5322C5.98702 18.7368 6.07713 18.9376 6.17423 19.1344C6.37137 19.534 6.0962 20.0322 5.65067 20.0322H4.74289C3.85418 20.0322 3.02991 19.5142 2.77056 18.6642C2.43208 17.5549 2.25 16.3773 2.25 15.1572C2.25 13.6048 2.54481 12.1212 3.08149 10.7593C3.38655 9.98526 4.16733 9.53223 4.99936 9.53223H6.05212C6.52404 9.53223 6.7973 10.0881 6.5523 10.4915C5.72588 11.852 5.25 13.449 5.25 15.1572C5.25 16.3507 5.48232 17.49 5.90421 18.5322Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <span class="sr-only">like</span>
</a>
<a href="#" class="
underline
link-base
link-dark
">
Répondre
</a>
</div>
<div class="text-body-sm self-center">
<span>Le 23/05/2025</span>
</div>
</div>
<div class="messages">
<div class="push push-danger">
<div class="flex flex-col flex-grow">
<span class="text-body-base">
Vous devez être <a class="link-base link-dark underline" href="#">connecté</a> ou <a class="link-base link-dark underline" href="#">créer un compte</a> afin de pouvoir répondre ou aimer
</span>
</div>
</div>
</div>
<ul class="adjusted-marg-l-sm">
<li class="flex flex-col gap-2 py-3 ">
<div class="text-body-sm font-bold">
<span>Etat Pur</span>
</div>
<div class="text-body-base">
<p>Denique Antiochensis ordinis vertices sub uno elogio iussit occidi ideo efferatus, quod ei celebrari vilitatem intempestivam urgenti, cum inpenderet inopia, gravius rationabili responderunt.</p>
</div>
<div class="flex flex-row gap-4">
<div class="flex flex-row gap-4">
<a class="hover:text-black/64">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 25" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6.63257 10.2822C7.43892 10.2822 8.16648 9.83639 8.6641 9.20189C9.43726 8.21606 10.4117 7.39562 11.5255 6.80244C12.2477 6.41786 12.8743 5.84651 13.1781 5.08686C13.3908 4.55532 13.5 3.98809 13.5 3.41561V2.78223C13.5 2.36801 13.8358 2.03223 14.25 2.03223C15.4926 2.03223 16.5 3.03959 16.5 4.28223C16.5 5.43386 16.2404 6.52486 15.7766 7.49993C15.511 8.05827 15.8836 8.78223 16.5019 8.78223M16.5019 8.78223H19.6277C20.6544 8.78223 21.5733 9.47622 21.682 10.4971C21.7269 10.9193 21.75 11.3481 21.75 11.7822C21.75 14.6298 20.7581 17.2458 19.101 19.3034C18.7134 19.7847 18.1142 20.0322 17.4962 20.0322H13.4802C12.9966 20.0322 12.5161 19.9543 12.0572 19.8013L8.94278 18.7632C8.48393 18.6102 8.00342 18.5322 7.51975 18.5322H5.90421M16.5019 8.78223H14.25M5.90421 18.5322C5.98702 18.7368 6.07713 18.9376 6.17423 19.1344C6.37137 19.534 6.0962 20.0322 5.65067 20.0322H4.74289C3.85418 20.0322 3.02991 19.5142 2.77056 18.6642C2.43208 17.5549 2.25 16.3773 2.25 15.1572C2.25 13.6048 2.54481 12.1212 3.08149 10.7593C3.38655 9.98526 4.16733 9.53223 4.99936 9.53223H6.05212C6.52404 9.53223 6.7973 10.0881 6.5523 10.4915C5.72588 11.852 5.25 13.449 5.25 15.1572C5.25 16.3507 5.48232 17.49 5.90421 18.5322Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <span class="sr-only">like</span>
</a>
<a href="#" class="
underline
link-base
link-dark
">
Répondre
</a>
</div>
<div class="text-body-sm self-center">
<span>Le 23/05/2025</span>
</div>
</div>
<ul class="adjusted-marg-l-sm">
<li class="flex flex-col gap-2 py-3 ">
<div class="text-body-sm font-bold">
<span>Etat Pur</span>
</div>
<div class="text-body-base">
<p>Denique Antiochensis ordinis vertices sub uno elogio iussit occidi ideo efferatus, quod ei celebrari vilitatem intempestivam urgenti, cum inpenderet inopia, gravius rationabili responderunt.</p>
</div>
<div class="flex flex-row gap-4">
<div class="flex flex-row gap-4">
<a class="hover:text-black/64">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 25" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6.63257 10.2822C7.43892 10.2822 8.16648 9.83639 8.6641 9.20189C9.43726 8.21606 10.4117 7.39562 11.5255 6.80244C12.2477 6.41786 12.8743 5.84651 13.1781 5.08686C13.3908 4.55532 13.5 3.98809 13.5 3.41561V2.78223C13.5 2.36801 13.8358 2.03223 14.25 2.03223C15.4926 2.03223 16.5 3.03959 16.5 4.28223C16.5 5.43386 16.2404 6.52486 15.7766 7.49993C15.511 8.05827 15.8836 8.78223 16.5019 8.78223M16.5019 8.78223H19.6277C20.6544 8.78223 21.5733 9.47622 21.682 10.4971C21.7269 10.9193 21.75 11.3481 21.75 11.7822C21.75 14.6298 20.7581 17.2458 19.101 19.3034C18.7134 19.7847 18.1142 20.0322 17.4962 20.0322H13.4802C12.9966 20.0322 12.5161 19.9543 12.0572 19.8013L8.94278 18.7632C8.48393 18.6102 8.00342 18.5322 7.51975 18.5322H5.90421M16.5019 8.78223H14.25M5.90421 18.5322C5.98702 18.7368 6.07713 18.9376 6.17423 19.1344C6.37137 19.534 6.0962 20.0322 5.65067 20.0322H4.74289C3.85418 20.0322 3.02991 19.5142 2.77056 18.6642C2.43208 17.5549 2.25 16.3773 2.25 15.1572C2.25 13.6048 2.54481 12.1212 3.08149 10.7593C3.38655 9.98526 4.16733 9.53223 4.99936 9.53223H6.05212C6.52404 9.53223 6.7973 10.0881 6.5523 10.4915C5.72588 11.852 5.25 13.449 5.25 15.1572C5.25 16.3507 5.48232 17.49 5.90421 18.5322Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <span class="sr-only">like</span>
</a>
<a href="#" class="
underline
link-base
link-dark
">
Répondre
</a>
</div>
<div class="text-body-sm self-center">
<span>Le 23/05/2025</span>
</div>
</div>
</li>
</ul>
</li>
<li class="flex flex-col gap-2 py-3 ">
<div class="text-body-sm font-bold">
<span>Etat Pur</span>
</div>
<div class="text-body-base">
<p>Denique Antiochensis ordinis vertices sub uno elogio iussit occidi ideo efferatus, quod ei celebrari vilitatem intempestivam urgenti, cum inpenderet inopia, gravius rationabili responderunt.</p>
</div>
<div class="flex flex-row gap-4">
<div class="flex flex-row gap-4">
<a class="hover:text-black/64">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 25" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6.63257 10.2822C7.43892 10.2822 8.16648 9.83639 8.6641 9.20189C9.43726 8.21606 10.4117 7.39562 11.5255 6.80244C12.2477 6.41786 12.8743 5.84651 13.1781 5.08686C13.3908 4.55532 13.5 3.98809 13.5 3.41561V2.78223C13.5 2.36801 13.8358 2.03223 14.25 2.03223C15.4926 2.03223 16.5 3.03959 16.5 4.28223C16.5 5.43386 16.2404 6.52486 15.7766 7.49993C15.511 8.05827 15.8836 8.78223 16.5019 8.78223M16.5019 8.78223H19.6277C20.6544 8.78223 21.5733 9.47622 21.682 10.4971C21.7269 10.9193 21.75 11.3481 21.75 11.7822C21.75 14.6298 20.7581 17.2458 19.101 19.3034C18.7134 19.7847 18.1142 20.0322 17.4962 20.0322H13.4802C12.9966 20.0322 12.5161 19.9543 12.0572 19.8013L8.94278 18.7632C8.48393 18.6102 8.00342 18.5322 7.51975 18.5322H5.90421M16.5019 8.78223H14.25M5.90421 18.5322C5.98702 18.7368 6.07713 18.9376 6.17423 19.1344C6.37137 19.534 6.0962 20.0322 5.65067 20.0322H4.74289C3.85418 20.0322 3.02991 19.5142 2.77056 18.6642C2.43208 17.5549 2.25 16.3773 2.25 15.1572C2.25 13.6048 2.54481 12.1212 3.08149 10.7593C3.38655 9.98526 4.16733 9.53223 4.99936 9.53223H6.05212C6.52404 9.53223 6.7973 10.0881 6.5523 10.4915C5.72588 11.852 5.25 13.449 5.25 15.1572C5.25 16.3507 5.48232 17.49 5.90421 18.5322Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <span class="sr-only">like</span>
</a>
<a href="#" class="
underline
link-base
link-dark
">
Répondre
</a>
</div>
<div class="text-body-sm self-center">
<span>Le 23/05/2025</span>
</div>
</div>
</li>
</ul>
</li>
<li class="flex flex-col gap-2 py-3 border-b border-black/16">
<div class="text-body-sm font-bold">
<span>Marie-Noëlle</span>
</div>
<div class="text-body-base">
<p>Denique Antiochensis ordinis vertices sub uno elogio iussit occidi ideo efferatus, quod ei celebrari vilitatem intempestivam urgenti, cum inpenderet inopia, gravius rationabili responderunt; et perissent ad unum ni comes orientis tunc Honoratus fixa constantia restitisset.</p>
</div>
<div class="flex flex-row gap-4">
<div class="flex flex-row gap-4">
<a class="hover:text-black/64">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 25" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6.63257 10.2822C7.43892 10.2822 8.16648 9.83639 8.6641 9.20189C9.43726 8.21606 10.4117 7.39562 11.5255 6.80244C12.2477 6.41786 12.8743 5.84651 13.1781 5.08686C13.3908 4.55532 13.5 3.98809 13.5 3.41561V2.78223C13.5 2.36801 13.8358 2.03223 14.25 2.03223C15.4926 2.03223 16.5 3.03959 16.5 4.28223C16.5 5.43386 16.2404 6.52486 15.7766 7.49993C15.511 8.05827 15.8836 8.78223 16.5019 8.78223M16.5019 8.78223H19.6277C20.6544 8.78223 21.5733 9.47622 21.682 10.4971C21.7269 10.9193 21.75 11.3481 21.75 11.7822C21.75 14.6298 20.7581 17.2458 19.101 19.3034C18.7134 19.7847 18.1142 20.0322 17.4962 20.0322H13.4802C12.9966 20.0322 12.5161 19.9543 12.0572 19.8013L8.94278 18.7632C8.48393 18.6102 8.00342 18.5322 7.51975 18.5322H5.90421M16.5019 8.78223H14.25M5.90421 18.5322C5.98702 18.7368 6.07713 18.9376 6.17423 19.1344C6.37137 19.534 6.0962 20.0322 5.65067 20.0322H4.74289C3.85418 20.0322 3.02991 19.5142 2.77056 18.6642C2.43208 17.5549 2.25 16.3773 2.25 15.1572C2.25 13.6048 2.54481 12.1212 3.08149 10.7593C3.38655 9.98526 4.16733 9.53223 4.99936 9.53223H6.05212C6.52404 9.53223 6.7973 10.0881 6.5523 10.4915C5.72588 11.852 5.25 13.449 5.25 15.1572C5.25 16.3507 5.48232 17.49 5.90421 18.5322Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <span class="sr-only">like</span>
</a>
<a href="#" class="
underline
link-base
link-dark
">
Répondre
</a>
</div>
<div class="text-body-sm self-center">
<span>Le 23/05/2025</span>
</div>
</div>
</li>
<li class="flex flex-col gap-2 py-3 border-b border-black/16">
<div class="text-body-sm font-bold">
<span>Frank</span>
</div>
<div class="text-body-base">
<p>Denique Antiochensis ordinis vertices sub uno elogio iussit occidi.</p>
</div>
<div class="flex flex-row gap-4">
<div class="flex flex-row gap-4">
<a class="hover:text-black/64">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 25" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6.63257 10.2822C7.43892 10.2822 8.16648 9.83639 8.6641 9.20189C9.43726 8.21606 10.4117 7.39562 11.5255 6.80244C12.2477 6.41786 12.8743 5.84651 13.1781 5.08686C13.3908 4.55532 13.5 3.98809 13.5 3.41561V2.78223C13.5 2.36801 13.8358 2.03223 14.25 2.03223C15.4926 2.03223 16.5 3.03959 16.5 4.28223C16.5 5.43386 16.2404 6.52486 15.7766 7.49993C15.511 8.05827 15.8836 8.78223 16.5019 8.78223M16.5019 8.78223H19.6277C20.6544 8.78223 21.5733 9.47622 21.682 10.4971C21.7269 10.9193 21.75 11.3481 21.75 11.7822C21.75 14.6298 20.7581 17.2458 19.101 19.3034C18.7134 19.7847 18.1142 20.0322 17.4962 20.0322H13.4802C12.9966 20.0322 12.5161 19.9543 12.0572 19.8013L8.94278 18.7632C8.48393 18.6102 8.00342 18.5322 7.51975 18.5322H5.90421M16.5019 8.78223H14.25M5.90421 18.5322C5.98702 18.7368 6.07713 18.9376 6.17423 19.1344C6.37137 19.534 6.0962 20.0322 5.65067 20.0322H4.74289C3.85418 20.0322 3.02991 19.5142 2.77056 18.6642C2.43208 17.5549 2.25 16.3773 2.25 15.1572C2.25 13.6048 2.54481 12.1212 3.08149 10.7593C3.38655 9.98526 4.16733 9.53223 4.99936 9.53223H6.05212C6.52404 9.53223 6.7973 10.0881 6.5523 10.4915C5.72588 11.852 5.25 13.449 5.25 15.1572C5.25 16.3507 5.48232 17.49 5.90421 18.5322Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <span class="sr-only">like</span>
</a>
<a href="#" class="
underline
link-base
link-dark
">
Répondre
</a>
</div>
<div class="text-body-sm self-center">
<span>Le 23/05/2025</span>
</div>
</div>
<form class="flex flex-col gap-2" action="#" x-data="Object.assign(hyva.formValidation($el), initForm())" @submit.prevent="submitForm()" method="post" enctype="multipart/form-data" id="form-validate">
<div class="flex flex-col w-full gap-y-1">
<div class="input-wrapper flex flex-col relative w-full floating-label">
<input type="text" name="reply-comment" id="reply-comment" class="form-input w-full peer
required
" placeholder="" required @input.debounce="onChange">
<div class="label-wrapper ">
<label for="reply-comment" class="flex flex-row items-center gap-2">
<span class="flex-grow">Votre commentaire...</span>
<div class="required text-error">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M8.48605 7.23022L8.81938 7.03777L11.8608 5.28179C12.0734 5.15906 12.3452 5.23189 12.468 5.44446C12.5907 5.65704 12.5179 5.92886 12.3053 6.05159L9.26383 7.80757L8.9305 8.00002L9.26383 8.19247L12.3053 9.94845C12.5179 10.0712 12.5907 10.343 12.468 10.5556C12.3452 10.7681 12.0734 10.841 11.8608 10.7183L8.81938 8.96226L8.48605 8.76981V9.15471V12.6667C8.48605 12.9121 8.28706 13.1111 8.0416 13.1111C7.79614 13.1111 7.59716 12.9121 7.59716 12.6667V9.15472V8.76982L7.26382 8.96227L4.22237 10.7183L4.32568 10.8972L4.22237 10.7183C4.0098 10.841 3.73798 10.7681 3.61525 10.5556C3.49252 10.343 3.56536 10.0712 3.77793 9.94845L6.81938 8.19247L7.15272 8.00002L6.81938 7.80757L3.77794 6.05159L3.66964 6.23916L3.77794 6.05159C3.56536 5.92886 3.49253 5.65704 3.61526 5.44446C3.73799 5.23189 4.0098 5.15906 4.22238 5.28179L7.26382 7.03776L7.59716 7.23021V6.84531V3.33335C7.59716 3.08789 7.79614 2.88891 8.0416 2.88891C8.28706 2.88891 8.48605 3.08789 8.48605 3.33335V6.84532V7.23022Z" fill="currentColor" stroke="currentColor" stroke-width="0.444444" />
</svg>
</div>
</label>
</div>
</div>
</div>
</form>
</li>
<li class="flex flex-col gap-2 py-3 border-b border-black/16">
<div class="text-body-sm font-bold">
<span>Albin (Invité)</span>
</div>
<div class="text-body-base">
<p>Denique Antiochensis ordinis vertices!</p>
</div>
<div class="flex flex-row gap-4">
<div class="flex flex-row gap-4">
<a class="hover:text-black/64">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 25" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6.63257 10.2822C7.43892 10.2822 8.16648 9.83639 8.6641 9.20189C9.43726 8.21606 10.4117 7.39562 11.5255 6.80244C12.2477 6.41786 12.8743 5.84651 13.1781 5.08686C13.3908 4.55532 13.5 3.98809 13.5 3.41561V2.78223C13.5 2.36801 13.8358 2.03223 14.25 2.03223C15.4926 2.03223 16.5 3.03959 16.5 4.28223C16.5 5.43386 16.2404 6.52486 15.7766 7.49993C15.511 8.05827 15.8836 8.78223 16.5019 8.78223M16.5019 8.78223H19.6277C20.6544 8.78223 21.5733 9.47622 21.682 10.4971C21.7269 10.9193 21.75 11.3481 21.75 11.7822C21.75 14.6298 20.7581 17.2458 19.101 19.3034C18.7134 19.7847 18.1142 20.0322 17.4962 20.0322H13.4802C12.9966 20.0322 12.5161 19.9543 12.0572 19.8013L8.94278 18.7632C8.48393 18.6102 8.00342 18.5322 7.51975 18.5322H5.90421M16.5019 8.78223H14.25M5.90421 18.5322C5.98702 18.7368 6.07713 18.9376 6.17423 19.1344C6.37137 19.534 6.0962 20.0322 5.65067 20.0322H4.74289C3.85418 20.0322 3.02991 19.5142 2.77056 18.6642C2.43208 17.5549 2.25 16.3773 2.25 15.1572C2.25 13.6048 2.54481 12.1212 3.08149 10.7593C3.38655 9.98526 4.16733 9.53223 4.99936 9.53223H6.05212C6.52404 9.53223 6.7973 10.0881 6.5523 10.4915C5.72588 11.852 5.25 13.449 5.25 15.1572C5.25 16.3507 5.48232 17.49 5.90421 18.5322Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <span class="sr-only">like</span>
</a>
<a href="#" class="
underline
link-base
link-dark
">
Répondre
</a>
</div>
<div class="text-body-sm self-center">
<span>Le 23/05/2025</span>
</div>
</div>
</li>
</ul>
<button type="button" class="m-auto btn btn-dark btn-outline btn-size-sm">
Plus de commentaires
</button>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-3 adjusted-marg-y-sm">
<div class="flex flex-row justify-between">
<h2 class="h4 flex-1">Commentaires</h2>
<div class="">
{% render "@template-link" with {
label: "Se connecter",
type: "dark",
underlined:true
} %}
</div>
</div>
<div class="flex flex-col gap-3">
<form class="flex flex-col gap-2"
action="#"
x-data="Object.assign(hyva.formValidation($el), initForm())"
@submit.prevent="submitForm()"
method="post"
enctype="multipart/form-data"
id="form-validate"
>
<div class="grid grid-cols-2 gap-4">
{% render "@template-input" with {
id: 'firstname',
name: 'firstname',
type: 'text',
label: 'Prénom',
required: true,
label_floating: true,
} %}
{% render "@template-input" with {
id: 'email',
name: 'Email',
type: 'email',
label: 'Email',
required: true,
label_floating: true,
} %}
{% render "@template-textarea" with {
id: 'comment',
name: 'comment',
type: 'textarea',
label: 'Votre commentaire',
label_floating: true,
required: true,
class: "col-span-2"
} %}
</div>
{% render "@template-button" with {
buttonType: "submit",
color: 'dark',
type: 'solid',
button_class: 'm-auto',
label: 'Commenter'
} %}
</form>
<div>
<div class="flex flex-col gap-4">
<ul class="flex flex-col gap-4">
{% for comment in comments %}
{% render "@blog-item-comment" with {
reply: comment.reply,
showError: comment.showError,
showForm: comment.showForm,
class: "border-b border-black/16",
user: comment.user,
comment: comment.comment,
date: comment.date
} %}
{% endfor %}
</ul>
{% render "@template-button" with {
label: "Plus de commentaires",
type: 'outline',
color: 'dark',
size: "sm",
button_class: "m-auto"
} %}
</div>
</div>
</div>
</div>
{
"comments": [
{
"showError": true,
"user": "Jeanne (Invité)",
"comment": "Denique Antiochensis ordinis vertices sub uno elogio iussit occidi ideo efferatus, quod ei celebrari vilitatem intempestivam urgenti, cum inpenderet inopia, gravius rationabili responderunt; et perissent ad unum ni comes orientis tunc Honoratus fixa constantia restitisset.",
"date": "Le 23/05/2025",
"reply": [
{
"class": "",
"showError": false,
"user": "Etat Pur",
"comment": "Denique Antiochensis ordinis vertices sub uno elogio iussit occidi ideo efferatus, quod ei celebrari vilitatem intempestivam urgenti, cum inpenderet inopia, gravius rationabili responderunt.",
"date": "Le 23/05/2025",
"reply": [
{
"class": "",
"showError": false,
"user": "Etat Pur",
"comment": "Denique Antiochensis ordinis vertices sub uno elogio iussit occidi ideo efferatus, quod ei celebrari vilitatem intempestivam urgenti, cum inpenderet inopia, gravius rationabili responderunt.",
"date": "Le 23/05/2025",
"reply": false
}
]
},
{
"class": "",
"showError": false,
"user": "Etat Pur",
"comment": "Denique Antiochensis ordinis vertices sub uno elogio iussit occidi ideo efferatus, quod ei celebrari vilitatem intempestivam urgenti, cum inpenderet inopia, gravius rationabili responderunt.",
"date": "Le 23/05/2025",
"reply": false
}
]
},
{
"showError": false,
"user": "Marie-Noëlle",
"comment": "Denique Antiochensis ordinis vertices sub uno elogio iussit occidi ideo efferatus, quod ei celebrari vilitatem intempestivam urgenti, cum inpenderet inopia, gravius rationabili responderunt; et perissent ad unum ni comes orientis tunc Honoratus fixa constantia restitisset.",
"date": "Le 23/05/2025",
"reply": false
},
{
"showError": false,
"showForm": true,
"user": "Frank",
"comment": "Denique Antiochensis ordinis vertices sub uno elogio iussit occidi.",
"date": "Le 23/05/2025",
"reply": false
},
{
"showError": false,
"user": "Albin (Invité)",
"comment": "Denique Antiochensis ordinis vertices!",
"date": "Le 23/05/2025",
"reply": false
}
]
}
No notes defined.