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

@push('scripts')
    @vite('resources/js/lib/repeatable-rows.js')
@endpush

<x-admin::layouts.app title="Add Project">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h4 mb-0" style="color: var(--color-heading);">Add Portfolio Project</h1>
        <a href="{{ route('admin.portfolio-projects.index') }}" class="btn btn-secondary-outline btn-sm"><i class="fa-solid fa-arrow-left me-1" aria-hidden="true"></i> Back to Projects</a>
    </div>

    <form method="POST" action="{{ route('admin.portfolio-projects.store') }}" enctype="multipart/form-data">
        @csrf

        <x-admin::components.portfolio-project-fields-basic :categories="$categories" :technologies="$technologies" />
        <x-admin::components.portfolio-project-fields-content :technologies="$technologies" />
        <x-admin::components.portfolio-project-fields-gallery-seo />

        <button type="submit" class="btn btn-primary-gradient">Create Project</button>
        <a href="{{ route('admin.portfolio-projects.index') }}" class="btn btn-secondary-outline">Cancel</a>
    </form>

    @push('scripts')
        {{-- Self-hosted TinyMCE — same setup as the blog article editor
             (resources/js/lib/rich-text-editor.js), applied here to the
             Full Description field. --}}
        <script src="{{ asset('vendor/tinymce/tinymce.min.js') }}" referrerpolicy="origin"></script>
        @vite('resources/js/lib/rich-text-editor.js')
    @endpush
</x-admin::layouts.app>