@extends('layouts.app')
@section('js')
    <script src="{{ asset('js/video.js') }}"></script>
@endsection
@section('content')
    <div class='row'>
        <div class='col-8 mb-5'>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                {{ __('Facebook Video Download') }}
            </h2>
        </div>
        <form action='{{route('facebook.video.download')}}' method='post'>
            @csrf
            <div class="row align-items-center">
                <div class="col-2">
                    <label for="fb_link" class="col-form-label">Facebook Link</label>
                </div>
                <div class="col-4">
                    <input type="text" id="fb_link" name="fb_link" class="form-control">
                </div>
            </div>
            <div class="row mt-2 align-items-center">
                <div class="col-2">
                    <label for="filename" class="col-form-label">Filename (without extension)</label>
                </div>
                <div class="col-4">
                    <input type="text" id="filename" name="filename" class="form-control">
                </div>
                <div class="col-auto">
                    <button type="submit" class="btn btn-primary" id="fb_download">Download</button>
                </div>
            </div>
        </form>
    </div>
    <div class='row mt-5'>
        <div class='col-8 mb-5'>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                {{ __('List of video files') }} ({{count($files)}})
            </h2>
        </div>
        @foreach($files as $file)
            <div class='row'>
                <div class='col-1'>
                    <form action='{{route('video.delete', ['file_name' => $file])}}' method='post'>
                        @csrf
                        @method('delete')
                        <button type='submit' class='btn btn-danger'>Delete</btn>
                    </form>
                </div>
                <div class='col-11'>
                    <p>{{$file}}</p>
                </div>
            </div>
        @endforeach
    </div>
@endsection