<div class="c-check-in-form">
<div grid="grid" class="c-form c-form--label-bottom-less">
<div grid="12">
<input type="checkbox" id="use-account-data" name="use-account-data" class="u-visuallyhidden " role="group" aria-label="use-account-data">
<label for="use-account-data" class="">
Usa i dati del tuo account
</label>
</div>
<div grid="6@md">
<label for="name-text-field" class="">
Nome <span class="required-marker" aria-hidden="true">*</span>
<input id="name-text-field" type="text" class="" placeholder="" value="" aria-describedby="name-text-note">
<p class="c-field__note " id="name-text-note">
Inserisci il nome dell’intestatario della prenotazione
</p>
</label>
</div>
<div grid="6@md">
<label for="surname-text-field" class="">
Cognome <span class="required-marker" aria-hidden="true">*</span>
<input id="surname-text-field" type="text" class="" placeholder="" value="" aria-describedby="surname-text-note">
<p class="c-field__note " id="surname-text-note">
Inserisci il cognome dell’intestatario della prenotazione
</p>
</label>
</div>
<div grid="6@md">
<label for="phone-text-field" class="">
Telefono
<input id="phone-text-field" type="tel" class="" placeholder="" value="" aria-describedby="phone-text-note">
<p class="c-field__note " id="phone-text-note">
Inserisci il numero di telefono sul quale sarà possibile contattarti
</p>
</label>
</div>
<div grid="6@md">
<label for="email-text-field" class="">
Email
<input id="email-text-field" type="email" class="" placeholder="" value="" aria-describedby="email-text-note">
<p class="c-field__note " id="email-text-note">
Inserisci l'indirizzo email sul quale sarà possibile contattarti
</p>
</label>
<div class="u-mt-space-8"><input type="checkbox" id="send-confirmation-email" name="send-confirmation-email" class="u-visuallyhidden " role="group" aria-label="send-confirmation-email">
<label for="send-confirmation-email" class="">
Invia a questa mail la conferma della prenotazione
</label>
</div>
</div>
<div grid="6@md">
<div class="add-license-plate">
<button type="button" class="c-button c-button--ghost js-fr-dialogmodal-open" aria-controls="dialog-choice-license-plate-multiple">
Aggiungi la targa
<svg class="c-icon c-icon--24" role="presentation">
<use xlink:href="#ic-add-24px"></use>
</svg>
</button>
<p class="add-license-plate-txt">Potrai accedere più velocemente al parcheggio e senza documento.</p>
</div>
</div>
</div>
<div class="c-check-in-form__footer">
<div class="c-check-in-form__actions">
<button type="button" class="c-button c-button--submit">
Conferma
</button> <button type="button" class="c-button c-button--ghost js-btn-checkin-panel-close">
Annulla
</button>
</div>
</div>
</div>
<div class="c-check-in-form{{#if modifier}} {{modifier}}{{/if}}">
<div grid="grid" class="c-form c-form--label-bottom-less">
<div grid="12">
{{> @checkbox checkbox-use-account-data }}
</div>
<div grid="6@md">
{{> @input input-name }}
</div>
<div grid="6@md">
{{> @input input-surname }}
</div>
<div grid="6@md">
{{> @input input-phone }}
</div>
<div grid="6@md">
{{> @input input-email }}
<div class="u-mt-space-8">{{> @checkbox checkbox-send-confirmation-email }}</div>
</div>
<div grid="6@md">
{{#if btn-add-license-plate }}
<div class="add-license-plate">
{{> @button btn-add-license-plate }}
<p class="add-license-plate-txt">Potrai accedere più velocemente al parcheggio e senza documento.</p>
</div>
{{/if}}
{{#if input-filled-license-plate }}
<div class="edit-license-plate">
<div class="u-fg--1">
{{ render "@input--license-plate" input-filled-license-plate merge=true }}
</div>
{{> @button btn-edit-license-plate }}
</div>
{{/if}}
</div>
</div>
<div class="c-check-in-form__footer">
<div class="c-check-in-form__actions">
{{#each actions}}
{{> @button }}
{{/each}}
</div>
</div>
</div>
{
"input-name": {
"label_id": "name-text-field",
"label_message": "Nome",
"atom-input": {
"id": "name-text-field",
"type": "text",
"class": "",
"placeholder": "",
"required": true,
"hasNote": true,
"describedby": "name-text-note"
},
"note_id": "name-text-note",
"note_message": "Inserisci il nome dell’intestatario della prenotazione",
"note_class": ""
},
"input-surname": {
"label_id": "surname-text-field",
"label_message": "Cognome",
"atom-input": {
"id": "surname-text-field",
"type": "text",
"class": "",
"placeholder": "",
"required": true,
"hasNote": true,
"describedby": "surname-text-note"
},
"note_id": "surname-text-note",
"note_message": "Inserisci il cognome dell’intestatario della prenotazione",
"note_class": ""
},
"input-phone": {
"label_id": "phone-text-field",
"label_message": "Telefono",
"atom-input": {
"id": "phone-text-field",
"type": "tel",
"class": "",
"placeholder": "",
"required": false,
"hasNote": true,
"describedby": "phone-text-note"
},
"note_id": "phone-text-note",
"note_message": "Inserisci il numero di telefono sul quale sarà possibile contattarti",
"note_class": ""
},
"input-email": {
"label_id": "email-text-field",
"label_message": "Email",
"atom-input": {
"id": "email-text-field",
"type": "email",
"class": "",
"placeholder": "",
"required": false,
"hasNote": true,
"describedby": "email-text-note"
},
"note_id": "email-text-note",
"note_message": "Inserisci l'indirizzo email sul quale sarà possibile contattarti",
"note_class": ""
},
"actions": [
{
"name": "default",
"type": "button",
"text": "Conferma",
"modifier": "c-button--submit"
},
{
"name": "default",
"type": "button",
"text": "Annulla",
"modifier": "c-button--ghost js-btn-checkin-panel-close"
}
],
"checkbox-use-account-data": {
"id": "use-account-data",
"name": "use-account-data",
"text": "Usa i dati del tuo account",
"required": false
},
"checkbox-send-confirmation-email": {
"id": "send-confirmation-email",
"name": "send-confirmation-email",
"text": "Invia a questa mail la conferma della prenotazione",
"required": false
},
"btn-add-license-plate": {
"modifier": "c-button--ghost js-fr-dialogmodal-open",
"type": "button",
"text": "Aggiungi la targa",
"svg": {
"symbol": "ic-add-24px",
"class": "c-icon c-icon--24"
},
"opens-dialog": "dialog-choice-license-plate-multiple"
}
}
.c-check-in-form .add-license-plate {
display: flex;
align-items: center;
gap: remify(8px);
flex-wrap: wrap;
}
.c-check-in-form .add-license-plate-txt {
@include font-scale(level-1);
color: secondary(text, 100);
margin: 0;
flex: 1 0 remify(210px);
}
.c-check-in-form .edit-license-plate {
display: flex;
gap: remify(16px);
align-items: flex-start;
}
.c-check-in-form .edit-license-plate-btn {
margin-top: remify(36px);
white-space: nowrap;
@include font-scale(level-1-5);
}
.c-check-in-form__footer {
margin-top: remify(48px);
display: flex;
justify-content: flex-end;
}
.c-check-in-form__actions {
display: flex;
gap: remify(16px);
.c-button {
margin: 0 !important;
}
}
No notes defined.