{% extends 'base.html.twig' %}

{% block body %}
<div id="notification-container" class="advanced-notification-settings">
    <div class="header">
        <h1 id="notification-header">{{ '_NOTIFICATIONS_SETTINGS_'|trans }}</h1>
        <small>Notification Settings</small>
    </div>
    <input type="checkbox" class="fancy-switch" id="mute-notifications" disabled>
    <label for="mute-notifications">{{ '_ENABLE_NOTIFICATIONS_'|trans }}</label>
    <div class="notification-priority-settings-dialog notifications-page-simple-settings">
        <div class="ntfCtg-category all-categories mobile" data-id="all">
            <h2 class="ntfCtg-body-title"></h2>
            <div class="ntfCtg-body-checkbox">
                <div id="ntfCtg-checkbox_all_1" class="ntfCtg-checkbox"  data-value="1">
                    <label>{{ 'MAJOR_NEWS'|trans }}</label>
                    <span class="ntfCtg-checkbox-box ntfCtg-checkbox-checked ntfCtg-checkbox-small"></span>
                    <input class="priority-checkbox" name="priority1" type="radio" value="1" checked hidden>
                </div>
                <div id="ntfCtg-checkbox_all_2" class="ntfCtg-checkbox" data-value="2">
                    <label>{{ 'IMPORTANT_NEWS'|trans }}</label>
                    <span class="ntfCtg-checkbox-box ntfCtg-checkbox-medium"></span>
                    <input class="priority-checkbox" name="priority2" type="radio" value="2" hidden>
                </div>
                <div id="ntfCtg-checkbox_all_3" class="ntfCtg-checkbox" data-value="3">
                    <label>{{ 'ALL_NEWS'|trans }}</label>
                    <span class="ntfCtg-checkbox-box ntfCtg-checkbox-large"></span>
                    <input class="priority-checkbox" name="priority3" type="radio" value="3"  hidden>
                </div>
            </div>
        </div>
        <a href="#" class="savePrioritySettings" title="{{ '_SAVE_'|trans }}">{{ '_SAVE_'|trans }}</a>

        <a href="#notification-body" class="toggle-advanced" title="إعدادات متطورة"><i class="icon-arrow-down"></i>إعدادات متطورة</a>
    </div>
    <div id="notification-body">
        {% for k,ctgNotification in categoriesNotification %}
        <div class="ntfCtg-list">
            <div class="ntfCtg-header">
                <h2>{{ ctgNotification['name'] }}</h2>
                <div class="ntfCtg-header-checkbox">
                    <span class="icon-bell bell-large"></span>
                    <span class="icon-bell bell-medium"></span>
                    <span class="icon-bell bell-small"></span>
                </div>
            </div>
            <div class="ntfCtg-body">
                {% for j,category in ctgNotification['categories'] %}
                <div class="ntfCtg-category single-category" data-id="{{ j }}">
                    <h2 class="ntfCtg-body-title">{{ category }}</h2>
                    <div class="ntfCtg-body-checkbox">
                        <div id="ntfCtg-checkbox_{{ j }}_1" class="ntfCtg-checkbox"  data-value="1">
                            <span class="ntfCtg-checkbox-box ntfCtg-checkbox-checked ntfCtg-checkbox-small"></span>
                            <input class="priority-checkbox" name="priority{{ j }}" type="radio" value="1" checked hidden>
                        </div>
                        <div id="ntfCtg-checkbox_{{ j }}_2" class="ntfCtg-checkbox" data-value="2">
                            <span class="ntfCtg-checkbox-box ntfCtg-checkbox-medium"></span>
                            <input class="priority-checkbox" name="priority{{ j }}" type="radio" value="2" hidden>
                        </div>
                        <div id="ntfCtg-checkbox_{{ j }}_3" class="ntfCtg-checkbox" data-value="3">
                            <span class="ntfCtg-checkbox-box ntfCtg-checkbox-large"></span>
                            <input class="priority-checkbox" name="priority{{ j }}" type="radio" value="3" hidden>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endfor %}
    </div>
    <a href="#" class="saveAdvancedSettings saveSettingsButton" title="{{ '_SAVE_'|trans }}">{{ '_SAVE_'|trans }}</a>
</div>
{% endblock %}