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

{% block title %}Демонстрация компонентов - {{ site.title }}{% endblock %}

{% block content %}
<div class="demo-header">
    <div class="container">
        <h1>Демонстрация компонентов</h1>
        <p>Интерактивные примеры всех доступных UI компонентов</p>
    </div>
</div>

<!-- Модальные окна -->
<section class="demo-section">
    <div class="container">
        <div class="demo-title">
            <h2>{{ components.modal.title }}</h2>
            <p>{{ components.modal.description }}</p>
        </div>
        
        <div class="demo-content">
            <div class="demo-buttons">
                {% for example in components.modal.examples %}
                    <button class="btn btn--primary" data-micromodal-trigger="{{ example.id }}">
                        {{ example.title }}
                    </button>
                {% endfor %}
            </div>
        </div>
        
        <!-- Модальные окна -->
        {% for example in components.modal.examples %}
            <div class="modal micromodal-slide" id="{{ example.id }}" aria-hidden="true">
                <div class="modal__overlay" tabindex="-1" data-micromodal-close>
                    <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="{{ example.id }}-title">
                        <header class="modal__header">
                            <h2 class="modal__title" id="{{ example.id }}-title">
                                {{ example.title }}
                            </h2>
                            <button class="modal__close" aria-label="Закрыть модальное окно" data-micromodal-close></button>
                        </header>
                        <main class="modal__content" id="{{ example.id }}-content">
                            <p>{{ example.content }}</p>
                            {% if example.id == 'modal-form' %}
                                <form class="modal-form">
                                    <div class="form-group">
                                        <label for="name" class="form-label">Имя</label>
                                        <input type="text" id="name" class="form-control" placeholder="Введите ваше имя">
                                    </div>
                                    <div class="form-group">
                                        <label for="email" class="form-label">Email</label>
                                        <input type="email" id="email" class="form-control" placeholder="example@email.com">
                                    </div>
                                    <div class="form-group">
                                        <label for="message" class="form-label">Сообщение</label>
                                        <textarea id="message" class="form-control" rows="3" placeholder="Ваше сообщение"></textarea>
                                    </div>
                                </form>
                            {% endif %}
                        </main>
                        <footer class="modal__footer">
                            <button class="btn btn--secondary" data-micromodal-close aria-label="Закрыть это модальное окно">Закрыть</button>
                            {% if example.id == 'modal-form' %}
                                <button class="btn btn--primary">Отправить</button>
                            {% endif %}
                        </footer>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
</section>

<!-- Вкладки -->
<section class="demo-section">
    <div class="container">
        <div class="demo-title">
            <h2>{{ components.tabs.title }}</h2>
            <p>{{ components.tabs.description }}</p>
        </div>
        
        <div class="demo-content">
            <div class="tabs" data-tabs>
                <div class="tabs__nav">
                    {% for example in components.tabs.examples %}
                        <button class="tabs__tab{% if loop.first %} tabs__tab--active{% endif %}" 
                                data-tab="{{ example.id }}" 
                                aria-controls="{{ example.id }}-panel">
                            {{ example.title }}
                        </button>
                    {% endfor %}
                </div>
                <div class="tabs__content">
                    {% for example in components.tabs.examples %}
                        <div class="tabs__panel{% if loop.first %} tabs__panel--active{% endif %}" 
                             id="{{ example.id }}-panel" 
                             data-panel="{{ example.id }}">
                            <p>{{ example.content }}</p>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Аккордеон -->
<section class="demo-section">
    <div class="container">
        <div class="demo-title">
            <h2>{{ components.accordion.title }}</h2>
            <p>{{ components.accordion.description }}</p>
        </div>
        
        <div class="demo-content">
            <div class="accordion" data-accordion>
                {% for example in components.accordion.examples %}
                    <div class="accordion__item">
                        <button class="accordion__header" 
                                data-accordion-trigger="{{ example.id }}"
                                aria-expanded="false"
                                aria-controls="{{ example.id }}-content">
                            <span>{{ example.title }}</span>
                            <span class="accordion__icon"></span>
                        </button>
                        <div class="accordion__content" 
                             id="{{ example.id }}-content"
                             data-accordion-content="{{ example.id }}">
                            <div class="accordion__body">
                                <p>{{ example.content }}</p>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
</section>

<!-- Уведомления -->
<section class="demo-section">
    <div class="container">
        <div class="demo-title">
            <h2>{{ components.toast.title }}</h2>
            <p>{{ components.toast.description }}</p>
        </div>
        
        <div class="demo-content">
            <div class="demo-buttons">
                {% for example in components.toast.examples %}
                    <button class="btn btn--{{ example.type }}" 
                            data-toast-trigger="{{ example.type }}"
                            data-toast-title="{{ example.title }}"
                            data-toast-message="{{ example.message }}">
                        {{ example.title }}
                    </button>
                {% endfor %}
            </div>
        </div>
    </div>
</section>
{% endblock %}