@php
    // if the column has been cast to Carbon or Date (using attribute casting)
    // get the value as a date string
    if (isset($field['value']) && $field['value'] instanceof \Carbon\CarbonInterface) {
        $field['value'] = $field['value']->format('Y-m-d');
    }

    $errors = $errors ?? null;

    $fieldLabel = $field['label'];
    $fieldName = $field['name'];
    $fieldDotName = square_brackets_to_dots(implode(',', (array) $fieldName));
    $isInvalidClass = optional($errors)->has($fieldDotName) ? 'is-invalid' : '';

    $field['value'] = old_empty_or_null($fieldName, '') ?? ($field['value'] ?? ($field['default'] ?? ''));

    $isDurationField = $field['options']['use-duration-mode'] ?? false;

    $initFunction = $isDurationField ? 'bpFieldInitDurationFlatPickerElement' : 'bpFieldInitDateFlatPickerElement';
@endphp

<x-form.front-field :field=$field>
    @if ($isDurationField)
        <label class="form-label">{!! $fieldLabel !!} (h:m:s):</label>
        <input type="text" name="{{ $fieldName }}" placeholder="hh:mm:ss"
            pattern="^([0-9]{1,2}):([0-5][0-9]):([0-5][0-9])$" class="form-control form-control-sm {{ $isInvalidClass }}"
            value="{{ $field['value'] }}" />
    @else
        <label class="form-label">{!! $fieldLabel !!}</label>
        <i class="la la-flag-checkered pull-{{ config('backpack.crud.translatable_field_icon_position') }}"
            style="margin-top: 3px;" title="This field is translatable."></i>
        <div class="input-group date {{ $isInvalidClass }}">
            <input class="form-control form-control-solid {{ $isInvalidClass }}" placeholder=""
                data-init-function="{{ $initFunction }}" name="{{ $fieldName }}" value="{{ $field['value'] }}" />
        </div>
    @endif
</x-form.front-field>

@push('crud_fields_scripts')
    @loadOnce('bpFieldInitDateFlatPickerElement')
        <script>
            function bpFieldInitDateFlatPickerElement(element) {
                $(element).flatpickr({
                    altInput: true,
                    altFormat: "d/m/Y",
                    dateFormat: "Y-m-d",
                    time_24hr: true,
                    allowInput: true,
                    static: true
                });
            }
        </script>
    @endLoadOnce
@endpush