{% extends '@DediSyliusTheme/DesignSystem/layout.html.twig' %}

{% block content %}
    <div class="ds-container">
        <h2 class="ds-title">{{ 'app.design_system.modals.title'|trans }}</h2>
        <p class="ds-text">{{ 'app.design_system.modals.desc'|trans }}</p>

        <h3 class="ds-subtitle">{{ 'app.design_system.modals.default'|trans }} <button class="ds-btn-code" rel=".example-default"></button></h3>
        <section class="ds-example example-default">
            <div class="html">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-default">Modal default</button>
            </div>
            <pre>
                <code>&lt;button type="button" class="btn btn-primary"data-toggle="modal" data-target="#confirmation-default">&lt;/button></code>
            </pre>
        </section>

        <h3 class="ds-subtitle">{{ 'app.design_system.modals.confirm'|trans }} <button class="ds-btn-code" rel=".example-confirm"></button></h3>
        <section class="ds-example example-confirm">
            <div class="html">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#confirmation-modal">Modal confirm</button>
            </div>
            <pre>
                <code>&lt;button type="button" class="btn btn-primary"data-toggle="modal" data-target="#confirmation-modal">&lt;/button></code>
            </pre>
        </section>
    </div>
{% endblock %}

{% block modal %}
    {% include '@DediSyliusTheme/Modal/_default.html.twig' %}
    {% include '@DediSyliusTheme/Modal/_confirmation.html.twig' %}
{% endblock %}
