{% extends "base.html" %}

{% block content %}
<div class="container mt-4">
    <h2 class="mb-4 text-light">Рассылка сообщений</h2>
    
    <form method="POST">
        <div class="mb-3">
            <label for="recipient_type" class="form-label text-light">Получатели</label>
            <select class="form-select bg-dark text-light" id="recipient_type" name="recipient_type" onchange="toggleUserSelect()">
                <option value="all">Все пользователи</option>
                <option value="single">Выбрать пользователя</option>
            </select>
        </div>
        
        <div class="mb-3" id="user_select" style="display: none;">
            <label for="user_id" class="form-label text-light">Выберите пользователя</label>
            <select class="form-select bg-dark text-light" id="user_id" name="user_id">
                {% for user in users %}
                <option value="{{ user.telegram_id }}">{{ user.username or user.telegram_id }}</option>
                {% endfor %}
            </select>
        </div>

        <div class="mb-3">
            <label for="message" class="form-label text-light">Текст сообщения</label>
            <div class="btn-group mb-2" role="group">
                <button type="button" class="btn btn-outline-secondary" onclick="insertFormat('bold')">
                    <i class="fas fa-bold"></i>
                </button>
                <button type="button" class="btn btn-outline-secondary" onclick="insertFormat('italic')">
                    <i class="fas fa-italic"></i>
                </button>
                <button type="button" class="btn btn-outline-secondary" onclick="insertFormat('code')">
                    <i class="fas fa-code"></i>
                </button>
            </div>
            <textarea class="form-control bg-dark text-light" id="message" name="message" rows="5"></textarea>
            <small class="text-muted">Поддерживается HTML-разметка</small>
        </div>

        <button type="submit" class="btn btn-primary">Отправить</button>
    </form>
</div>

<script>
function toggleUserSelect() {
    var recipientType = document.getElementById('recipient_type').value;
    var userSelect = document.getElementById('user_select');
    userSelect.style.display = recipientType === 'single' ? 'block' : 'none';
}

function insertFormat(type) {
    var textarea = document.getElementById('message');
    var start = textarea.selectionStart;
    var end = textarea.selectionEnd;
    var selectedText = textarea.value.substring(start, end);
    var format = '';
    
    switch(type) {
        case 'bold':
            format = `<b>${selectedText}</b>`;
            break;
        case 'italic':
            format = `<i>${selectedText}</i>`;
            break;
        case 'code':
            format = `<code>${selectedText}</code>`;
            break;
    }
    
    textarea.value = textarea.value.substring(0, start) + format + textarea.value.substring(end);
    textarea.focus();
}
</script>
{% endblock %}