{% import './macros/render.twig' as render %}
{% extends './layout/default.twig' %}

{% block content %}

<div class="page-wrapper">
  <div class="grid-container">
    <h1>Modal</h1>
    <button id="btn-open-modal">Open Modal 1</button>
    <button id="btn-open-modal-2">Open Modal 2</button>

    {{
      render.component('Modal/modal', {
        id: 'modal-1',
        title: 'Modal 1',
        content: '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae nisi officiis eaque illo, maiores facere officia sed animi reiciendis reprehenderit similique possimus nesciunt.</p>',
        options: {
          triggerModalOpenSelector: '#btn-open-modal'
        }
      })
    }}

    {{
      render.component('Modal/modal', {
        id: 'modal-2',
        title: 'Modal 2',
        options: {
          triggerModalOpenSelector: '#btn-open-modal-2'
        }
      })
    }}
  </div> {# .grid-container #}
</div> {# .page-wrapper #}

{% endblock %}