@props([
    'id' => 'app-confirm-dialog',
    'title' => null,
    'message' => null,
    'confirmLabel' => null,
    'cancelLabel' => null,
])

@php
    $title = $title ?: __('kview-ui-core::ui.confirm.title');
    $message = $message ?: __('kview-ui-core::ui.confirm.message');
    $confirmLabel = $confirmLabel ?: __('kview-ui-core::ui.common.confirm');
    $cancelLabel = $cancelLabel ?: __('kview-ui-core::ui.common.cancel');
@endphp

<div
    id="{{ $id }}"
    {{ $attributes->class('ui-confirm-dialog') }}
    data-ui-confirm-dialog
    data-ui-confirm-default-title="{{ $title }}"
    data-ui-confirm-default-message="{{ $message }}"
    data-ui-confirm-default-label="{{ $confirmLabel }}"
    hidden
>
    <button
        type="button"
        class="ui-confirm-dialog__backdrop"
        aria-label="{{ $cancelLabel }}"
        data-ui-confirm-cancel
        tabindex="-1"
    ></button>

    <section
        class="ui-confirm-dialog__surface"
        role="alertdialog"
        aria-modal="true"
        aria-labelledby="{{ $id }}_title"
        aria-describedby="{{ $id }}_message"
        tabindex="-1"
        data-ui-confirm-surface
    >
        <div class="ui-confirm-dialog__icon" aria-hidden="true">
            <x-ui.icon name="alert" size="20" />
        </div>

        <div class="ui-confirm-dialog__copy">
            <h2 id="{{ $id }}_title" data-ui-confirm-title>{{ $title }}</h2>
            <p id="{{ $id }}_message" data-ui-confirm-message>{{ $message }}</p>
        </div>

        <div class="ui-confirm-dialog__actions">
            <button type="button" class="btn-secondary" data-ui-confirm-cancel>{{ $cancelLabel }}</button>
            <button type="button" class="btn-danger" data-ui-confirm-accept>{{ $confirmLabel }}</button>
        </div>
    </section>
</div>