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

<x-admin::layouts.app title="Edit Article">
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-4">
        <div>
            <h1 class="h4 mb-1" style="color: var(--color-heading);">Edit Article</h1>
            <p class="small mb-0" style="color: var(--color-paragraph);">
                {{ $post->readingTimeLabel() }}
                @if($post->status === 'published')
                    &middot; <a href="{{ route('blog.show', $post) }}" target="_blank" rel="noopener">View on site</a>
                @endif
            </p>
        </div>
        <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.update', $post) }}" enctype="multipart/form-data">
        @csrf
        @method('PUT')
        <x-admin::components.blog-post-fields
            :post="$post"
            :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 Changes</button>
            <a href="{{ route('admin.blog-posts.index') }}" class="btn btn-secondary-outline">Cancel</a>
        </div>
    </form>

    <div class="admin-card p-4 mt-4">
        <h2 class="h6 mb-2" style="color: var(--color-heading);">Delete this article</h2>
        <p class="small mb-3" style="color: var(--color-paragraph);">
            The article is removed from the site but kept in the database, so it can be
            restored later if needed. To take it offline without deleting, set its status to Draft.
        </p>
        <form method="POST" action="{{ route('admin.blog-posts.destroy', $post) }}" data-confirm="Delete “{{ $post->title }}”?">
            @csrf
            @method('DELETE')
            <button type="submit" class="btn btn-outline-danger btn-sm">Delete Article</button>
        </form>
    </div>

    @push('scripts')
        <script src="{{ asset('vendor/tinymce/tinymce.min.js') }}" referrerpolicy="origin"></script>
        @vite('resources/js/lib/rich-text-editor.js')
    @endpush
</x-admin::layouts.app>