<div class="md:p-20 p-5 gap-5 flex flex-col">
<h2 class="text-3xl md:text-4.5xl font-bold">Aucune offre ne correspond ?</h2>
<span class="md:text-3xl text-xl">Envoyez-nous votre candidature spontannée</span>
<div class="border-1 p-5 rounded-button flex-col divide-y">
<div class="flex md:flex-row flex-col md:divide-x divide-y md:divide-y-0 pb-5">
<div class="flex flex-col gap-5 md:pr-5 pb-5 md:pb-0 md:w-3/5">
<span class="md:text-2xl text-xl font-semibold">Rejoingnez l'aventure</span>
<div class="flex flex-col gap-2">
<div class="flex gap-2 items-center">
<span class="md:text-base text-smaller whitespace-nowrap">Vous êtes</span>
<div class="form-element form-select form-select__no-width without-label min-w-[152px] lg:min-w-[270px] w-full lg:w-auto"
x-data="selectInput"
:class="{ 'active' : active }"
@click.away="active = false">
<input x-ref="input" name="city" class="" id="city" type="text" pattern="\S+"
x-model="currentValue">
<div x-ref="display" @click="toggle()" class="form-input tiny-select"
x-text="currentLabel"></div>
<ul x-ref="options" class="select-options" x-show="active">
<li>
<button type="button" @click="setValue('homme', 'Homme')">un homme</button>
</li>
<li>
<button type="button" @click="setValue('femme', 'Femme')">une Femme</button>
</li>
</ul>
</div>
</div>
<div class="flex lg:flex-row flex-col gap-2 lg:items-center items-start">
<span class="md:text-base text-smaller whitespace-nowrap">Vous vous appellez</span>
<div class="field text required w-full">
<div class="control">
<input name="prenom" placeholder="Prenom"
class="w-full form-input placeholder-purple-lightest placeholder-opacity-75 py-2.5"
id="Prenom" type="text" title="prenom">
</div>
</div>
<div class="field text required w-full">
<div class="control">
<input name="nom" placeholder="Nom"
class="w-full form-input placeholder-purple-lightest placeholder-opacity-75 py-2.5"
id="Nom" type="text" title="nom">
</div>
</div>
</div>
<div class="flex lg:flex-row flex-col gap-2 lg:items-center items-start">
<div class="flex gap-2 items-center md:w-auto w-full">
<span class="md:text-base text-smaller whitespace-nowrap">Votre code postal</span>
<div class="field text required w-full">
<div class="control">
<input name="code-postal" placeholder="Code postal"
class="w-full md:w-36 form-input placeholder-purple-lightest placeholder-opacity-75 py-2.5"
id="code-postal" type="text" title="Code postal">
</div>
</div>
</div>
<div class="flex gap-2 items-center w-full">
<span class="md:text-base text-smaller whitespace-nowrap">Votre ville</span>
<div class="field text required w-full">
<div class="control">
<input name="ville" placeholder="Ville"
class="w-full form-input placeholder-purple-lightest placeholder-opacity-75 py-2.5"
id="Ville" type="text" title="ville">
</div>
</div>
</div>
</div>
<div class="flex gap-2 items-center">
<span class="md:text-base text-smaller whitespace-nowrap">Votre email</span>
<div class="field text required w-full">
<div class="control">
<input name="email" placeholder="Email"
class="w-full form-input placeholder-purple-lightest placeholder-opacity-75 py-2.5"
id="email" type="email" title="Email">
</div>
</div>
</div>
<div class="flex gap-2 items-center w-full">
<span class="md:text-base text-smaller whitespace-nowrap">Votre téléphone</span>
<div class="field text required w-full">
<div class="control">
<input name="téléphone" placeholder="Téléphone"
class="w-full lg:w-auto form-input placeholder-purple-lightest placeholder-opacity-75 py-2.5"
id="téléphone" type="text" title="Téléphone">
</div>
</div>
</div>
<div class="flex lg:flex-row flex-col gap-2 lg:items-center items-start">
<span class="md:text-base text-smaller whitespace-nowrap">Vous Cherchez dans le domaine</span>
<div class="form-element form-select form-select__no-width without-label min-w-[152px] md:min-w-[270px] w-full"
x-data="selectInput"
:class="{ 'active' : active }"
@click.away="active = false">
<input x-ref="input" name="city" class="" id="city" type="text" pattern="\S+"
x-model="currentValue">
<div x-ref="display" @click="toggle()" class="form-input tiny-select"
x-text="currentLabel"></div>
<ul x-ref="options" class="select-options" x-show="active">
<li>
<button type="button" @click="setValue('la mécanique', 'la mécanique')">la mécanique
</button>
</li>
</ul>
</div>
</div>
<div class="flex lg:flex-row flex-col gap-2 lg:items-center items-start">
<span class="md:text-base text-smaller whitespace-nowrap">Un contrat</span>
<div class="form-element form-select form-select__no-width without-label min-w-[152px] md:min-w-[270px] w-full"
x-data="selectInput"
:class="{ 'active' : active }"
@click.away="active = false">
<input x-ref="input" name="city" class="" id="city" type="text" pattern="\S+"
x-model="currentValue">
<div x-ref="display" @click="toggle()" class="form-input tiny-select"
x-text="currentLabel"></div>
<ul x-ref="options" class="select-options" x-show="active">
<li>
<button type="button" @click="setValue('cdd', 'cdd')">CDD</button>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-5 md:pl-5 pt-5 md:pt-0 md:w-2/5">
<span class="md:text-2xl text-xl font-semibold">Vos documents</span>
<div class="flex flex-col gap-2">
<div class="flex flex-col">
<span class="font-semibold text-base">Ajoutez votre CV</span>
<span class="text-icon text-xs font-normal">Au format PDF, Doc, Docx, RTF</span>
</div>
<?php include renderTemplate('molecule/upload-document', 'upload-document'); ?>
</div>
<div class="flex flex-col gap-2">
<div class="flex flex-col">
<span class="font-semibold text-base">Ajoutez votre lettre de motivation</span>
<span class="text-icon text-xs font-normal">Au format PDF, Doc, Docx, RTF</span>
</div>
<?php include renderTemplate('molecule/upload-document', 'uploaded-document'); ?>
</div>
</div>
</div>
<div class="pt-5 flex flex-col gap-5">
<span>Ajoutez ce que vous voulez pargager avec nous !</span>
<div class="form-element w-full pb-5">
<textarea rows="5" cols="40" class="w-full form-input textarea" id="message" name="message" placeholder=" "></textarea>
<label for="message">Message</label>
</div>
<button class="btn btn-primary btn-full-width">Envoyer</button>
</div>
</div>
</div>