{% extends "admin/base.html" %}

{% block logo %}
<h1>Create Notification</h1>
{% endblock %}

{% block main %}
<div class="admin-content">
    <section class="admin-form">
        <h2>Mass Notification</h2>

        {% if error %}
        <div class="alert alert-error">{{ error }}</div>
        {% endif %}

        <form method="post" action="/admin/notifications/create.html">
            <div class="form-group">
                <label for="message">Message</label>
                <textarea id="message" name="message" rows="4" maxlength="500" required placeholder="Enter notification message...">{{ message or '' }}</textarea>
                <small>Maximum 500 characters</small>
            </div>

            <div class="form-group">
                <label>Recipients</label>
                <div class="radio-group">
                    <label>
                        <input type="radio" name="target" value="all" checked>
                        All Users
                    </label>
                    <label>
                        <input type="radio" name="target" value="selected">
                        Selected Users
                    </label>
                </div>
            </div>

            <div class="form-group" id="user-select-group" style="display:none;">
                <label>Select Users</label>
                <div class="user-checkboxes">
                    {% for user in users %}
                    <label class="checkbox-label">
                        <input type="checkbox" name="user_uids" value="{{ user.uid }}">
                        {{ user.nick }} ({{ user.username }})
                    </label>
                    {% endfor %}
                </div>
            </div>

            <div class="form-actions">
                <button type="submit" class="btn btn-primary">Send Notification</button>
                <a href="/admin/notifications/index.html" class="btn btn-secondary">Cancel</a>
            </div>
        </form>
    </section>
</div>

<script>
document.querySelectorAll('input[name="target"]').forEach(function(radio) {
    radio.addEventListener('change', function() {
        var userGroup = document.getElementById('user-select-group');
        userGroup.style.display = this.value === 'selected' ? 'block' : 'none';
    });
});
</script>
{% endblock main %}