@props([
    'model' => 'birthdate',
    'birthdate' => null,
])

<div x-data="calcAge('{{ $birthdate }}')">
    <x-ui.input
        x-ref="birthdate"
        x-on:keyup="calcAgeFromBirthdate()"
        :label="__('Date of birth')"
        model="{{ $model }}"
        mask="date"
        placeholder="__/__/____"
        icon="calendar"
    />
    <x-ui.badge
        x-text="'Age ' + age"
        x-show="age != null"
        class="mb-2"
        outline="primary"
        dim="true"
        x-cloak
    />
</div>