{% extends "layout/base.twig" %}

{% block content %}
  <h1>{{ example.title }}</h1>
  <p>{{ example.message }}</p>

  {% include "@component/button/button.twig" with {
    text: "Click Me!",
    class: "primary-button"
  } %}

  {% include "@component/button/button.twig" with {
    text: example.buttonText,
    class: "secondary-button"
  } %}

  <button id="openModalBtn" class="button">Open Modal</button>

  {% include "@component/modal/modal.twig" with {
    id: "myModal",
    title: "My Awesome Modal",
    content: example.modalContent
  } %}

  {% include "@component/accordion/accordion.twig" %}

  {% include "@component/tabs/tabs.twig" %}

  {% include "@component/slider/slider.twig" %}

  {% include "@component/dropdown/dropdown.twig" with { data: example } %}

  {% include "@component/tooltip/tooltip.twig" with { data: example } %}

  <button id="showToastBtn" class="button">Show Toast</button>
{% endblock %}

