<x-admin-app-layout>
    <div class="white-box">
        <x-admin::page-header title="{{ __('Categories') }}" :buttons="$buttons" />
        <x-admin::table :columns="$columns" :data="$quiz_categories" />
    </div>

    <x-admin::modal modalId="quiz-category-create" title="Add New Quiz Category">
        <form class="form-submit-add" method="POST">
            @csrf
            <x-admin::text-input-group name="title" label="Title" />

            <div class="input-group">
                <x-admin::label for="icon">
                    {{ __('Icon') }}
                </x-admin::label>
                <x-admin::file-uploader id="icon" name="icon" />
                <x-admin::input-error name="icon" />
            </div>

            <div class="flex items-center justify-end mt-4">
                <x-admin::primary-button type="submit">
                    {{ __('Save') }}
                </x-admin::primary-button>
            </div>
        </form>
    </x-admin::modal>

    <x-admin::modal modalId="quiz-category-edit" title="Edit Quiz Category">
        <form class="form-submit-edit" method="POST">
            @csrf
            <x-admin::text-input-group name="title" label="Title" />

            <div class="input-group">
                <x-admin::label for="image_icon">
                    {{ __('Icon') }}
                </x-admin::label>
                <x-admin::file-uploader id="image_icon" name="icon" />
                <x-admin::input-error name="icon" />
            </div>

            <div class="flex items-center justify-end mt-4">
                <x-admin::primary-button type="submit">
                    {{ __('Save') }}
                </x-admin::primary-button>
            </div>
        </form>
    </x-admin::modal>

    @push('scripts')
        @vite('resources/admin/js/quiz/category.js')
    @endpush
</x-admin-app-layout>
