@extends('admin.layout.default')

@section('title', trans('admin.slide.actions.create'))

@section('styles')
    <style>
        .vue-dropzone.dropzone {
            text-align: center;
        }
        .vue-dropzone.dropzone .dz-preview .dz-image {
            width: auto !important;
            height: auto !important;
        }
        .vue-dropzone.dropzone .dz-preview .dz-image img
        {
            width: auto !important;
            height: auto !important;
            max-width: 100% !important;
            max-height: 100% !important;
        }
    </style>
    @parent
@endsection

@section('body')

    <div class="container-xl">
        <div class="card">

        <slide-form
            :action="'{{ url('admin/slides') }}'"
            :locales="{{ json_encode($locales) }}"
            :send-empty-locales="false"
            :c-locale="'{{ app()->getLocale() }}'"
            :media-collection-names="['slide']"
            v-cloak
            inline-template>

            <form class="form-horizontal form-create" method="post" @submit.prevent="onSubmit" :action="action" novalidate>

                <div class="card-header">
                    <i class="fa fa-plus"></i> {{ trans('admin.slide.actions.create') }}
                </div>

                <div class="card-body">
                    @include('admin.slide.components.form-elements')

                    <hr :class="isFormLocalized ? 'col-md' : 'col-md-8'" style="box-sizing: border-box;">

                    <!-- slide -->
                    <div class="row justify-content-around">
                        @foreach($locales as $locale)
                        <div v-show="shouldShowLangGroup('{{ $locale }}')" v-cloak :class="isFormLocalized ? 'col-md' : 'col-md-8'">
                            @include('admin.includes.media-uploader', [
                                'mediaCollection' => app(App\Models\Slide::class)->getMediaCollection('slide'.$locale),
                                'label' => 'Slide '.Str::upper($locale)
                            ])
                        </div>
                        @endforeach
                    </div>

                    <hr :class="isFormLocalized ? 'col-md' : 'col-md-8'" style="box-sizing: border-box;">

                    <!-- Button Section -->
                    @include('admin.slide.components.form-elements_button')

                </div>


                <div class="card-footer">
                    <button type="submit" class="btn btn-primary" :disabled="submiting">
                        <i class="fa" :class="submiting ? 'fa-spinner' : 'fa-download'"></i>
                        {{ trans('admin.btn.save') }}
                    </button>
                </div>

            </form>

        </slide-form>

        </div>
    </div>

@endsection