{#
 # Homepage template
 # ---------------
 #
 # When this template gets loaded, it will be because someone has accessed
 # http://yoursite.com/ (without any URI). Craft checks to see if you have
 # a Single section set to be the Homepage (as you do, by default), and
 # loads the section’s Template (this file). A special ‘entry’ variable
 # will already be set for you, assigned to the Homepage entry.
 #
 # It's worth noting that even if you didn't have a Homepage Single section,
 # as long as this template remains at craft/templates/index.html, it
 # would still be the one to get loaded when accessing http://yoursite.com/,
 # albeit without an ‘entry’ variable already set for you.
 #
 # See this page for more details on how Craft routes requests:
 # http://craftcms.com/docs/routing
 #}

{% extends "layouts/_layout" %}


{% block block_seo %}

    <title>{{ seo.metaTitle }}</title>
    <meta name="description" value="{{ seo.metaDescription }}">
    
{% endblock %}


{% block socials %}
	
	<meta property="fb:app_id" content="517420681777477" />
    <meta property="og:type" content="website" /> 
    <meta property="og:url" content="{{ siteUrl }}" /> 
    <meta property="og:title" content="{{ seo.metaTitle }}" />
    <meta property="og:description" content="{{ seo.metaDescription }}" /> 
    <meta property="og:image" content="{{ siteUrl }}assets/images/og-en.png" /> 

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="{{ siteUrl }}">
    <meta name="twitter:creator" content="@hoplaApp">
    <meta name="twitter:title" content="{{ seo.metaTitle }}">
    <meta name="twitter:description" content="{{ seo.metaDescription }}">
    <meta name="twitter:image" content="{{ siteUrl }}assets/images/og-en.png">
        
{% endblock %}


{% block toolbar %}
    
    {% if entry.color %}
        <meta name="theme-color" content="#{{ entry.color }}">
        <meta name="msapplication-navbutton-color" content="#{{ entry.color }}">
        <meta name="apple-mobile-web-app-status-bar-style" content="#{{ entry.color }}">    
    {% else %}
        <meta name="theme-color" content="#3c3c3c">
        <meta name="msapplication-navbutton-color" content="#3c3c3c">
        <meta name="apple-mobile-web-app-status-bar-style" content="#3c3c3c">
    {% endif %}

{% endblock %}


{% block styles %}

	<link rel="stylesheet" type="text/css" href="/assets/css/app.css">

{% endblock %}


{% block content %}

	<header class="header" style="background-image: url({{ header.image[0].getUrl() }})">
		
		<div class="block-top">
			
			<a href="{{ siteUrl }}">
				<img class="logo" src="/assets/images/logo.svg">
			</a>

			<span class="indice light">Blog</span>

	        <nav class="navigation">
	            <a class="link light" href="//hopla.co/#about">About</a>
	            <a class="link light" href="//hopla.co/#how-it-works">How it works</a>
	            <a class="button light" href="//hopla.co/#sign-up">Sign up</a>
	        </nav>

	        <span class="mobile-nav-toggle link"><img class="icon" src="/assets/images/menu.svg"></span>

		</div>

		<div class="newsletter">
			<h1 class="title title-2 light">{{ header.tagline }}</h1>
			<p class="reading-text light">{{ header.subtitle }}</p>
			<a class="button-plain big" href="{{ header.ctaLink }}">{{ header.ctaText }}</a>
		</div>

	</header>


	{% paginate craft.entries.section('articles').limit(9) as pageInfo, pageEntries %}

	<section class="article-list">

		{% cache  for 1 week %}

			{% for entry in pageEntries %}

				<article class="article">

					<a href="{{ entry.url }}">
						<aside class="aside" style="background-image: url( {{ entry.image[0].getUrl() }} )">
							
							<div class="info">
								<img class="icon big" src="/assets/images/eye-icon.svg">

								<span class="read-more">Read More</span>

								<span class="reading-minutes">{{ entry.readingTime }} minutes read</span>
							</div>

						</aside>
					</a>

					<div class="content">
						<span class="title-6 colored">{{ entry.postDate|date('F d, Y'|t) }}</span>

						<a href="{{ entry.url }}">
							<h3 class="title title-3">{{ entry.title }}</h3>
						</a>

						<footer class="block-bottom">
							<a class="link bold" href="{{ entry.url }}">Read more <strong>&rtrif;</strong></a>
							<span class="reading-text">{{ entry.readingTime }} mins read</span>
						</footer>
					</div>

				</article>

			{% endfor %}

		{% endcache %}

	</section>


	<div class="pagination">

		{% if pageInfo.prevUrl %}

			<a class="button" href="{{ pageInfo.prevUrl }}">Previous Page</a>

		{% endif %}

		{% if pageInfo.nextUrl %}

		    <a class="button" href="{{ pageInfo.nextUrl }}">Next Page</a>

		{% endif %}

	</div>


    <aside class="cta">
        
        <div class="wrapper small">

            <div class="block-text">
                <div class="text title-4 light">{{ banner.tagline }}</div>
            </div>

            <div class="block-button">
                <a class="button light big" href="{{ banner.ctaLink }}">{{ banner.ctaText }}</a>
            </div>

        </div>

    </aside>


	<footer class="footer">

        <p class="block-left reading-text">© {{ now.year }} hopla inc.</p>

        <div class="block-center">
        	
	       	<nav class="socials">
		        <a href="{{ socials.facebookUrl }}" target="_blank">
		        	<img class="icon" src="/assets/images/facebook.svg">
		        </a>
		        <a href="{{ socials.twitterUrl }}" target="_blank">
		        	<img class="icon" src="/assets/images/twitter.svg">
		        </a>
		        <a href="{{ socials.instagramUrl }}" target="_blank">
		        	<img class="icon" src="/assets/images/instagram.svg">
		        </a>
		    </nav>

        </div>

        <nav class="block-right">

		    {% set otherLocales = craft.i18n.getSiteLocaleIds()|without(craft.locale) %}

		    {% for locale in otherLocales %}

		        {# Find the current entry in the other locale #}

		        {% set localeEntry = craft.entries.id(entry.id).locale(locale).first %}


		        {# Make sure that it's actually localized to this locale #}

		        {% if localeEntry.locale == locale %}

		            {# Output a link to it #}

		            <a class="button small dark" href="{{ localeEntry.getUrl() }}">Français</a>

		        {% else %}

		            {# Output a link to the hompage #}

		            <a class="button small dark" href="{{ craft.config.siteUrl[locale] }}">Français</a>

		        {% endif %}

		    {% endfor %}

        </nav>

	</footer>
	

{% endblock %}


{% block scripts %}

	<script type="text/javascript" src="/assets/js/app.js"></script>

{% endblock %}