{#
/**
 * @file
 * Theme override to display a block.
 *
 * Available variables:
 * - plugin_id: The ID of the block implementation.
 * - label: The configured label of the block if visible.
 * - configuration: A list of the block's configuration values.
 *   - label: The configured label for the block.
 *   - label_display: The display settings for the label.
 *   - provider: The module or other provider that provided this block plugin.
 *   - Block plugin specific settings will also be stored here.
 * - content: The content of this block.
 * - attributes: array of HTML attributes populated by modules, intended to
 *   be added to the main container tag of this template.
 *   - id: A valid HTML ID and guaranteed unique.
 * - title_attributes: Same as attributes, except applied to the main title
 *   tag that appears in the template.
 * - title_prefix: Additional output populated by modules, intended to be
 *   displayed in front of the main title tag that appears in the template.
 * - title_suffix: Additional output populated by modules, intended to be
 *   displayed after the main title tag that appears in the template.
 *
 * @see template_preprocess_block()
 */
#}
{%-
  set classes = [
    'rm-block',
    'rm-config-provider--' ~ configuration.provider|clean_class,
    'rm-plugin-id--' ~ plugin_id_clean|clean_class,
    'js-hide',
  ]
-%}
{%- set heading_id = attributes.id ~ '-menu'|clean_id -%}
{%- set config_label = configuration.label ? configuration.label : 'Main menu'|t -%}
{%- set rm_label_class = configuration.label ? 'rm-toggle__label' : 'visually-hidden' -%}
{# The svg must come before the <use> elements due to a bug in Safari. #}
<svg style="display:none;">
  {# Toggle Icon open #}
  <symbol id="rm-toggle__icon--open" viewBox="0 0 1792 1792" preserveAspectRatio="xMinYMid meet">
    <path class="rm-toggle__icon__path" d="M1664 1344v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45z"/>
  </symbol>
  {# Toggle Icon close #}
  <symbol id="rm-toggle__icon--close" viewBox="0 0 1792 1792" preserveAspectRatio="xMinYMid meet">
    <path class="rm-toggle__icon__path" d="M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z"/>
  </symbol>
</svg>
<nav role="navigation" aria-labelledby="{{ heading_id }}"{{ attributes.addClass(classes)|without('role', 'aria-labelledby') }}>
  <div class="rm-block__inner">
    <div{{ title_attributes.addClass('rm-toggle')|without('id') }}>
      <button href="#rm-content" class="rm-toggle__link un-button" role='button' aria-controls="rm-content" aria-expanded="false">
        {# SVG open and close icons. #}
        <svg class="rm-toggle__icon">
          <use id="rm-toggle__icon--use" xlink:href="#rm-toggle__icon--open"></use>
        </svg>
        {# Button text, may be visually hidden. #}
        <span class="{{ rm_label_class }}" id="{{ heading_id }}">{{- config_label -}}</span>
      </button>
    </div>
    {%- block content -%}
      <div class="rm-block__content" id="rm-content">
        {# SVG accordion trigger icon. #}
        {%- if click_menus_enabled -%}
          <span id="rm-accordion-trigger" class="hidden">
            <button class="rm-accordion-trigger un-button" role='button' aria-controls="child-menu" aria-expanded="false">
              <svg class="rm-accordion-trigger__icon" viewBox="0 0 1792 1792" preserveAspectRatio="xMinYMid meet"><path d="M1600 736v192q0 40-28 68t-68 28h-416v416q0 40-28 68t-68 28h-192q-40 0-68-28t-28-68v-416h-416q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h416v-416q0-40 28-68t68-28h192q40 0 68 28t28 68v416h416q40 0 68 28t28 68z"/></svg>
            </button>
          </span>
        {%- endif -%}
        {{- content -}}
      </div>
    {%- endblock -%}
  </div>
</nav>