{% extends "_layouts/main" %}

{% block main %}

{% include "_includes/subpageHeader" %}

<div class="container main-section">

	{% for ranking in craft.categories.group('rankings') %}
	{% if craft.entries.section('recognition').relatedTo(ranking).all()|length %}

	{% if not loop.first %}
	<hr>
	{% endif %}

	<div class="row ranking-row {{ ranking.slug }}">

		<div class="col-12 col-md-4">
			<img class="ranking-badge" src="img/recognition/{{ ranking.slug }}.jpg" alt="{{ ranking.title }}">
		</div>

		<div class="col-12 col-md-8">
			<h1>{{ ranking.title }}</h1>
		</div>

		<div class="col-12">

			<div class="row">

				{% for affiliate in craft.entries.section('recognition').relatedTo(ranking).order('lastName asc').all() %}

				{% if ranking.slug == 'royal-crown-diamond' or ranking.slug == 'crown-diamond' %}

				<div class="col-12 col-md-6 affiliate-listing">

					{% if affiliate.headshot|length %}
					<div class="affiliate-img" style="background-image: url({{ affiliate.headshot.one().getUrl }});"></div>
					{% else %}
					<div class="placeholder">
						<h4 class="align-v">{{ affiliate.title }}</h4>
					</div>
					{% endif %}
					<h4>{{ affiliate.title }}</h4>
				</div>

				{% elseif (ranking.slug == 'triple-diamond' or ranking.slug == 'double-diamond' or ranking.slug == 'diamond') %}

				<div class="col-6 col-md-4 affiliate-listing">
					{% if affiliate.headshot|length %}
					<div class="affiliate-img" style="background-image: url({{ affiliate.headshot.one().getUrl }});"></div>
					{% else %}
					<div class="placeholder">
						<h4 class="align-v">{{ affiliate.title }}</h4>
					</div>
					{% endif %}
					<h4>{{ affiliate.title }}</h4>
				</div>

				{% elseif  (ranking.slug == 'emerald' or ranking.slug == 'ruby') %}

				<div class="col-4 col-md-3 affiliate-listing">
					{% if affiliate.headshot|length %}
					<div class="affiliate-img" style="background-image: url({{ affiliate.headshot.one().getUrl }});"></div>
					{% else %}
					<div class="placeholder">
						<h4 class="align-v">{{ affiliate.title }}</h4>
					</div>
					{% endif %}
					<h4>{{ affiliate.title }}</h4>
				</div>

				{% else %}

				<div class="col-12 col-md-3 affiliate-listing">
					<h4>{{ affiliate.title }}</h4>
				</div>

				{% endif %}

				{% endfor %}

			</div>
			
		</div>
		
	</div>

	{% endif %}
	{% endfor %}

</div>

{% endblock %}