{# LIBRARIES #}
{{ attach_library('ui_patterns/libraries.vendor_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 page_no_mag = page_no_mag|default(false) %}
{% set floating_title = floating_title|default(false) %}
{% set mobile_sidebars_first = mobile_sidebars_first|default(false) %}
{% set header_class = header_class|default('') %}
{% set container_classes = container_classes|default('') %}
{% set main_classes = main_classes|default('') %}
{% set page_sidebar_left_class = page_sidebar_left_class|default('') %}
{% set page_sidebar_right_class = page_sidebar_right_class|default('') %}
{% 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>") %}

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

{% 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 %}

{% set header_next = 'main_container' %}
{% if page_above_content %}
  {% set header_next = 'page_above_content' %}
{% endif %}
{% if page_banner or floating_title %}
  {% set header_next = 'page_banner' %}
{% endif %}
{% if page_announcements_lower %}
  {% set header_next = 'page_announcements_lower' %}
{% endif %}

{# OFF CANVAS #}
{% set page_offcanvas_attributes = create_attribute()
  .setAttribute('role', 'complementary')
  .setAttribute('id', 'offcanvas-region')
  .setAttribute('aria-label', 'Page off-canvas')
%}

{# HEADER #}
{% set page_header_attributes = create_attribute()
  .setAttribute('role', 'banner')
  .setAttribute('id', 'header')
%}
{% set page_header_classes = [
  header_clas,
  'header-' ~ banner_class,
] %}

{# ANNOUCEMENTS UPPER #}
{% set page_announcements_attributes = create_attribute()
  .setAttribute('role', 'complementary')
  .setAttribute('id', 'announcements')
  .setAttribute('aria-label', 'Page announcements')
%}

{# ANNOUCEMENTS LOWER #}
{% set page_announcements_lower_attributes = create_attribute()
  .setAttribute('role', 'complementary')
  .setAttribute('id', 'announcements-lower')
  .setAttribute('aria-label', 'Page announcements lower')
%}
{% set page_announcements_lower_classes = [
  header_next == 'page_announcements_lower' ? 'hdr-is-nxt',
  page_announcements ? 'hdr-ans',
] %}

{# BANNER #}
{% set page_banner_attributes = create_attribute()
  .setAttribute('role', 'complementary')
  .setAttribute('id', 'banner')
  .setAttribute('aria-label', 'Page banner')
%}
{% set page_banner_classes = [
  'front-' ~ front,
  header_next == 'page_banner' ? 'hdr-is-nxt',
  page_announcements ? 'hdr-ans',
] %}

{# ABOVE CONTENT #}
{% set page_above_content_classes = [
  'container',
  'title-above-content',
  header_next == 'page_above_content' ? 'hdr-is-nxt',
  page_announcements ? 'hdr-ans',
] %}

{# MAIN CONTAINER #}
{% set main_container_attributes = create_attribute()
  .setAttribute('id', 'main-container')
%}
{% set main_container_classes = [
  'front-' ~ (front ? '1' : '0'),
  floating_title ? 'with-flt-title',
  mobile_sidebars_first ? 'sdbrs-first',
  header_next == 'main_container' ? 'hdr-is-nxt',
  page_announcements ? 'hdr-ans',
  container_classes,
] %}

{# SIDEBAR LEFT #}
{% set page_sidebar_left_attributes = create_attribute()
  .setAttribute('role', 'complementary')
  .setAttribute('id', 'sidebar-left')
  .setAttribute('aria-label', 'Left sidebar')
%}
{% set page_sidebar_left_classes = [
  'col-lg-4',
  'sidebar-' ~ banner_class,
  'sidebar-' ~ offcanvas_class,
  page_sidebar_left_class,
] %}

{# MAIN CONTENT #}
{% set main_attributes = create_attribute().setAttribute('role', 'main') %}
{% set main_classes = [
  main_classes,
  cols,
  'page-' ~ banner_class,
  'page-' ~ offcanvas_class,
  page_no_pad ? 'p-0',
  page_no_mag ? 'm-0',
] %}

{# SIDEBAR RIGHT #}
{% set page_sidebar_right_attributes = create_attribute()
  .setAttribute('role', 'complementary')
  .setAttribute('id', 'sidebar-right')
  .setAttribute('aria-label', 'Right sidebar')
%}
{% set page_sidebar_right_classes = [
  'col-lg-4',
  'sidebar-' ~ banner_class,
  'sidebar-' ~ offcanvas_class,
  page_sidebar_right_class,
] %}

{# BELOW CONTENT #}
{% set page_below_content_attributes = create_attribute()
  .setAttribute('role', 'complementary')
  .setAttribute('id', 'post-content')
  .setAttribute('aria-label', 'Page content after')
%}
{% set page_below_content_classes = [
  'col-lg-12',
] %}

{# CONTENT FINAL #}
{% set page_below_content_secondary_attributes = create_attribute()
  .setAttribute('role', 'complementary')
  .setAttribute('id', 'post-content-secondary')
  .setAttribute('aria-label', 'Page content final')
%}
{% set page_below_content_secondary_classes = [
  'col-lg-12',
] %}

{# MODAL #}
{% set page_modal_attributes = create_attribute()
  .setAttribute('role', 'complementary')
  .setAttribute('id', 'modal-region')
  .setAttribute('aria-label', 'Page modals')
%}

{# SCROLL TOP #}
{% set scroll_attributes = create_attribute()
  .setAttribute('id', 'scrl-top')
  .setAttribute('role', 'button')
  .setAttribute('href', '#')
  .setAttribute('aria-label', 'Scroll to top of page')
  .setAttribute('data-alt-toggle', 'scrollto')
  .setAttribute('data-alt-target', 'top')
%}

{# TEMPLATE #}
{# OFF CANVAS #}
{% block block_page_offcanvas %}
  {% if page_offcanvas %}
    <div {{ page_offcanvas_attributes }}>
      {{ page_offcanvas|raw }}
    </div>
  {% endif %}
{% endblock %}

{# HEADER #}
{% block block_page_header %}
  {% if page_header %}
    <header {{ page_header_attributes.addClass(page_header_classes) }}>
      {{ page_header|raw }}
    </header>
  {% endif %}
{% endblock %}

{# ANNOUCEMENTS UPPER #}
{% block block_page_announcements %}
  {% if page_announcements %}
    <div {{ page_announcements_attributes}}>
      {{ page_announcements|raw }}
    </div>
  {% endif %}
{% endblock %}

{# ANNOUCEMENTS LOWER #}
{% block block_page_announcements_lower %}
  {% if page_announcements_lower %}
    <div {{ page_announcements_lower_attributes.addClass(page_announcements_lower_classes) }}>
      {{ page_announcements_lower|raw }}
    </div>
  {% endif %}
{% endblock %}

{# BANNER #}
{% block block_page_banner %}
  {% if page_banner or floating_title %}
    <div {{ page_banner_attributes.addClass(page_banner_classes) }}>
      {{ page_banner|raw }}
      {% if floating_title %}
        <div class="container">
          {% if page_highlighted %}{{ page_highlighted|raw }}{% endif %}
        </div>
      {% endif %}
    </div>
  {% endif %}
{% endblock %}

{# ABOVE CONTENT #}
{% block block_page_above_content %}
  {% if page_above_content %}
    <div class="{{ page_above_content_classes|join(' ') }}">
      {% if page_highlighted %}{{ page_highlighted|raw }}{% endif %}
    </div>
    <aside role="complementary" id="above-content" class="col-lg-12" aria-label="Page content before">
      {{ page_above_content|raw }}
    </aside>
  {% endif %}
{% endblock %}

{# MAIN CONTAINER #}
{% block block_main_content_open %}
<div {{ main_container_attributes.addClass(main_container_classes) }}>
  <div class="{{ full_width ? 'container-fluid' : 'container'}}">
    <div class="row" id="main-row">
      {% endblock %}

      {# SIDEBAR LEFT #}
      {% block block_page_sidebar_left %}
        {% if page_sidebar_left and not no_sidebars %}
          <aside {{ page_sidebar_left_attributes.addClass(page_sidebar_left_classes) }}>
            {{ page_sidebar_left|raw }}
          </aside>
        {% endif %}
      {% endblock %}

      {# MAIN CONTENT #}
      {% block block_page_main %}
        <main {{ main_attributes.addClass(main_classes) }}>
          {% 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 %}

      {# SIDEBAR RIGHT #}
      {% block block_page_sidebar_right %}
        {% if page_sidebar_right and not no_sidebars %}
          <aside {{ page_sidebar_right_attributes.addClass(page_sidebar_right_classes) }}>
            {{ page_sidebar_right|raw }}
          </aside>
        {% endif %}
      {% endblock %}

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

{# BELOW CONTENT #}
{% block block_page_below_content %}
  {% if page_below_content %}
    <aside {{ page_below_content_attributes.addClass(page_below_content_classes) }}>
      {{ page_below_content|raw }}
    </aside>
  {% endif %}
{% endblock %}

{# CONTENT FINAL #}
{% block block_page_below_content_secondary %}
  {% if page_below_content_secondary %}
    <aside {{ page_below_content_secondary_attributes.addClass(page_below_content_secondary_classes) }}>
      {{ page_below_content_secondary|raw }}
    </aside>
  {% endif %}
{% endblock %}

{# FOOTER #}
{% 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">
          {# SCROLL TOP #}
          <a {{ scroll_attributes.addClass('scrl-' ~ scrl_top_side) }}>
            {{ scrl_top_link|raw }}
          </a>
          <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 %}

{# MODAL #}
{% block block_page_modal %}
  {% if page_modal %}
    <div {{ page_modal_attributes }}>
      {{ page_modal|raw }}
    </div>
  {% endif %}
{% endblock %}
