@extends('admin.layout', ['page'=>"newsEdit"])

@section('content')
	<div id="news_edit">
		<div class="content">
			<h1 v-text="form.titre"></h1>
		</div>

		<div class="columns">
			<form
				class="column is-12"
				id="saveNews"
				:action="updateRoute"
				method="POST"
				@submit.prevent="submit"
				@keydown="form.errors.clear($event.target.name)"
			>
				<div class="columns">
					<div class="column is-6">
						<label class="label">Type de news</label>
						<p class="control">
							<span class="select is-fullwidth">
								<select class="is-fullwidth" v-model="form.type">
									@foreach($data->types as $type)
										<option value="{{$type}}">{{ucwords($type)}}</option>
									@endforeach
								</select>
							</span>
						</p>
					</div>

					<div class="column is-6">
						<label class="label">Langue de la news</label>
						<p class="control">
							<span class="select is-fullwidth">
								<select class="is-fullwidth" v-model="form.lang" @change="fetchDataByLang">
									@foreach($langues as $langue)
										<option value="{{$langue->code}}">{{$langue->nom}}</option>
									@endforeach
								</select>
							</span>
						</p>
					</div>
				</div>

				<upload
					id="newsImage"
					filter=".jpg, .gif, .png"
					:action="updateRoute"
					v-show="!hasImage">
				</upload>

				<div class="news__content">
					<div class="news__content__text">
						<label class="label">Titre</label>
						<p class="control">
							<input class="input" :class="{spacer: !form.errors.has('titre')}"  type="text" v-model="form.titre" id="titre" name="titre">
							<span class="help is-danger" v-if="form.errors.has('titre')" v-text="form.errors.get('titre')"></span>
						</p>

						<label class="label">Contenu</label>
						<p class="control">
							<textarea class="textarea" :class="{spacer: !form.errors.has('body')}" id="body" name="body" v-model="form.body"></textarea>
							<span class="help is-danger" v-if="form.errors.has('body')" v-text="form.errors.get('body')"></span>
						</p>
					</div>

					<div class="news__content__image" v-show="hasImage">
						<img :src="newsImage" class="newsImage" alt="">
						<div class="close" @click="removeImage">
							<span class="icon">
								<i class="fa fa-remove"></i>
							</span>
						</div>
					</div>
				</div>


				<a href="#" class="button is-primary is-outlined is-fullwidth submit" @click.prevent="submit">
					<span class="icon">
						<i class="fa fa-download" :class="{'fa-circle-o-notch fa-spin fa-fw': isLoading}"></i>
					</span>
					<span>Sauvegarder la news</span>
				</a>
			</form>
		</div>
	</div>
@endsection