@include('brackets/admin-ui::admin.includes.media-uploader', [
    'mediaCollection' => app(\App\Models\Article::class)->getMediaCollection('article_cover'),
    'media' => isset($article) ? $article->getThumbs200ForCollection('article_cover') : null,
    'label' => 'Обложка статьи'
])

<div class="form-group row align-items-center" :class="{'has-danger': errors.has('title'), 'has-success': fields.title && fields.title.valid }">
    <label for="title" class="col-form-label text-md-right" :class="isFormLocalized ? 'col-md-4' : 'col-md-2'">{{ trans('admin.article.columns.title') }}</label>
        <div :class="isFormLocalized ? 'col-md-4' : 'col-md-9 col-xl-8'">
        <input type="text" v-model="form.title" v-validate="'required'" @input="validate($event)" class="form-control" :class="{'form-control-danger': errors.has('title'), 'form-control-success': fields.title && fields.title.valid}" id="title" name="title" placeholder="{{ trans('admin.article.columns.title') }}">
        <div v-if="errors.has('title')" class="form-control-feedback form-text" v-cloak>@{{ errors.first('title') }}</div>
    </div>
</div>

<div class="form-group row align-items-center" :class="{'has-danger': errors.has('slug'), 'has-success': fields.slug && fields.slug.valid }">
    <label for="slug" class="col-form-label text-md-right" :class="isFormLocalized ? 'col-md-4' : 'col-md-2'">{{ trans('admin.article.columns.slug') }}</label>
        <div :class="isFormLocalized ? 'col-md-4' : 'col-md-9 col-xl-8'">
        <input type="text" v-model="form.slug" @input="validate($event)" class="form-control" :class="{'form-control-danger': errors.has('slug'), 'form-control-success': fields.slug && fields.slug.valid}" id="slug" name="slug" placeholder="{{ trans('admin.article.columns.slug') }}">
        <div v-if="errors.has('slug')" class="form-control-feedback form-text" v-cloak>@{{ errors.first('slug') }}</div>
    </div>
</div>

<div class="form-group row align-items-center" :class="{'has-danger': errors.has('author_id'), 'has-success': fields.author_id && fields.author_id.valid }">
    <label for="author_id" class="col-form-label text-md-right" :class="isFormLocalized ? 'col-md-4' : 'col-md-2'">{{ trans('admin.article.columns.author_id') }}</label>
        <div :class="isFormLocalized ? 'col-md-4' : 'col-md-9 col-xl-8'">
        <input type="text" v-model="form.author_id" @input="validate($event)" class="form-control" :class="{'form-control-danger': errors.has('author_id'), 'form-control-success': fields.author_id && fields.author_id.valid}" id="author_id" name="author_id" placeholder="{{ trans('admin.article.columns.author_id') }}">
        <div v-if="errors.has('author_id')" class="form-control-feedback form-text" v-cloak>@{{ errors.first('author_id') }}</div>
    </div>
</div>

<div class="form-group row align-items-center" :class="{'has-danger': errors.has('img'), 'has-success': fields.img && fields.img.valid }">
    <label for="img" class="col-form-label text-md-right" :class="isFormLocalized ? 'col-md-4' : 'col-md-2'">{{ trans('admin.article.columns.img') }}</label>
        <div :class="isFormLocalized ? 'col-md-4' : 'col-md-9 col-xl-8'">
        <input type="text" v-model="form.img" @input="validate($event)" class="form-control" :class="{'form-control-danger': errors.has('img'), 'form-control-success': fields.img && fields.img.valid}" id="img" name="img" placeholder="{{ trans('admin.article.columns.img') }}">
        <div v-if="errors.has('img')" class="form-control-feedback form-text" v-cloak>@{{ errors.first('img') }}</div>
    </div>
</div>

<div class="form-group row align-items-center" :class="{'has-danger': errors.has('seen_count'), 'has-success': fields.seen_count && fields.seen_count.valid }">
    <label for="seen_count" class="col-form-label text-md-right" :class="isFormLocalized ? 'col-md-4' : 'col-md-2'">{{ trans('admin.article.columns.seen_count') }}</label>
        <div :class="isFormLocalized ? 'col-md-4' : 'col-md-9 col-xl-8'">
        <input type="text" v-model="form.seen_count" @input="validate($event)" class="form-control" :class="{'form-control-danger': errors.has('seen_count'), 'form-control-success': fields.seen_count && fields.seen_count.valid}" id="seen_count" name="seen_count" placeholder="{{ trans('admin.article.columns.seen_count') }}">
        <div v-if="errors.has('seen_count')" class="form-control-feedback form-text" v-cloak>@{{ errors.first('seen_count') }}</div>
    </div>
</div>

<div class="form-group row align-items-center" :class="{'has-danger': errors.has('style'), 'has-success': fields.style && fields.style.valid }">
    <label for="style" class="col-form-label text-md-right" :class="isFormLocalized ? 'col-md-4' : 'col-md-2'">{{ trans('admin.article.columns.style') }}</label>
        <div :class="isFormLocalized ? 'col-md-4' : 'col-md-9 col-xl-8'">
        <input type="text" v-model="form.style" @input="validate($event)" class="form-control" :class="{'form-control-danger': errors.has('style'), 'form-control-success': fields.style && fields.style.valid}" id="style" name="style" placeholder="{{ trans('admin.article.placeholders.style') }}">
        <div v-if="errors.has('style')" class="form-control-feedback form-text" v-cloak>@{{ errors.first('style') }}</div>
    </div>
</div>

<div class="form-group row align-items-center" :class="{'has-danger': errors.has('short_text'), 'has-success': fields.short_text && fields.short_text.valid }">
    <label for="short_text" class="col-form-label text-md-right" :class="isFormLocalized ? 'col-md-4' : 'col-md-2'">{{ trans('admin.article.columns.short_text') }}</label>
    <div :class="isFormLocalized ? 'col-md-4' : 'col-md-9 col-xl-8'">
        <div>
            <textarea class="form-control" v-model="form.short_text" id="short_text" name="short_text"></textarea>
        </div>
        <div v-if="errors.has('short_text')" class="form-control-feedback form-text" v-cloak>@{{ errors.first('short_text') }}</div>
    </div>
</div>

<div class="form-group row align-items-center" :class="{'has-danger': errors.has('text'), 'has-success': fields.text && fields.text.valid }">
    <label for="text" class="col-form-label text-md-right" :class="isFormLocalized ? 'col-md-4' : 'col-md-2'">{{ trans('admin.article.columns.text') }}</label>
        <div :class="isFormLocalized ? 'col-md-4' : 'col-md-9 col-xl-8'">
        <div>
            {{-- <wysiwyg v-model="form.text" id="text" name="text" :config="mediaWysiwygConfig"></wysiwyg> --}}
            <textarea rows="30" class="form-control" v-model="form.text" id="text" name="text"></textarea>
        </div>
        <div v-if="errors.has('text')" class="form-control-feedback form-text" v-cloak>@{{ errors.first('text') }}</div>
    </div>
</div>

<div class="form-group row align-items-center" :class="{'has-danger': errors.has('reading_time'), 'has-success': fields.reading_time && fields.reading_time.valid }">
    <label for="reading_time" class="col-form-label text-md-right" :class="isFormLocalized ? 'col-md-4' : 'col-md-2'">{{ trans('admin.article.columns.reading_time') }}</label>
        <div :class="isFormLocalized ? 'col-md-4' : 'col-md-9 col-xl-8'">
        <input type="text" v-model="form.reading_time" v-validate="'integer'" @input="validate($event)" class="form-control" :class="{'form-control-danger': errors.has('reading_time'), 'form-control-success': fields.reading_time && fields.reading_time.valid}" id="reading_time" name="reading_time" placeholder="{{ trans('admin.article.columns.reading_time') }}">
        <div v-if="errors.has('reading_time')" class="form-control-feedback form-text" v-cloak>@{{ errors.first('reading_time') }}</div>
    </div>
</div>