{% extends 'programmer/base.html' %}
{% load django_bootstrap5 %}

{% block content %}
<div class="hero-section fade-in">
    <h1 class="hero-title">🚀 Добро пожаловать!</h1>
    <p class="hero-subtitle">Я профессиональный программист 1С с опытом создания эффективных бизнес-решений</p>
</div>

<div class="grid grid-2">
    {% autoescape off %}
    {% for p in posts %}
    <div class="modern-card fade-in {% cycle '' 'secondary' %}">
        <div class="card-header">
            <h2 class="card-title">{{p.title}}</h2>
        </div>
        <div class="card-content">
            {{p.content}}
        </div>
        <div class="card-actions">
            <button onclick="openModal()" class="btn btn-primary">🎯 Получить консультацию</button>
        </div>
    </div>
    {% endfor %}
    {% endautoescape %}
</div>

<!-- Модальное окно формы -->
<div id="callbackModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>📞 Заявка на консультацию</h3>
            <button class="modal-close" onclick="closeModal()">&times;</button>
        </div>
        <div class="modal-body">
           <form method="post" action="{% url 'callback' %}" id="callbackForm">
                {% csrf_token %}

                <div class="form-group">
                    <label for="id_name">Имя *</label>
                    {{ form.name }}
                </div>

                <div class="form-group">
                    <label for="id_phone">Телефон *</label>
                    {{ form.phone }}
                </div>

                <div class="form-group">
                    <label for="id_email">Электронная почта</label>
                    {{ form.email }}
                </div>

                <div class="form-group">
                    <label for="id_question">Ваш вопрос</label>
                    {{ form.question }}
                </div>

                <div class="form-actions">
                    <button type="submit" class="btn btn-primary" style="width: 100%;">
                        📨 Отправить заявку
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{% if not posts %}
<div class="modern-card text-center fade-in">
    <h3>🚀 Контент скоро появится</h3>
    <p class="card-subtitle">Мы готовим для вас интересные материалы и кейсы</p>
    <div class="card-actions justify-center">
        <button onclick="openModal()" class="btn btn-primary">🎯 Получить консультацию</button>
    </div>
</div>
{% endif %}

<script>
function openModal() {
    document.getElementById('callbackModal').style.display = 'block';
}

function closeModal() {
    document.getElementById('callbackModal').style.display = 'none';
}

// Закрытие модального окна при клике вне его
window.onclick = function(event) {
    const modal = document.getElementById('callbackModal');
    if (event.target === modal) {
        closeModal();
    }
}

// Закрытие по ESC
document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape') {
        closeModal();
    }
});
</script>
{% endblock %}