<!DOCTYPE html>
<html lang="en">
<head>

    <title>{{config.get('PROJECT_NAME')}} | Team</title>
	{% include 'front/includes/import.top.html' %}
</head>

<body>

	<!-- Offcanvas START -->
	{% include 'front/includes/top.header.html' %}
	<!-- Offcanvas END -->

	<!-- =======================
Header START -->
	{% include 'front/includes/header.html' %}
	<!-- =======================
Header END -->

	<!-- **************** MAIN CONTENT START **************** -->
<main>

<!-- =======================
Team START -->
<div class="mb-4">
	<div class="container"> 
		<nav aria-label="breadcrumb my-3">
			<ol class="breadcrumb justify-content-cente mb-4 py-0">
				<li class="breadcrumb-item"><a href="{{url_for('index')}}" class="text-black">Home</a></li>
				<li class="breadcrumb-item"><a href="{{url_for('team')}}" class="text-black">Team</a>
				</li>
			</ol>
		</nav>
		<div class="row mb-4">
			<div class="col-lg-8 mx-auto text-center">
				<!-- Title -->
				<h2 class="mb-0">Our Team</h2>
			</div>
		</div><!-- Row END -->
		<div class="row g-4"> 
			{% for team_member in team %}
			<div class="col-sm-6 col-lg-3">
				<!-- Card START -->
				<div class="card card-hover-overlay">
					<div class="position-relative overflow-hidden rounded-4">
						<!-- Card Image -->
						<img src="{{url_for('static', filename='dets/assets/images/team')}}/{{team_member.image}}" class="card-image" alt="card image">
						<!-- Card Overlay -->
						<div class="card-element-hover">
							<!-- Overlay Content -->
							<div class="w-100 mt-auto text-start">
								<!-- Social button  START -->
								<ul class="list-unstyled d-flex mb-0">
									<li class="me-2">
										<a class="btn btn-round mb-0 bg-white text-facebook" href="#">
											<i class="fab fa-facebook-f"></i>
										</a> 
									</li>
									<li class="me-2">
										<a class="btn btn-round mb-0 bg-white text-instagram" href="#">
											<i class="fab fa-instagram"></i>
										</a>
									</li>	
									<li>
										<a class="btn btn-round mb-0 bg-white text-twitter" href="#">
											<i class="fab fa-twitter"></i>
										</a>
									</li>	
								</ul> 
								<!-- Social button  END -->
							</div>
						</div>
					</div>
					<!-- Card body START -->
					<div class="card-body">
						<!-- Pre title -->
						<small>{{team_member.post}}</small>
						<h6 class="mb-0"><a href="#" class="text-primary-hover text-dark">{{team_member.name}}</a></h6>
					</div>
					<!-- Card body END-->
				</div>
				<!-- Card END -->
			</div>
			{% endfor %}
	
		</div><!-- Row END --> 
	</div>
</div>
<!-- =======================
Team END -->

<section class="bg-dark py-0">
	<div class="container position-relative">

		<div class="position-absolute start-0 bottom-0 d-none d-lg-block">
			<!-- Image -->
			<img src="{{url_for('static', filename='dets/assets/images/element/plumber-03.png')}}" alt="">
		</div>

		<div class="row py-4 justify-content-sm-end mt-4">
			<div class="col-lg-10 text-center">
				<!-- Title -->
				<h3 class="text-white mb-3">Contact us to get our products and services</h3>
				<div class="d-flex flex-wrap gap-3 justify-content-center">
					<!-- Title -->
					<h4 class="text-white mb-0 me-3">Call Now</h4>
					<h4 class="mb-0"><a href="#"
							class="text-success text-primary-hover mb-0">{{config.get('PROJECT_NUMBER')}}</a>
					</h4>
				</div>
			</div>
		</div><!-- Row END -->
	</div>
</section>

</main>

<!-- **************** MAIN CONTENT END **************** -->

<!-- =======================
Footer START -->

{% include 'front/includes/footer.html' %}
<!-- =======================
Footer END -->

<!-- Back to top -->
<div class="back-top"><i class="bi bi-arrow-up-short"></i></div>

<!-- =======================
JS libraries, plugins and custom scripts -->

<!-- Bootstrap JS -->
{% include 'front/includes/import.bottom.html' %}

</body>

</html>