@props([
    'id' => 'videoEditModal',
    'title' => 'Sửa video',
    'formId' => 'videoEditForm',
    'submitLabel' => 'Lưu',
])

<x-ui.modals type="form-modal" id="{{ $id }}" title="{{ $title }}" size="md" :formId="$formId" :submitLabel="$submitLabel">
    <form id="{{ $formId }}" class="modal-form">
        <input type="hidden" name="video_id" id="video-edit-id" />

        <div class="modal-form-grid">
            <div class="form-section full-width">
                <h3>Thông tin video</h3>

                <label>
                    <span>Đường dẫn video *</span>
                    <input type="url" name="url" id="video-edit-url" placeholder="https://www.tiktok.com/@..." required />
                </label>

                <label>
                    <span>Spark Ads</span>
                    <input type="text" name="spark_ads" id="video-edit-spark-ads" placeholder="Link Spark Ads (nếu có)" />
                </label>

                <label>
                    <span>Trạng thái *</span>
                    <select name="status" id="video-edit-status" required>
                        <option value="pending">Chưa lên video</option>
                        <option value="published">Đã đăng video</option>
                    </select>
                </label>
            </div>
        </div>
    </form>
</x-ui.modals>
