{%- include functions.html func='log' level='debug' msg='Get banner_html value' -%} {% assign name = 'banner_html' %} {%- include functions.html func='get_value' -%} {% assign banner_html = return %}

{%- include functions.html func='log' level='debug' msg='Get heading value' -%} {% assign name = 'heading' %} {%- include functions.html func='get_value' -%} {% assign heading = return %}

{%- include functions.html func='log' level='debug' msg='Get subheading value' -%} {% assign name = 'subheading' %} {%- include functions.html func='get_value' -%} {% assign subheading = return %}

{%- include functions.html func='get_banner' -%}

{%- if has_banner -%}

{%- if banner_background -%}
<style>
  html .page-banner {
    background: {{ banner_background }};
  }
</style>
{%- endif -%}
{%- if banner_height -%}
<style>
  {%- assign num = banner_height | times: 1 -%}
  {%- assign unit = banner_height | replace_first: num -%}
  {%- assign banner_min_height = banner_min_height | default: banner_height -%}
  html .page-banner {
    height:  {{ banner_height | times: 0.368 | append: unit }};
    min-height: {{ banner_min_height }};
  }
  html[data-scroll-status="top"] .page-banner {
    height: {{ banner_height }};
  }
</style>
{%- endif -%}

{%- if banner_opacity -%}
<style>
  html .page-banner .page-banner-img > *:first-child {
    opacity: {{ banner_opacity }};
  }

  html[data-theme="dark"] .page-banner .page-banner-img > *:first-child {
    opacity: {{ banner_opacity | times: 0.718 }};
  }
</style>
{%- endif -%}
{%- if banner_heading_style -%}
<style>
  html .page-banner .page-banner-inner > *:first-child > *:nth-child(1) {
    {{ banner_heading_style }}
  }
</style>
{%- endif -%}
{%- if banner_subheading_style -%}
<style>
  html .page-banner .page-banner-inner > *:first-child > *:nth-child(2) {
    {{ banner_subheading_style }}
  }
</style>
{%- endif -%}
<section class="page-banner">
  <div class="page-banner-img">
    {%- if banner_video -%}
      <video
        autoplay=""
        poster="{{ banner_image }}"
        playsinline
      >
        <source src="{{ banner_video }}">
      </video>
      <script>
        (function() {
          var video = document.querySelector('.page-banner .page-banner-img > video');
          var videoPlay = function() {
            video.play().catch (function() {
                video.muted = true;
                video.play();
              });
          }

          video.onloadstart = function() {
            video.currentTime = {{ banner_start_at }};
            video.volume = {{ banner_volume }};
            video.muted = (video.volume == 0);
            videoPlay();
          }

          video.onended = function() {
            video.currentTime = {{ banner_start_at }};
            video.volume = 0;
          {%- if banner_loop -%}
            video.play();
          {%- endif -%}
          }
        })();
      </script>
    {%- else -%}
      <div style="background-image: url({{ banner_image }})"></div>
      <img class="img-placeholder" src="{{ banner_image }}">
    {%- endif -%}
  </div>
  <div class="wrapper">
    <div class="page-banner-inner">

      {%- if banner_html -%}

      {%- assign banner_html = 'views/' | append: banner_html -%}
      {%- include {{ banner_html }} -%}

      {%- else -%}

        <div class="page-banner-default">
          <h1 class="page-banner-heading">
            {{ heading | default: page.title | escape }}
          </h1>
          <h2 class="page-banner-subheading">
            {{ subheading | default: page.subtitle | escape }}
          </h2>
        </div>

      {%- endif -%}
    </div>
  </div>
</section>

{%- endif -%}