{{-- The AM/PM radio group, drawn once here and included from both the dial and the typing mode of
     resources/views/components/timepicker.blade.php, since the two draw it byte for byte alike. --}}
                    <div
                        data-md-timepicker-period
                        role="radiogroup"
                        aria-label="{{ __('Select AM or PM') }}"
                        x-show="! is24"
                        x-on:keydown.arrow-right.prevent="movePeriod($event)"
                        x-on:keydown.arrow-left.prevent="movePeriod($event)"
                        x-on:keydown.arrow-down.prevent="movePeriod($event)"
                        x-on:keydown.arrow-up.prevent="movePeriod($event)"
                    >
                        @foreach ([false => 'am', true => 'pm'] as $pm => $period)
                            <button
                                type="button"
                                data-md-timepicker-period-option="{{ $period }}"
                                class="md-state-layer md-focus-ring"
                                role="radio"
                                aria-checked="false"
                                x-bind:aria-checked="({{ $pm ? '' : '! ' }}isPm).toString()"
                                x-bind:tabindex="({{ $pm ? '' : '! ' }}isPm) ? 0 : -1"
                                x-bind:disabled="! periodAllowed({{ $pm ? 'true' : 'false' }})"
                                x-on:click="setPeriod({{ $pm ? 'true' : 'false' }})"
                                x-text="periods[{{ (int) $pm }}]"
                            >{{ $pm ? __('PM') : __('AM') }}</button>
                        @endforeach
                    </div>