{#
/**
 * @file
 * Flyout story template.
 */
#}

<button data-flyout-open-trigger data-flyout-target="#flyout-story1" role="button">Open flyout 1</button>

<div id="flyout-story1" data-flyout data-flyout-direction="{{ direction }}" {% if expanded %}data-flyout-expanded{% endif %}>

  <div data-flyout-panel>
    <span data-flyout-close-trigger>
      <strong>Close x</strong>
    </span>

    <br/>Flyout 1<br/>
    Labore commodo sunt reprehenderit mollit ipsum adipisicing commodo nisi
    cupidatat mollit dolor commodo velit tempor laboris enim est sit labore
    deserunt enim ullamco irure anim do mollit deserunt Lorem aliquip dolore ex
    laboris ea consectetur aliquip adipisicing consectetur eu ad dolore ullamco
    nostrud reprehenderit quis cillum reprehenderit excepteur enim incididunt.
  </div>
</div>

<hr>

<button data-flyout-open-trigger data-flyout-target="#flyout-story2" role="button">Open flyout 2</button>

<div id="flyout-story2" data-flyout data-flyout-direction="{{ direction }}" {% if expanded %}data-flyout-expanded{% endif %}>

  <div data-flyout-panel>
    <span data-flyout-close-trigger>
      <strong>Close ❌</strong>
    </span>

    <br/>Flyout 2<br/>
    Labore commodo sunt reprehenderit mollit ipsum adipisicing commodo nisi
    cupidatat mollit dolor commodo velit tempor laboris enim est sit labore
    deserunt enim ullamco irure anim do mollit deserunt Lorem aliquip dolore ex
    laboris ea consectetur aliquip adipisicing consectetur eu ad dolore ullamco
    nostrud reprehenderit quis cillum reprehenderit excepteur enim incididunt.
  </div>
</div>

<hr>

<button data-flyout-open-trigger role="button">Open flyout 3 (no trigger target)</button>
<div id="flyout-story3" data-flyout data-flyout-direction="{{ direction }}" {% if expanded %}data-flyout-expanded{% endif %}>

  <div data-flyout-panel>
    <span data-flyout-close-trigger>
      <strong>Close ❌</strong>
    </span>

    <br/>Flyout 3<br/>
    Labore commodo sunt reprehenderit mollit ipsum adipisicing commodo nisi
    cupidatat mollit dolor commodo velit tempor laboris enim est sit labore
    deserunt enim ullamco irure anim do mollit deserunt Lorem aliquip dolore ex
    laboris ea consectetur aliquip adipisicing consectetur eu ad dolore ullamco
    nostrud reprehenderit quis cillum reprehenderit excepteur enim incididunt.
  </div>
</div>

<hr>

<button data-flyout-open-trigger role="button">Open flyout 4 (duration)</button>
<div id="flyout-story4" data-flyout data-flyout-direction="{{ direction }}" {% if duration %}data-flyout-duration="{{ duration }}"{% endif %} {% if expanded %}data-flyout-expanded{% endif %}>

  <div data-flyout-panel>
    <span data-flyout-close-trigger>
      <strong>Close ❌</strong>
    </span>

    <br/>Flyout 4<br/>
    Labore commodo sunt reprehenderit mollit ipsum adipisicing commodo nisi
    cupidatat mollit dolor commodo velit tempor laboris enim est sit labore
    deserunt enim ullamco irure anim do mollit deserunt Lorem aliquip dolore ex
    laboris ea consectetur aliquip adipisicing consectetur eu ad dolore ullamco
    nostrud reprehenderit quis cillum reprehenderit excepteur enim incididunt.
  </div>
</div>

<hr>

<button data-flyout-open-trigger data-flyout-target="#flyout-story5" role="button">Open flyout 5 and close all</button>
<div id="flyout-story5" data-flyout data-flyout-direction="{{ direction }}" {% if expanded %}data-flyout-expanded{% endif %}>

  <div data-flyout-panel>
    <span data-flyout-close-all-trigger>
      <strong>Close all ❌</strong>
    </span>

    <br/>Flyout 5<br/>
    Labore commodo sunt reprehenderit mollit ipsum adipisicing commodo nisi
    cupidatat mollit dolor commodo velit tempor laboris enim est sit labore
    deserunt enim ullamco irure anim do mollit deserunt Lorem aliquip dolore ex
    laboris ea consectetur aliquip adipisicing consectetur eu ad dolore ullamco
    nostrud reprehenderit quis cillum reprehenderit excepteur enim incididunt.
  </div>
</div>
