header.html

{% load static %}
{% load i18n %}
{% load l10n %}
	<!-- Header -->

	<header class="header trans_400">

		<!-- Logo -->
		<div class="logo">
			<a href="/">{% for el in page_description %}{% if el.name == 'title' %}{{el.content}}{% endif %}{% endfor %} </i></a>
			
		</div>

		<div class="container">
			{% if messages %}
			<ul class="messages">
				{% for message in messages %}
				<li {% if message.tags %} class="{{ message.tags }}"{% endif %}>
				<div class="alert alert-success" role="alert">
			  {{message}}
			  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
				<span aria-hidden="true">&times;</span>
			  </button>
			</div>
				</li>
				{% endfor %}
			</ul>
			{% endif %}
			<div class="row">
				<div class="col">
					<div class="header_content d-flex flex-row align-items-center justify-content-between trans_400">
						<nav class="main_nav">
							<ul class="d-flex flex-row align-items-end justify-content-end">
								<li><a href="/">Home</a></li>
								<li><a href="/podcasts">{% trans "Podcasts" %}</a></li>
								<li><a href="/blog">{% trans "Blog" %}</a></li>
								<li><a href="/about">{% trans "About" %}</a></li>
							</ul>
						</nav>
						<nav class="main_nav">
							<ul class="d-flex flex-row align-items-end justify-content-end">
								<li><a class="lang_icon" href="/en-us/home"><img src="{% static 'icons/en.svg' %}" width="20px" /> {% trans "English" %}</a></li>
								<li><a class="lang_icon" href="/es-es/home"><img src="{% static 'icons/es.svg' %}" width="20px" />  {% trans "Spanish" %}</a></li>
							</ul>
						</nav> 
					</div> 
				</div>
			</div> 
		</div>

		<!-- Submit & Social -->
		<div class="header_right d-flex flex-row align-items-start justify-content-start">

			<!-- Social -->
			<div class="social">
				<ul class="d-flex flex-row align-items-start justify-content-start">
				{% for el in social_media %}
					<li><a href="{{el.link}}"><i class="fa fa-{{el.name}}" aria-hidden="true"></i></a></li>
				{% endfor %}
				</ul> 
			</div>
			
			<!-- Hamburger -->
			<div class="hamburger"><i class="fa fa-bars" aria-hidden="true"></i></div>
			
		</div>
	</header>