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

{# GLOABL VARIABLES #}
{% set front = front|default(false) %}
{% set full_width = full_width|default(false) %}
{% set no_sidebars = no_sidebars|default(false) %}
{% set force_sidebar_right = force_sidebar_right|default(false) %}
{% set page_no_pad = page_no_pad|default(false) %}
{% set floating_title = floating_title|default(false) %}
{% set mobile_sidebars_first = mobile_sidebars_first|default(false) %}
{% set container_classes = container_classes|default('') %}
{% set main_classes = main_classes|default('') %}

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

{% 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',
  mobile_sidebars_first ? 'sdbrs-first',
  container_classes,
] %}

{% if page_sidebar_left or (page_sidebar_right or force_sidebar_right) and not no_sidebars %}{% set cols = "col-lg-8" %}{% endif %}
{% if page_sidebar_left and (page_sidebar_right or force_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 %}

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

{% block block_page_header %}
  {% if page_header %}
    <header role="banner" id="header" class="header-{{ banner_class }} {{ header_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_announcements_lower %}
  {% if page_announcements_lower %}
    <div role="complementary" id="announcements-lower" aria-label="Page announcements lower">
      {{ page_announcements_lower|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_page_above_content %}
  {% if page_above_content %}
    <div class="{{ main_container_classes|join(' ') }}">
      <div class="container title-above-content">
        {% if page_highlighted %}{{ page_highlighted|raw }}{% endif %}
      </div>
    </div>
    <aside role="complementary" id="above-content" class="col-lg-12" aria-label="Page content before">
      {{ page_above_content|raw }}
    </aside>
  {% 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="{{ main_classes }} {{ cols }} page-{{ banner_class }} page-{{ offcanvas_class }} {{ page_no_pad ? 'p-0' }}">
          {% if not floating_title and not page_above_content %}
            {% 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 %}
