@extends ("front.layout")

@section('content')
	<div class="page" id="designer">
		<div class="container">
			<div class="breadcrumb">
				<div class="element"><a href="/designers">{{trans('designers.designers')}}</a></div>
				<div class="element"><a :href="hrefDesigner" v-text="designer.name"></a></div>
			</div>

			@component('front.app.titre-page')
				@slot('title')
					@{{designer.name}}
				@endslot

				@slot('subtitle')
					@{{subtitle}}
				@endslot
			@endcomponent
		</div>

		<div class="container">
			<div class="entete" :class="{'no-citation': !hasCitation}">
				<div class="image">
					<img :src="description.image" alt="">
					<div class="legende" v-text="description.legende"></div>
				</div>
				<div class="description">
					<div class="texte1" v-html="description.texte1"></div>
					<div class="citation" v-html="citation" v-if="hasCitation && !isDesktop"></div>
					<div class="texte2" v-html="description.texte2" v-if="hasPresentationPart2"></div>
				</div>
				<div class="citation" v-html="citation" v-if="hasCitation && isDesktop"></div>
			</div>
		</div>

		<div class="collections" v-if="hasCollection">
			<div class="titre">
				{{trans('collections.collections')}}
			</div>

			<div class="thumbs">
				<div class="collection" v-for="collection in designer.collections" @click.prevent="follow(collection)">
					<img class="shadow" :src="collection.thumb" :alt="collection.name">
					<div class="name" v-text="collection.name"></div>
				</div>
			</div>
		</div>

		<div class="container" v-if="hasDates">
			<div class="dates-images" :class="{'only-dates-text': hasOnlyOneImage}">
				<div class="dates">
					<div class="title">{{trans('designers.some-dates')}}</div>
					<div class="content" v-html="dates.texte"></div>
				</div>
				<div class="image" v-if="!hasOnlyOneImage">
					<img :src="dates.image" alt="">
					<div class="legende" v-text="dates.legende"></div>
				</div>
			</div>
		</div>

		<expo :photos="photos"></expo>

		{{-- <div class="container">
			<div class="images">
				<div class="image illustration" v-for="photo in photos" :key="photo.id">
					<div class="content">
						<img :src="image(photo)" :alt="photo.legende">
						<div class="legende" v-text="photo.legende"></div>
					</div>
				</div>
			</div>
		</div> --}}
	</div>
@endsection