@csrf

@if (isset($video) && $video->path)
    <video
        id="my-video"
        class="video-js vjs-theme-city object-fill w-full h-96 mb-10"
        controls
        preload="auto"
        {{-- poster="MY_VIDEO_POSTER.jpg" --}}
        data-setup="{}"
    >
        <source src="/storage/{{ $video->path }}" type="video/mp4" />
        <p class="vjs-no-js">
            To view this video please enable JavaScript, and consider upgrading to a
            web browser that
            <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
        </p>
    </video>
@endif

<div class="mb-4">
    <label for="video" class="block font-medium text-slate-700">Video</label>
    <input type="file" id="video" name="video"
        class="mt-1 block w-full px-3 py-2 placeholder-slate-400 border border-slate-500 rounded-md focus:outline-none focus:shadow focus:border-sky-500 focus:ring-1 focus:ring-sky-500">
    @error('video')
        <p class="text-pink-500 text-sm">{{ $message }}</p>
    @enderror
</div>

<div class="mb-4">
    <label for="title" class="block font-medium text-slate-700">Title</label>
    <input type="text" id="title" name="title" placeholder="Title" value="{{ $video->title ?? null }}"
        class="mt-1 block w-full px-3 py-2 placeholder-slate-400 border border-slate-500 rounded-md focus:outline-none focus:shadow focus:border-sky-500 focus:ring-1 focus:ring-sky-500">
    @error('title')
        <p class="text-pink-500 text-sm">{{ $message }}</p>
    @enderror
</div>

<div class="mb-4">
    <label for="page" class="block font-medium text-slate-700">Page</label>
    <select id="page" name="page"
        class="mt-1 block w-full px-3 py-2 placeholder-slate-400 border border-slate-500 rounded-md focus:outline-none focus:shadow focus:border-sky-500 focus:ring-1 focus:ring-sky-500"
        placeholder="Designation">
        <option value="home">Home</option>
    </select>
    @error('page')
        <p class="text-pink-500 text-sm">{{ $message }}</p>
    @enderror
</div>

<div class="flex justify-end">
    <button type="submit" class="bg-green-300 px-5 py-3 rounded-md font-medium text-slate-700">Save</button>
</div>