{% macro double(i, m, i1, i2) %}
	<div>
		<span class="img-hover-zoom" data-viewer-i="{{ i }}">
			<span class="img lazy" data-bg="{{ booker_api_medias_url }}/{{ m.modelId }}/{{ i1 }}"></span>
		</span>
	</div>
	<div>
		<span class="img-hover-zoom" data-viewer-i="{{ i + 1 }}">
			<span class="img lazy" data-bg="{{ booker_api_medias_url }}/{{ m.modelId }}/{{ i2 }}"></span>
		</span>
	</div>
{% endmacro %}
{% macro ll(i, m, i1, i2) %}
	<div class="row ll">
		{{ _self.double(i, m, i1, i2) }}
	</div>
{% endmacro %}
{% macro pp(i, m, i1, i2) %}
	<div class="row pp">
		<div class="empty"></div>
		{{ _self.double(i, m, i1, i2) }}
		<div class="empty"></div>
	</div>
{% endmacro %}
{% macro lp(i, m, i1, i2) %}
	<div class="row lp">
		{{ _self.double(i, m, i1, i2) }}
	</div>
{% endmacro %}
{% macro pl(i, m, i1, i2) %}
	<div class="row pl">
		{{ _self.double(i, m, i1, i2) }}
	</div>
{% endmacro %}
{% macro ppp(i, m, i1, i2, i3) %}
	<div class="row ppp">
		<div>
			<span class="img-hover-zoom" data-viewer-i="{{ i }}">
				<span class="img lazy" data-bg="{{ booker_api_medias_url }}/{{ m.modelId }}/{{ i1 }}"></span>
			</span>
		</div>
		<div>
			<span class="img-hover-zoom" data-viewer-i="{{ i + 1 }}">
				<span class="img lazy" data-bg="{{ booker_api_medias_url }}/{{ m.modelId }}/{{ i2 }}"></span>
			</span>
		</div>
		<div>
			<span class="img-hover-zoom" data-viewer-i="{{ i + 2 }}">
				<span class="img lazy" data-bg="{{ booker_api_medias_url }}/{{ m.modelId }}/{{ i3 }}"></span>
			</span>
		</div>
	</div>
{% endmacro %}
{% macro p(i, m, i1) %}
	<div class="row p">
		<div class="empty"></div>
		<div>
			<span class="img-hover-zoom" data-viewer-i="{{ i }}">
				<span class="img lazy" data-bg="{{ booker_api_medias_url }}/{{ m.modelId }}/{{ i1 }}"></span>
			</span>
		</div>
		<div class="empty"></div>
	</div>
{% endmacro %}
{% macro l(i, m, i1) %}
	<div class="row l">
		<div class="empty"></div>
		<div>
			<span class="img-hover-zoom" data-viewer-i="{{ i }}">
				<span class="img lazy" data-bg="{{ booker_api_medias_url }}/{{ m.modelId }}/{{ i1 }}"></span>
			</span>
		</div>
		<div class="empty"></div>
	</div>
{% endmacro %}

{# END MACROS #}
{# END MACROS #}
{# END MACROS #}


	<div id="viewer"> <div class="swiper-container">
		<div class="swiper-wrapper">
			{% for image in ui %}
				<div class="swiper-slide">
					<img src="{{booker_api_medias_url}}/{{m.modelId}}/{{image.hd}}">
				</div>
			{% endfor %}
			{% for video in v %}
				<div class="swiper-slide">
					<video class="model-video-player" controls>
						<source src="{{booker_api_medias_url}}/{{m.modelId}}/{{ video.media_name }}" type="video/mp4">
					</video>
				</div>
			{% endfor %}
		</div>
	</div>
	<div class="foot-view">
		<div class="swiper-button-prev"></div>
		<span class="actual"></span>
		/
		<span class="total">{{ ui|length + v|length}}</span>
		<div class="swiper-button-next"></div>
		<span class="close">Close</span>
	</div>
</div>

<div class="top-bar">
	<div class="container-max-width">
		<div class="container-margin">
			<span class="links fr hi-m">
				{% if cv is not null %}
					<a id="vita" href="/cv/{{ m.displayNb }}/{{ m.display }}.pdf" target="_blank">Vita</a>
				{% endif %}
				<a href="/book/{{ m.display }}/{{ m.displayNb }}" target="_blank" id="sedcard">Sedcard</a>
			</span>
			<span class="name-and-measurements">
				<h1 id="modelName" data-cat="{{ catSlug }}">
					{{ m.firstName }}
					{{ m.lastName }}&nbsp;&nbsp;
					{% if m.BOARD_ID not in [1,2,7] %}
						<span>{{ m.BOARD_NAME }}</span>
					{% endif %}
					{% for b in m.BOARDS %}
						{% if b.id != m.BOARD_ID and b.id not in [1,2,7] %}
							<span>{{ b.name }}</span>
						{% endif %}
					{% endfor %}
					<span class="hi-m">&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp;</span>
				</h1>
				<nobr>
					{% for mes in m.measurements %}
						{% if mes[2] is defined and mes[3] is defined %}
							<span class="name hi-m">
								{% if mes[2] == 'Hair / color' %}
									Hair
								{% else %}
									{{ mes[2] }}
								{% endif %}
							</span>
							<span class="val hi-m">
								{% if mes[3]|slice(0,1) matches '/^[a-z]/i' %}
									{# if numeric value take the european notation, if text like color, take the american  #}
									{{ mes[3] }}
								{% else %}
									{{ mes[1] }}
								{% endif %}
							</span>
						{% endif %}
					{% endfor %}
					<span class="name hi-m">
						Birth
					</span>
					<span class="val hi-m">
						{{ m.birthyear }}
					</span>
				</nobr>
			</span>
			<span class="links fr vi-m">
				<a id="measurements">More&nbsp;infos</a>
			</span>
		</div>
		<div id="mobileMeasurements">
			<div class="vi-m">
				{% for mes in m.measurements %}
					{% if mes[2] is defined and mes[3] is defined %}
						<nobr>
							<span class="name">
								{% if mes[2] == 'Hair / color' %}
									Hair
								{% else %}
									{{ mes[2] }}
								{% endif %}
							</span>
							<span class="val">
								{% if mes[3]|slice(0,1) matches '/^[a-z]/i' %}
									{# if numeric value take the european notation, if text like color, take the american  #}
									{{ mes[3] }}
								{% else %}
									{{ mes[1] }}
								{% endif %}
							</span>
						</nobr>
					{% endif %}
				{% endfor %}
				<nobr>
					<span class="name">
						Birth
					</span>
					<span class="val">
						{{ m.birthyear }}
					</span>
				</nobr>
				{% if cv is not null %}
					<div class="links">
						<a id="vita" href="/cv/{{ m.displayNb }}/{{ m.display }}.pdf" target="_blank">Vita</a>
						<a id="sedcard" href="/book/{{ m.display }}/{{ m.displayNb }}" target="_blank">Sedcard</a>
					</div>
				{% endif %}
			</div>
		</div>
	</div>
</div>
<div class="container-max-width">
	<section class="grid page-{{ (page is defined) ? page : '' }}">
		{% set index = 0 %}
		{% for row in i %}
			{% if row.type == 'll' %}
				{{ _self.ll(index, m, row.i1, row.i2) }}
				{% set index = index + 2 %}
			{% endif %}
			{% if row.type == 'pp' %}
				{{ _self.pp(index, m, row.i1, row.i2) }}
				{% set index = index + 2 %}
			{% endif %}
			{% if row.type == 'lp' %}
				{{ _self.lp(index, m, row.i1, row.i2) }}
				{% set index = index + 2 %}
			{% endif %}
			{% if row.type == 'pl' %}
				{{ _self.pl(index, m, row.i1, row.i2) }}
				{% set index = index + 2 %}
			{% endif %}
			{% if row.type == 'ppp' %}
				{{ _self.ppp(index, m, row.i1, row.i2, row.i3) }}
				{% set index = index + 3 %}
			{% endif %}
			{% if row.type == 'p' %}
				{{ _self.p(index, m, row.i1) }}
				{% set index = index + 1 %}
			{% endif %}
			{% if row.type == 'l' %}
				{{ _self.l(index, m, row.i1) }}
				{% set index = index + 1 %}
			{% endif %}
		{% endfor %}
	</section>
	{% if v|length > 0  %}
		<section class="videos page-{{ (page is defined) ? page : '' }}">
			<h2>Videos</h2>
			{% for video in v %}
				{% if '.flv' in video.media_name %}
					{% else %}
						<div data-viewer-i="{{ index }}" class="video" style="background-image:url('{{booker_api_medias_url}}/{{m.modelId}}/{{video.media_thumbnail}}')">
							<div class="play">Play</div>
						</div>
						{% set index = index + 1 %}
				{% endif %}
			{% endfor %}
		</section>
	{% endif %}
</div>
{% if associated|length > 0  %}
	<section class="dark page-{{ (page is defined) ? page : '' }}">
		<div class="container-max-width">
			<h2>{{ m.BOARD_NAME }}</h2>
			<div class="grid4">
				{% for model in associated %}
					<div class="grid-cell">
						<a class="img-hover-zoom" data-navigo href="/profile/{{ model.display }}/{{ model.displayNb }}">
							<span class="img lazy" data-bg="{{ booker_api_medias_url }}/{{ model.modelId }}/{{ model.thumbnailUrl }}"></span>
						</a>
						<div class="model-name">
							{{ model.firstName }}
							{{ model.lastName }}
						</div>
					</div>
				{% endfor %}
			</div>
		</div>
	</section>
{% endif %}