@props([
    'id',
])

<div
    id="{{ $id }}"
    class="erp-preview-drawer"
    role="dialog"
    aria-modal="true"
    aria-labelledby="{{ $id }}_title"
    data-erp-preview-drawer
    data-erp-preview-default-title="{{ __('kview-ui-data::table.record') }}"
    data-erp-preview-default-eyebrow="{{ __('kview-ui-data::table.preview') }}"
    hidden
>
    <div class="erp-preview-drawer-backdrop" data-erp-preview-close></div>

    <aside class="erp-preview-panel" role="document">
        <header class="erp-preview-header">
            <span class="erp-preview-icon" data-erp-preview-icon>
                <x-ui.icon name="portfolio" size="22" />
            </span>
            <div class="erp-preview-heading">
                <p data-erp-preview-eyebrow>{{ __('kview-ui-data::table.preview') }}</p>
                <h2 id="{{ $id }}_title" data-erp-preview-title>{{ __('kview-ui-data::table.record') }}</h2>
                <span data-erp-preview-subtitle hidden></span>
            </div>
            <button type="button" class="erp-preview-close" data-erp-preview-close aria-label="{{ __('kview-ui-data::table.close_preview') }}">
                <x-ui.icon name="x" size="17" />
            </button>
        </header>

        <div class="erp-preview-body">
            <p class="erp-preview-summary" data-erp-preview-summary hidden></p>
            <div class="erp-preview-badges" data-erp-preview-badges hidden></div>
            <div class="erp-preview-metrics" data-erp-preview-metrics hidden></div>

            <section class="erp-preview-section" data-erp-preview-fields-section hidden>
                <div class="erp-preview-section-label">{{ __('kview-ui-data::table.information') }}</div>
                <dl class="erp-preview-field-list" data-erp-preview-fields></dl>
            </section>
        </div>

        <footer class="erp-preview-footer">
            <button type="button" class="btn-secondary erp-preview-footer-close" data-erp-preview-close>{{ __('kview-ui-data::table.close') }}</button>
            <a href="#" class="btn-primary inline erp-preview-open-link" data-erp-preview-open>
                {{ __('kview-ui-data::table.open_record') }}
                <x-ui.icon name="external" size="14" />
            </a>
        </footer>
    </aside>
</div>