{% extends "_layouts/main" %}

{% block main %}

<div class="container main-section no-header">

	<div class="row ways-to-earn-intro">
		
		<div class="col-12 col-md-8 offset-md-2 text-center">
			<h1>{{ entry.title }}</h1>
		</div>

	</div>

	<div class="row">

		<div class="col-12">
			{% set ways = entry.waysToEarn.all() %}

			<div class="row">

			{% for way in ways %}
			{% set counter = ( counter | default(0) ) + 1 %}
				<div class="col-12 col-md-6 col-lg-4">
					<div class="way-to-earn" data-toggle="modal" data-target="#modal-ways-{{ counter }}" style="background-image: url({{ way.backgroundImage.one().getUrl() }});">
						<div class="align-v">
							<h2>{{ way.headline }}</h2>
							<div class="btn btn-secondary">Learn more</div>
						</div>
						<h4>{{counter}}</h4>
					</div>
				</div>
			{% endfor %}

			</div>

			{# Counter #}

			{% for way in ways %}
			{% set counter = ( counter | default(0) ) + 1 %}

			<!-- Modal -->
			<div class="modal fade" id="modal-ways-{{ counter }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
				<div class="modal-dialog modal-dialog-centered" role="document">
			    	<div class="modal-content">
						<div class="modal-header" style="background-image: url({{ way.backgroundImage.one().getUrl() }});">
							<h3 class="modal-title">{{ way.headline }}</h3>
							<button type="button" class="close" data-dismiss="modal" aria-label="Close">
								<span aria-hidden="true">&times;</span>
							</button>
						</div>
						<div class="modal-body">
							<p>{{ way.bodyText }}</p>
						</div>
					</div>
				</div>
			</div>

			{% endfor %}

		</div>

	</div>

</div>

{% endblock %}