<!-- default division template -->

<ul class="syngency-gender-filter">
	<li>
		<a href="#all" class="active">All</a>
	</li>
	<li>
		<a href="#male">Men</a>
	</li>
	<li>
		<a href="#female">Women</a>
	</li>
</ul>

<ul class="syngency-index-filter">
	{% assign letters = 'A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z' | split: ',' %}
    {% for letter in letters %}
    <li>
        <a href="#{{ letter }}">{{ letter }}</a>
    </li>
    {% endfor %}
</ul>

<div class="syngency-division">

	{% for model in models %}

	<div class="syngency-division-model" data-gender="{{ model.gender }}">

		<a href="{{ model.url }}">
			<img src="{{ model.headshot_url }}" class="syngency-division-model-headshot">
			<div class="syngency-division-model-name">
				{{ model.display_name }}
			</div>
		</a>
	
	</div>

	{% endfor %}

</div>

<style>
/* Gender filter */

.syngency-gender-filter {
	list-style: none;
	margin: 0 0 30px 0;
	padding: 0;
}

.syngency-gender-filter li {
	display: inline;
	padding-right: 5px;
	margin-right: 10px;
	border-right: 1px solid #ccc;
}

.syngency-gender-filter li:last-child {
	margin-right: 0;
	border-right: 0;
}

.syngency-gender-filter a {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	color: #999;
	letter-spacing: 0.5px;
	box-shadow: none !important;
}

.syngency-gender-filter a.active {
	font-weight: bold;
	color: #191919;
	text-decoration: underline;
}

/* Index filter */

.syngency-index-filter {
	list-style: none;
	margin: 0 0 30px 0;
	padding: 0;
}

.syngency-index-filter li {
	display: inline;
	padding-right: 5px;
	margin-right: 10px;
	border-right: 1px solid #ccc;
}

.syngency-index-filter a {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	color: #999;
	letter-spacing: 0.5px;
	box-shadow: none !important;
}

.syngency-index-filter a.active {
	font-weight: bold;
	color: #191919;
	text-decoration: underline;
}

.syngency-index-filter li:last-child {
	margin-right: 0;
	border-right: 0;
}

/* Model headshot */

.syngency-division-model {
	display: inline-block;
	width: auto;
	text-align: center;
	text-decoration: none;
	margin: 0 20px 20px 0;
}

.syngency-division-model-headshot {
	padding: 5px;
	border: 1px solid #eee;
	margin-bottom: 10px;
}

.syngency-division-model-name {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	color: #191919;
	letter-spacing: 0.5px;
}
</style>

<script>
jQuery(document).ready(function ($) {
	// Gender filter
	$('.syngency-gender-filter a').click(function (e) {
		e.preventDefault();
		var gender = $(this).attr('href').substring(1);
		$('.syngency-gender-filter a').removeClass('active');
		if (gender == 'all') {
			$('.syngency-division-model').removeClass('hide');
			$('.syngency-index-filter a').removeClass('active');
		} else {
			$('.syngency-division-model').addClass('hide');
			$('[data-gender="' + gender + '"]').removeClass('hide');
		}
		$(this).addClass('active');
	});

	// Index filter
	$('.syngency-index-filter a').click(function (e) {
		e.preventDefault();
		var index = $(this).attr('href')[1];
		$('.syngency-index-filter a').removeClass('active');
		$('.syngency-gender-filter a').removeClass('active');
		$('.syngency-division-model').addClass('hide');
		$('[data-index="' + index + '"]').removeClass('hide');
		$(this).addClass('active');
	});

	// Gallery switcher
	$('.syngency-model-galleries a').click(function (e) {
		e.preventDefault();
		var gallery = $(this).attr('href');
		$('.syngency-model-galleries a').removeClass('active');
		$('.syngency-model-gallery').addClass('hide');
		$(gallery).removeClass('hide');
		$(this).addClass('active');
	});
});
</script>