{% extends "layout.html" %}

{% block title %}Home{% endblock %}

{% block stylesheets %}
<!-- Magnific Popup -->
<link rel="stylesheet" href="{{ '/static/css/magnific-popup.css' | asseturl }}" type="text/css">
<style>
  {% if this.hero_image %}
  {% set hero_img_file = this.attachments.get(this.hero_image) %}
  {% set is_svg = this.hero_image.split('.')[-1].lower() in ['svg', 'svgz'] %}
  {% if hero_img_file.thumbnail %}
  .hero-section {
    background-image: url("{{ hero_img_file.thumbnail(width=1920) | url }}")
  }
  @media ((min-device-width: 1921px) or ((min-device-width: 1281px) and (min-resolution: 102dpi)) or ((min-device-width: 961px) and (min-resolution: 152dpi))) {
    .hero-section {
      background-image: url("{{ hero_img_file.thumbnail(width=3840) | url }}")
    }
  }
  @media ((max-device-width: 768px) and (((max-resolution: 100dpi) and (max-device-height: 1400px)) or ((max-device-height: 1050px) and (max-resolution: 150dpi)) or (max-device-height: 700px))) {
    .hero-section {
      background-image: url("{{ hero_img_file.thumbnail(width=(hero_img_file.width * 700 / hero_img_file.height)) | url }}")
    }
  }
  {% elif is_svg %}
  .hero-section {
    background-image: url("{{ this.hero_image | url }}")
  }
  {% endif %}
  {% endif %}
</style>
{% endblock %}

{% block loader %}
{% if not config.THEME_SETTINGS.loader_enable or config.THEME_SETTINGS.loader_enable.lower() not in ["false", "f", "no", "n"] %}
<div class="fh5co-loader"></div>
{% endif %}
{% endblock %}


{% block nav_main %}

{% if this.hero_image and this.show_home_nav %}
<a href="#section-home" data-nav-section="home">Home</a>
{% endif %}
{% if this.main_content %}
{% for block in this.main_content.blocks %}
{% if block.nav_label %}
<a href="#section-{{ block.section_id }}" data-nav-section="{{ block.section_id }}">{{ block.nav_label }}</a>
{% endif %}
{% endfor %}
{% endif %}

{% endblock %}

{% block body %}

{% if this.hero_image %}
<div id="section-home" class="js-fullheight-home hero-section" data-section="home" data-stellar-background-ratio="0.5">
  <div class="container">
    <div class="col-md-6">
      <div class="js-fullheight-home fh5co-copy">
        <div class="js-fullheight-home fh5co-copy-inner">
          {% if this.hero_title %}
          <h1>{{ this.hero_title }}</h1>
          {% endif %}
          {% if this.hero_description %}
          <h2>{{ this.hero_description }}</h2>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div> <!-- END hero-section -->
{% endif %}

{% if this.main_content %}
{% for block in this.main_content.blocks %}
{% set extra_classes = '' %}
{% if this.starting_block_bg and this.starting_block_bg == 'light' %}
{% set extra_classes = extra_classes ~ loop.cycle(' light-bg-section', ' dark-bg-section') %}
{% else %}
{% set extra_classes = extra_classes ~ loop.cycle(' dark-bg-section', ' light-bg-section') %}
{% endif %}
{% if not block.title %}
{% set extra_classes = extra_classes ~ ' notitle-section' %}
{% endif %}
<div id="section-{{ block.section_id }}" data-section="{{ block.section_id }}" class="{{ block._flowblock }}-section body-section{{ extra_classes }}">
  {% if block.video_url and block.video_url.url != '' %}
  <div class="video-spacer"></div>
  {% endif %}
  {% if block.title or block.description %}
  <div class="text-center fh5co-heading">
    <h2>{{ block.title }}</h2>
    {{ block.description }}
  </div>
  {% endif %}
{{ block }}
</div> <!-- END {{ block._flowblock }}-section -->
{% endfor %}
{% endif %}

{% endblock %}

{% block scripts %}
<!-- jQuery Easing -->
<script src="{{ '/static/js/jquery.easing.min.js' | asseturl }}" type="application/javascript" charset="UTF-8"></script>
<!-- Stellar Parallax -->
<script src="{{ '/static/js/jquery.stellar.min.js' | asseturl }}" type="application/javascript" charset="UTF-8"></script>
<!-- Magnific Popup -->
<script src="{{ '/static/js/jquery.magnific-popup.min.js' | asseturl }}" type="application/javascript" charset="UTF-8"></script>
<script src="{{ '/static/js/magnific-popup-options.js' | asseturl }}" type="application/javascript" charset="UTF-8"></script>
<!-- Main JS -->
<script src="{{ '/static/js/main-singlelayout.js' | asseturl }}" type="application/javascript" charset="UTF-8"></script>
{% endblock %}
