@php
    /**
     * Shell of every simple list screen: title, inline editor and the rows.
     * A page only declares $fields, so this never becomes one view per screen.
     *
     * Expects: $pageTitle, $intro?, $resource, $fields, $emptyText
     * Field:   ['name', 'label', 'type' => text|textarea|mono, 'placeholder'?]
     */
@endphp

<main class="app-main">

    @include('includes.breadcrumb')

    @include('includes.flash')

    <header class="page-head">
        <div>
            <h1 class="page-title">{{ $pageTitle }}</h1>
            @if(! empty($intro))
                <p class="page-sub">{{ $intro }}</p>
            @endif
        </div>
        <button class="btn btn--primary crud__new" type="button">
            <i class="fa-solid fa-plus"></i> {{ __('site.crud_new') }}
        </button>
    </header>

    <div class="crud"
         data-url-list="{{ route('site.crud.list', $resource) }}"
         data-url-store="{{ route('site.crud.store', $resource) }}"
         data-url-delete="{{ route('site.crud.delete', $resource) }}"
         data-msg-saved="{{ __('site.configs_saved') }}"
         data-msg-save-error="{{ __('site.cfg_err_save') }}"
         data-msg-deleted="{{ __('site.crud_deleted') }}"
         data-msg-required="{{ __('site.crud_required') }}"
         data-msg-save="{{ __('general.action_save_changes') }}"
         data-msg-saving="{{ __('site.configs_saving') }}">

        <form class="crud__form" hidden>
            <div class="crud__form-body">
                @foreach($fields as $field)
                    <label class="field {{ ($field['type'] ?? 'text') === 'text' ? '' : 'field--full' }}">
                        <span class="field__label">{{ $field['label'] }}</span>
                        @if(($field['type'] ?? 'text') === 'text')
                            <input class="input" type="text" name="{{ $field['name'] }}"
                                   placeholder="{{ $field['placeholder'] ?? '' }}">
                        @else
                            <textarea class="input {{ ($field['type'] ?? '') === 'mono' ? 'input--mono' : '' }}"
                                      rows="4" name="{{ $field['name'] }}"
                                      placeholder="{{ $field['placeholder'] ?? '' }}"></textarea>
                        @endif
                    </label>
                @endforeach
            </div>

            <div class="crud__form-foot">
                <button class="btn btn--ghost crud__cancel" type="button">{{ __('site.crud_cancel') }}</button>
                <button class="btn btn--primary" type="submit">
                    @include('includes.spinner')
                    <span class="btn__label">{{ __('general.action_save_changes') }}</span>
                </button>
            </div>
        </form>

        <div class="sk sk--list" aria-hidden="true">
            @for($i = 0; $i < 4; $i++)
                <div class="sk__line">
                    <span class="sk__bar sk__bar--label"></span>
                    <span class="sk__bar sk__bar--desc"></span>
                </div>
            @endfor
        </div>

        <div class="apierr" hidden>
            <span class="apierr__ico"><i class="fa-solid fa-triangle-exclamation"></i></span>
            <h2 class="apierr__title">{{ __('site.cfg_err_title') }}</h2>
            <p class="apierr__text">{{ __('site.cfg_err_generic') }}</p>
            <button class="btn btn--primary apierr__retry" type="button"
                    data-label="{{ __('site.cfg_err_retry') }}" data-wait="{{ __('site.cfg_err_wait') }}">
                @include('includes.spinner')
                <span class="btn__label">{{ __('site.cfg_err_retry') }}</span>
            </button>
        </div>

        <div class="crud__list" hidden></div>

        <div class="crud__empty" hidden>
            <span class="apierr__ico"><i class="fa-solid fa-inbox"></i></span>
            <p class="apierr__text">{{ $emptyText }}</p>
        </div>
    </div>

</main>