{% extends "layout.html" %}
{% block page %}
{% include 'masterhead.html' %}
{% include 'joinus.html' %}
<!-- Projects-->
<div class="p-5 projects-section bg-light" id="projects">
  <div class="text-center">
    <h2 class="display-5 text-black pt-5 pb-3 mb-3">Featured games</h2>
	</div>
	<div class="container px-4 px-lg-5">
    {% for id, item in bag('featured').items() %}
			{% set image = item.path+'main.jpg' %}
			<div class="row gx-0 mb-5 mb-md-0 justify-content-center">
				<div class="col-lg-6"><img class="img-fluid" src="{{ image|url }}" alt="project image"></div>
				<div class="col-lg-6 {% if item.sort_key|int % 2 == 0 or item.sort_key|int == 0 %} order-lg-first {% endif %} ">
					<div class="bg-black text-center h-100 project">
						<div class="d-flex h-100">
							<div class="my-4 my-lg-auto w-100 text-center">
								<h2 class="text-white mb-5">{{ item.title }}</h2>
								<a href="{{ item.path|url }}" class="btn btn-primary"><i class="fa fa-search" aria-hidden="true"></i> {{ _("Details") }}</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		{% endfor %}
	</div>
  <div class="text-center pt-5">
		<a href="games/" class="btn btn-primary btn-lg"><i class="fa fa-search" aria-hidden="true"></i> View all games</a>
	</div>
</div>
{% endblock %}