{% extends "@bulma/system/page.html.twig" %}

{#
  Limit the main content column to a max of 10 units at widescreen and above.
  @see system/page.html.twig in the Bulma theme.
#}
{% if not page.content_attributes %}
  {%
    set page = page|merge({
      'content_attributes': create_attribute().addClass([
        'main-content',
        'column',
        'is-10-widescreen',
      ]),
    })
  %}
{% endif %}
{% block navbar %}
{# We put everything in Bulma columns so must do navbar in header block, not here #}
{% endblock navbar %}
{% block header %}
<div class="header columns is-marginless">
  {% block navbar_branding %}
  {{ page.navbar_branding }}
  {% endblock navbar_branding %}
  <nav class="navigation column hamburger-container">
    <input class="checkbox" type="checkbox" id="hamburger-toggle" aria-label="Toggle Navigation"/>
    <label class="hamburger" for="hamburger-toggle">
      <span class="slice"></span>
      <span class="slice"></span>
      <span class="slice"></span>
    </label>
    <div class="columns drawer">
      {% block navbar_social %}
      {% if page.navbar_social %}
      <div class="column is-narrow">
        {{ page.navbar_social }}
      </div>
      {% endif %}
      {% endblock navbar_social %}
      {% block primary_menu %}
      {% if page.primary_menu %}
      <div class="column">
        {{ page.primary_menu }}
      </div>
      {% endif %}
      {% endblock primary_menu %}
      {% if page.header_search %}
      <div class="search-bar column is-narrow">
        {{ page.header_search }}
      </div>
      {% endif %}
    </div>

  </nav>
</div>
{% if is_front %}
<div class="columns">
  <div class="column has-text-centered">
    <p class="slogan"><strong class="title">{{ site_slogan }}</strong></p>
  </div>
</div>
{% endif %}
{{ page.highlighted }}
{{ page.help }}
{% block tabs %}
{# Drupal tabs (edit, delete, etc) #}
{{ page.header_tabs }}
{% endblock tabs %}
{% if not is_front %}
<section class="page-title">
  {% block header_and_search %}
  {% if page.header %}
  {# Header region #}
  <div class="container">
    <div class="columns is-vcentered">
      {{ page.header }}
    </div>
  </div>
  {% endif %}
  {% endblock header_and_search %}
</section>
{% endif %}
{% endblock header %}
{% block main %}
{# Main section #}
<section class="section main-section">
  <main role="main" class="container">
    <a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}

    <div class="columns is-centered">
      {% block main_content %}
      {# Set attributes for content. #}
      {% if not page.content_attributes %}
      {%
        set page = page|merge({
          'content_attributes': create_attribute().addClass([
            'main-content',
            'column',
          ]),
        })
      %}
      {% endif %}
      {# Main content #}
      <div{{page.content_attributes}}>
        {{ page.content }}
      </div>
      {% endblock main_content %}
      {% block sidebar_first %}
      {# Sidebar first #}
      {% if page.sidebar_first and not is_front and (not node or (node and node.bundle == 'page')) %}
        {# Set attributes for content. #}
        {% if not page.sidebar_first_attributes %}
        {%
          set page = page|merge({
            'sidebar_first_attributes': create_attribute().addClass([
              'sidebar-first',
              'column',
              'is-2',
            ]),
          })
        %}
        {% endif %}
        <aside{{page.sidebar_first_attributes|without('role')}} role="complimentary">
          {{ page.sidebar_first }}
        </aside>
      {% endif %}
      {% endblock sidebar_first %}
    </div>
    {{ page.content_bottom }}
  </main>
</section>
{% endblock main %}
{% block footer %}
{% if page.footer or page.footer_menus or page.footer_info or page.footer_notice or page.header_user %}
  <footer role="contentinfo" class="footer">
    <div class="container">
      {{ page.footer }}
      <div class="columns">
        {% if page.footer_menus %}
          {{ page.footer_menus }}
        {% endif %}
        {% if page.footer_info %}
          <div class="column">
            {{ page.footer_info }}
          </div>
        {% endif %}
        {% if page.header_user %}
          <div class="user-account-menu column is-narrow">
            {{ page.header_user }}
          </div>
        {% endif %}
      </div>
      {% if page.footer_notice %}
        {{ page.footer_notice }}
      {% endif %}
    </div>
  </footer>
{% endif %}
{% endblock footer %}
