<div class="hide-me">
  <button class="js-c-modal-dialog-trigger" type="button" aria-controls="c-modal-dialog-{{id}}" aria-expanded="false">Open dialog</button>
  <p>This is example text. It includes <a href="#">multiple links</a>, in order to demonstrate that users are unable to navigate to elements beneath the dialog while it's open (keyboard trap).
  <a href="#" class="js-c-modal-dialog-trigger" aria-controls="c-modal-dialog-{{id}}" aria-expanded="false">Here's a link that also controls the dialog</a> with some more text.</p>
</div>

<div class="c-modal-dialog c-modal-dialog--{{theme}} js-c-modal-dialog{{#if scrollableModal}} c-modal-dialog--scrollable{{/if}}{{#if inner}} c-modal-dialog--click-close{{/if}}"
  id="c-modal-dialog-{{id}}" role="dialog" aria-labelledby="c-modal-dialog-{{id}}-title" hidden>
  {{#if inner}}<div class="c-modal-dialog__inner">{{/if}}
    <div class="c-modal-dialog__toolbar">
      <button type="button" class="c-modal-dialog__close-button" aria-label="Close modal">
        <svg class="c-modal-dialog__close-icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#close-x"></use>
        </svg>
      </button>
    </div>
    <h2 id="c-modal-dialog-{{id}}-title" class="u-visually-hidden">Example modal dialog</h2>
    <div class="c-modal-dialog__contents{{#if scrollableContent}} c-modal-dialog__contents--scrollable{{/if}}">
      <p>Ut molestie pharetra vehicula. Etiam a <a href="#">egestas mauris</a>. Mauris posuere metus eu gravida euismod. Aenean metus nisi, dignissim id mi luctus, volutpat accumsan tellus. Integer ut mollis dolor. Suspendisse consectetur orci id placerat aliquam.</p>
      <p>Suspendisse id risus lobortis, porta nulla at, pulvinar turpis. Etiam risus tortor, viverra quis maximus ac, facilisis non quam. Cras sed tellus consectetur, euismod ipsum aliquet, efficitur nisl. Mauris pretium varius erat, <a href="#">nec accumsan orci congue at</a>.</p>
      <p>Nam vitae finibus ex. Aenean viverra in nunc vitae imperdiet. Nullam vulputate hendrerit odio quis iaculis. Praesent porttitor metus vel lacus ultrices, eu egestas nulla eleifend. Nulla luctus eros non erat consectetur, sed finibus ante vehicula. <a href="#">Maecenas varius</a> accumsan enim, in eleifend ligula.</p>
      <p>Suspendisse id risus lobortis, porta nulla at, pulvinar turpis. Etiam risus tortor, viverra quis maximus ac, facilisis non quam. Cras sed tellus consectetur, euismod ipsum aliquet, efficitur nisl. Mauris pretium varius erat, <a href="#">nec accumsan orci congue at</a>.</p>
      <p>Nam vitae finibus ex. Aenean viverra in nunc vitae imperdiet. Nullam vulputate hendrerit odio quis iaculis. Praesent porttitor metus vel lacus ultrices, eu egestas nulla eleifend. Nulla luctus eros non erat consectetur, sed finibus ante vehicula. <a href="#">Maecenas varius</a> accumsan enim, in eleifend ligula.</p>
      <p>Suspendisse id risus lobortis, porta nulla at, pulvinar turpis. Etiam risus tortor, viverra quis maximus ac, facilisis non quam. Cras sed tellus consectetur, euismod ipsum aliquet, efficitur nisl. Mauris pretium varius erat, <a href="#">nec accumsan orci congue at</a>.</p>
      <p>Nam vitae finibus ex. Aenean viverra in nunc vitae imperdiet. Nullam vulputate hendrerit odio quis iaculis. Praesent porttitor metus vel lacus ultrices, eu egestas nulla eleifend. Nulla luctus eros non erat consectetur, sed finibus ante vehicula. <a href="#">Maecenas varius</a> accumsan enim, in eleifend ligula.</p>
      <p>Suspendisse id risus lobortis, porta nulla at, pulvinar turpis. Etiam risus tortor, viverra quis maximus ac, facilisis non quam. Cras sed tellus consectetur, euismod ipsum aliquet, efficitur nisl. Mauris pretium varius erat, <a href="#">nec accumsan orci congue at</a>.</p>
      <p>Nam vitae finibus ex. Aenean viverra in nunc vitae imperdiet. Nullam vulputate hendrerit odio quis iaculis. Praesent porttitor metus vel lacus ultrices, eu egestas nulla eleifend. Nulla luctus eros non erat consectetur, sed finibus ante vehicula. <a href="#">Maecenas varius</a> accumsan enim, in eleifend ligula.</p>
      <p>Suspendisse id risus lobortis, porta nulla at, pulvinar turpis. Etiam risus tortor, viverra quis maximus ac, facilisis non quam. Cras sed tellus consectetur, euismod ipsum aliquet, efficitur nisl. Mauris pretium varius erat, <a href="#">nec accumsan orci congue at</a>.</p>
      <p>Nam vitae finibus ex. Aenean viverra in nunc vitae imperdiet. Nullam vulputate hendrerit odio quis iaculis. Praesent porttitor metus vel lacus ultrices, eu egestas nulla eleifend. Nulla luctus eros non erat consectetur, sed finibus ante vehicula. <a href="#">Maecenas varius</a> accumsan enim, in eleifend ligula.</p>
      <p>Suspendisse id risus lobortis, porta nulla at, pulvinar turpis. Etiam risus tortor, viverra quis maximus ac, facilisis non quam. Cras sed tellus consectetur, euismod ipsum aliquet, efficitur nisl. Mauris pretium varius erat, <a href="#">nec accumsan orci congue at</a>.</p>
      <p>Nam vitae finibus ex. Aenean viverra in nunc vitae imperdiet. Nullam vulputate hendrerit odio quis iaculis. Praesent porttitor metus vel lacus ultrices, eu egestas nulla eleifend. Nulla luctus eros non erat consectetur, sed finibus ante vehicula. <a href="#">Maecenas varius</a> accumsan enim, in eleifend ligula.</p>
      <p>Suspendisse id risus lobortis, porta nulla at, pulvinar turpis. Etiam risus tortor, viverra quis maximus ac, facilisis non quam. Cras sed tellus consectetur, euismod ipsum aliquet, efficitur nisl. Mauris pretium varius erat, <a href="#">nec accumsan orci congue at</a>.</p>
      <p>Nam vitae finibus ex. Aenean viverra in nunc vitae imperdiet. Nullam vulputate hendrerit odio quis iaculis. Praesent porttitor metus vel lacus ultrices, eu egestas nulla eleifend. Nulla luctus eros non erat consectetur, sed finibus ante vehicula. <a href="#">Maecenas varius</a> accumsan enim, in eleifend ligula.</p>
      <p>Suspendisse id risus lobortis, porta nulla at, pulvinar turpis. Etiam risus tortor, viverra quis maximus ac, facilisis non quam. Cras sed tellus consectetur, euismod ipsum aliquet, efficitur nisl. Mauris pretium varius erat, <a href="#">nec accumsan orci congue at</a>.</p>
      <p>Nam vitae finibus ex. Aenean viverra in nunc vitae imperdiet. Nullam vulputate hendrerit odio quis iaculis. Praesent porttitor metus vel lacus ultrices, eu egestas nulla eleifend. Nulla luctus eros non erat consectetur, sed finibus ante vehicula. <a href="#">Maecenas varius</a> accumsan enim, in eleifend ligula.</p>
      <p>Suspendisse id risus lobortis, porta nulla at, pulvinar turpis. Etiam risus tortor, viverra quis maximus ac, facilisis non quam. Cras sed tellus consectetur, euismod ipsum aliquet, efficitur nisl. Mauris pretium varius erat, <a href="#">nec accumsan orci congue at</a>.</p>
      <p>Nam vitae finibus ex. Aenean viverra in nunc vitae imperdiet. Nullam vulputate hendrerit odio quis iaculis. Praesent porttitor metus vel lacus ultrices, eu egestas nulla eleifend. Nulla luctus eros non erat consectetur, sed finibus ante vehicula. <a href="#">Maecenas varius</a> accumsan enim, in eleifend ligula.</p>
      <p>Suspendisse id risus lobortis, porta nulla at, pulvinar turpis. Etiam risus tortor, viverra quis maximus ac, facilisis non quam. Cras sed tellus consectetur, euismod ipsum aliquet, efficitur nisl. Mauris pretium varius erat, <a href="#">nec accumsan orci congue at</a>.</p>
      <p>Nam vitae finibus ex. Aenean viverra in nunc vitae imperdiet. Nullam vulputate hendrerit odio quis iaculis. Praesent porttitor metus vel lacus ultrices, eu egestas nulla eleifend. Nulla luctus eros non erat consectetur, sed finibus ante vehicula. <a href="#">Maecenas varius</a> accumsan enim, in eleifend ligula.</p>
      <p>Suspendisse id risus lobortis, porta nulla at, pulvinar turpis. Etiam risus tortor, viverra quis maximus ac, facilisis non quam. Cras sed tellus consectetur, euismod ipsum aliquet, efficitur nisl. Mauris pretium varius erat, <a href="#">nec accumsan orci congue at</a>.</p>
      <p>Nam vitae finibus ex. Aenean viverra in nunc vitae imperdiet. Nullam vulputate hendrerit odio quis iaculis. Praesent porttitor metus vel lacus ultrices, eu egestas nulla eleifend. Nulla luctus eros non erat consectetur, sed finibus ante vehicula. <a href="#">Maecenas varius</a> accumsan enim, in eleifend ligula.</p>
      <p>Suspendisse id risus lobortis, porta nulla at, pulvinar turpis. Etiam risus tortor, viverra quis maximus ac, facilisis non quam. Cras sed tellus consectetur, euismod ipsum aliquet, efficitur nisl. Mauris pretium varius erat, <a href="#">nec accumsan orci congue at</a>.</p>
      <p>Nam vitae finibus ex. Aenean viverra in nunc vitae imperdiet. Nullam vulputate hendrerit odio quis iaculis. Praesent porttitor metus vel lacus ultrices, eu egestas nulla eleifend. Nulla luctus eros non erat consectetur, sed finibus ante vehicula. <a href="#">Maecenas varius</a> accumsan enim, in eleifend ligula.</p>
      <p>Suspendisse id risus lobortis, porta nulla at, pulvinar turpis. Etiam risus tortor, viverra quis maximus ac, facilisis non quam. Cras sed tellus consectetur, euismod ipsum aliquet, efficitur nisl. Mauris pretium varius erat, <a href="#">nec accumsan orci congue at</a>.</p>
      <p>Nam vitae finibus ex. Aenean viverra in nunc vitae imperdiet. Nullam vulputate hendrerit odio quis iaculis. Praesent porttitor metus vel lacus ultrices, eu egestas nulla eleifend. Nulla luctus eros non erat consectetur, sed finibus ante vehicula. <a href="#">Maecenas varius</a> accumsan enim, in eleifend ligula.</p>
      <p>Suspendisse id risus lobortis, porta nulla at, pulvinar turpis. Etiam risus tortor, viverra quis maximus ac, facilisis non quam. Cras sed tellus consectetur, euismod ipsum aliquet, efficitur nisl. Mauris pretium varius erat, <a href="#">nec accumsan orci congue at</a>.</p>
      <p>Nam vitae finibus ex. Aenean viverra in nunc vitae imperdiet. Nullam vulputate hendrerit odio quis iaculis. Praesent porttitor metus vel lacus ultrices, eu egestas nulla eleifend. Nulla luctus eros non erat consectetur, sed finibus ante vehicula. <a href="#">Maecenas varius</a> accumsan enim, in eleifend ligula.</p>
      <p>Suspendisse id risus lobortis, porta nulla at, pulvinar turpis. Etiam risus tortor, viverra quis maximus ac, facilisis non quam. Cras sed tellus consectetur, euismod ipsum aliquet, efficitur nisl. Mauris pretium varius erat, <a href="#">nec accumsan orci congue at</a>.</p>
      <p>Nam vitae finibus ex. Aenean viverra in nunc vitae imperdiet. Nullam vulputate hendrerit odio quis iaculis. Praesent porttitor metus vel lacus ultrices, eu egestas nulla eleifend. Nulla luctus eros non erat consectetur, sed finibus ante vehicula. <a href="#">Maecenas varius</a> accumsan enim, in eleifend ligula.</p>
      <p>Suspendisse id risus lobortis, porta nulla at, pulvinar turpis. Etiam risus tortor, viverra quis maximus ac, facilisis non quam. Cras sed tellus consectetur, euismod ipsum aliquet, efficitur nisl. Mauris pretium varius erat, <a href="#">nec accumsan orci congue at</a>.</p>
      <p>Nam vitae finibus ex. Aenean viverra in nunc vitae imperdiet. Nullam vulputate hendrerit odio quis iaculis. Praesent porttitor metus vel lacus ultrices, eu egestas nulla eleifend. Nulla luctus eros non erat consectetur, sed finibus ante vehicula. <a href="#">Maecenas varius</a> accumsan enim, in eleifend ligula.</p>
    </div>
  {{#if inner}}</div>{{/if}}
</div>

<div class="hide-me">
  <p>More example text with <a href="#">more example links</a>. This paragraph's parent element will be temporarily hidden from screen readers while the dialog is open. Here's <a href="#">another link</a> that leads nowhere.</p>
</div>
