@push('styles')
    @vite('resources/css/rich-text-editor.css')
@endpush

<x-admin::layouts.app title="New Article">
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-4">
        <h1 class="h4 mb-0" style="color: var(--color-heading);">New Article</h1>
        <a href="{{ route('admin.blog-posts.index') }}" class="btn btn-secondary-outline btn-sm">Back to articles</a>
    </div>

    <form method="POST" action="{{ route('admin.blog-posts.store') }}" enctype="multipart/form-data">
        @csrf
        <x-admin::components.blog-post-fields
            :categories="$categories"
            :all-tags="$allTags"
            :default-author="$defaultAuthor"
        />

        <div class="d-flex flex-wrap gap-2 mt-4">
            <button type="submit" class="btn btn-primary-gradient">Save Article</button>
            <a href="{{ route('admin.blog-posts.index') }}" class="btn btn-secondary-outline">Cancel</a>
        </div>
    </form>

    @push('scripts')
        {{-- Self-hosted TinyMCE (PRD 10.9). Loaded as a plain static script
             rather than through Vite: it ships as a pre-built bundle that
             resolves its own plugins/skins at runtime from base_url. --}}
        <script src="{{ asset('vendor/tinymce/tinymce.min.js') }}" referrerpolicy="origin"></script>
        @vite('resources/js/lib/rich-text-editor.js')
    @endpush
</x-admin::layouts.app>