{# LIBRARIES #}
{{ attach_library('ui_patterns/libraries.vd_splitlines') }}
{{ attach_library('ui_patterns/layout_page.page_lib') }}

{# VARIABLES #}
{% set front = front|default(false) %}
{% set full_width = full_width|default(false) %}
{% set no_sidebars = no_sidebars|default(false) %}
{% set floating_title = floating_title|default(false) %}

{% set scrl_top_side = scrl_top_side|default("left") %}
{% set scrl_top_link = scrl_top_link|default("<i class='fas fa-chevron-up'></i>") %}

{% set cols = "col-lg-12" %}
{% set offcanvas_class = "with-offcanvas" %}
{% set banner_class = "with-banner" %}

{% set main_container_classes = [
  'front-' ~ (front ? '1' : '0'),
  floating_title ? 'with-flt-title',
] %}

{% if page_sidebar_left or page_sidebar_right and not no_sidebars %}{% set cols = "col-lg-8" %}{% endif %}
{% if page_sidebar_left and page_sidebar_right and not no_sidebars %}{% set cols = "col-lg-4" %}{% endif %}
{% if not page_offcanvas %}{% set offcanvas_class = "no-offcanvas" %}{% endif %}
{% if not page_banner %}{% set banner_class = "no-banner" %}{% endif %}

{% block block_page_offcanvas %}
  {% if page_offcanvas %}
    <div role="complementary" id="offcanvas-region" aria-label="Page off-canvas">
      {{ page_offcanvas|raw }}
    </div>
  {% endif %}
{% endblock %}

{# TEMPLATE #}
{% block block_page_header %}
  {% if page_header %}
    <header role="banner" id="header" class="header-{{ banner_class }}">
      {{ page_header|raw }}
    </header>
  {% endif %}
{% endblock %}

{% block block_page_announcements %}
  {% if page_announcements %}
    <div role="complementary" id="announcements" aria-label="Page announcements">
      {{ page_announcements|raw }}
    </div>
  {% endif %}
{% endblock %}

{% block block_page_banner %}
  {% if page_banner or floating_title %}
    <div role="complementary" id="banner" class="front-{{ front }}" aria-label="Page banner">
      {{ page_banner|raw }}
      {% if floating_title %}
        <div class="container">
          {% if page_highlighted %}{{ page_highlighted|raw }}{% endif %}
        </div>
      {% endif %}
    </div>
  {% endif %}
{% endblock %}

{% block block_main_content_open %}
<div class="{{ main_container_classes|join(' ') }}" id="main-container">
  <div class="{{ full_width ? 'container-fluid' : 'container'}}">
    <div class="row" id="main-row">
{% endblock %}

      {% block block_page_sidebar_left %}
        {% if page_sidebar_left and not no_sidebars %}
          <aside role="complementary" id="sidebar-left" class="col-lg-4 sidebar-{{ banner_class }} sidebar-{{ offcanvas_class }}" aria-label="Left sidebar">
            {{ page_sidebar_left|raw }}
          </aside>
        {% endif %}
      {% endblock %}

      {% block block_page_main %}
        <main role="main" class="{{ cols }} page-{{ banner_class }} page-{{ offcanvas_class }} {{ page_no_pad ? 'p-0' }}">
          {% if not floating_title %}
            {% if page_highlighted %}{{ page_highlighted|raw }}{% endif %}
          {% endif %}
          {% if page_help %}{{ page_help|raw }}{% endif %}
          {% if page_breadcrumb %}{{ page_breadcrumb|raw }}{% endif %}
          {% if page_content %}{{ page_content|raw }}{% endif %}
        </main>
      {% endblock %}

      {% block block_page_sidebar_right %}
        {% if page_sidebar_right and not no_sidebars %}
          <aside role="complementary" id="sidebar-right" class="col-lg-4 sidebar-{{ banner_class }} sidebar-{{ offcanvas_class }}" aria-label="Right sidebar">
            {{ page_sidebar_right|raw }}
          </aside>
        {% endif %}
      {% endblock %}

{% block block_main_content_close %}
    </div>
  </div>
</div>
{% endblock %}

{% block block_page_below_content %}
  {% if page_below_content %}
    <aside role="complementary" id="post-content" class="col-lg-12" aria-label="Page content after">
      {{ page_below_content|raw }}
    </aside>
  {% endif %}
{% endblock %}

{% block block_page_below_content_secondary %}
  {% if page_below_content_secondary %}
    <aside role="complementary" id="post-content-secondary" class="col-lg-12" aria-label="Page content final">
      {{ page_below_content_secondary|raw }}
    </aside>
  {% endif %}
{% endblock %}

{% block block_page_footer %}
  {% if page_footer_top or page_footer_bottom or page_footer_final %}
    <footer role="contentinfo">
      {% if page_footer_top %}
        <div id="ft-top">
          {# ScrollTop #}
          <a id="scrl-top" class="scrl-{{ scrl_top_side }}"
             role="button"
             href="#"
             aria-label="Scroll to top of page"
             data-alt-toggle="scrollto"
             data-alt-target="top" >
            {{ scrl_top_link|raw }}
          </a>
          {# / ScrollTop #}
          <div class="container">
            {{ page_footer_top|raw }}
          </div>
        </div>
      {% endif %}
      {% if page_footer_bottom %}
        <div id="ft-bottom">
          <div class="container">
            {{ page_footer_bottom|raw }}
          </div>
        </div>
      {% endif %}
      {% if page_footer_final %}
        <div id="ft-final">
          <div class="container">
            {{ page_footer_final|raw }}
          </div>
        </div>
      {% endif %}
    </footer>
  {% endif %}
{% endblock %}

{% block block_page_modal %}
  {% if page_modal %}
    <div role="complementary" id="modal-region" aria-label="Page modals">
      {{ page_modal|raw }}
    </div>
  {% endif %}
{% endblock %}
