{% extends '@layouts/master.twig' %}

<% if (config.get('jsFramework') === 'jsb') { -%>
{% block activeRoute %}/{% endblock %}
<% } -%>
{% block title %}nikita kickstarter{% endblock %}
{% block description %}This is the startpage of your nikita kickstarter.{% endblock %}

<% if (config.get('jsFramework') === 'react') { -%>
{% block body %}
    <div id="main-app"></div>
<%     if (config.get('libraries').includes('react-a11y-dialog')) { -%>
    <div id="main-dialogs"></div>
<%     } -%>
{% endblock %}
<% } -%>
<% if (config.get('jsFramework') === 'jsb') { -%>
{% block body %}
    {% include '@components/page-blocks/sample/sample.twig' %}
<%     if (config.get('libraries').includes('a11y-dialog')) { -%>
    <br />
    {% include '@components/common/button/button.twig' with {
        isPrimary: true,
        text: 'Open sample dialog',
        attr: { 'data-a11y-dialog-show': 'my-dialog' },
    } only %}
    {% embed '@components/common/dialog/dialog.twig' with {
        id: 'my-dialog',
        title: 'Dialog Title',
    } only %}
        {% block content %}
            <p>Dialog Content</p>
        {% endblock %}
    {% endembed %}
<%     } -%>
<%     if (config.get('libraries').includes('swiper')) { -%>
    <br />
    {% embed '@components/common/slider/slider.twig' %}
        {% block content %}
            <div class="swiper-slide">Hi, I am slide 1</div>
            <div class="swiper-slide">Hi, I am slide 2</div>
            <div class="swiper-slide">Hi, I am slide 3</div>
            <div class="swiper-slide">Hi, I am slide 4</div>
        {% endblock %}
    {% endembed %}
<%     } -%>
{% endblock %}
<% } -%>