{% if update %}
{% import 'languages/'+lang|default('en')+'.html' as lang %}
{% endif %}
<script>
    // ждем полной загрузки страницы
    window.onload = () => {
        // устанавливаем настройки
        const options = {
            // родитель целевого элемента - область просмотра
            root: null,
            // без отступов
            rootMargin: '0px',
            // процент пересечения - половина изображения
            threshold: 0.1
        }

        // создаем наблюдатель
        const observer = new IntersectionObserver((entries, observer) => {
            // для каждой записи-целевого элемента
            entries.forEach(entry => {
                // если элемент является наблюдаемым
                if (entry.isIntersecting) {
                    const check = entry.target
                    let checkId = check.getAttribute('data-check-id')
                    let checkType = check.getAttribute('data-check-type')
                    // меняем фон контейнера
                    getSmonCheck(checkId, checkType)
                    // прекращаем наблюдение
                    observer.unobserve(check)
                }
            })
        }, options)

        // с помощью цикла следим за всеми check на странице
        const arr = document.querySelectorAll('.smon_services')
        arr.forEach(i => {
            observer.observe(i)
        })
    }
</script>
<div class="sort_menu">
    <div style="margin-bottom: 15px;font-size: 15px;">
		{% set down = [] %}
		{% set up = [] %}
		{% set dis = [] %}
		{% for s in multi_checks %}
			{% if s.enabled == 1 %}
				{% if s.status == 1 %}
					{% if up.append('1') %} {% endif %}
				{% else %}
					{% if down.append('1') %} {% endif %}
				{% endif %}
			{% else %}
				{% if dis.append(s.group) %} {% endif %}
			{% endif %}
		{% endfor %}
		{{lang.smon_page.desc.status_summary}}:
        <i class="fas fa-arrow-up" style="color: var(--color-blue);"></i> {{lang.smon_page.desc.UP}}: {{up|length}},
        <i class="fas fa-arrow-down" style="color: var(--color-blue-dark);"></i> {{lang.smon_page.desc.DOWN}}: {{down|length}},
        <i class="fas fa-times" style="color: var(--color-dark-gray)"></i> {{lang.words.disabled|title()}}: {{dis|length}}
    </div>
    <a title="{{lang.smon_page.desc.do_not_sort_by_status}}" style="cursor: pointer" onclick="showSmon('not_sort')">{{lang.smon_page.desc.do_not_sort}}</a> |
    <a id="sort_by_status" title="{{lang.smon_page.desc.sort_status}}" style="cursor: pointer" onclick="sort_by_status()">{{lang.smon_page.desc.sort_status}}</a> |
    <a title="RMOM: {{lang.words.dashboard|title()}}" style="cursor: pointer" onclick="showSmon('refresh');">{{lang.words.refresh2|title()}}</a>
</div>
<div id="dashboards">
{% for group in smon_groups %}
    <div class="smon_group" id="check-group-{{ group.id }}">
        <div class="group_name">
            <span class="smon_group_name">
                <span id="smon_group_name-{{ group.id }}">{{ group.name.replace("'", "") }}</span>
                <div style="display: inline;font-size: 13px;">
                    <a class="edit" onclick="editCheckGroupDialog('{{group.id}}')"></a>
                    <a class="delete" onclick="confirmDeleteCheckGroup('{{group.id}}')" title="{{lang.words.delete|title()}}" style="cursor: pointer; color: #000;font-size: 14px;"></a>
                </div>
            </span>
            <span id="show-smon-group-{{ group.id }}" class="plus switcher_table_metric smon_group_switcher" onclick="showSmonGroup('{{ group.id }}')" title="{{lang.words.open|title()}} {{lang.words.group}}"></span>
            <span id="hide-smon-group-{{ group.id }}" class="minus switcher_table_metric smon_group_switcher" onclick="hideSmonGroup('{{ group.id }}')" style="display: none;" title="{{lang.words.hide}}"></span>
        </div>
        <div class="smon_named_group" id="smon-group-{{ group.id }}">
        {%- for s in multi_checks -%}
            {% if s.multi_check_id.check_group_id|string() == group.id|string() %}
                <div class="smon_services {{additional_classes}} animated-background" id="smon-{{ s.multi_check_id }}" data-check-id="{{ s.multi_check_id }}" data-check-type="{{ checking_types[s.check_type] }}"></div>
            {% endif %}
        {% endfor %}
        </div>
    </div>
    <script>isSmonGroupShowed('{{ group.id }}')</script>
{% endfor %}
    <div class="smon_group" id="smon-group-{{ group.id }}">
        <div class="group_name">
            {{ lang.words.without|title() }} {{ lang.words.group3 }}
        </div>
        {%- for s in multi_checks -%}
            {% if not s.multi_check_id.check_group_id %}
                <div class="smon_services {{additional_classes}} animated-background" id="smon-{{ s.multi_check_id }}" data-check-id="{{ s.multi_check_id }}" data-check-type="{{ checking_types[s.check_type] }}"></div>
            {% endif %}
        {% endfor %}
    </div>
</div>

<script>
    {% if sort == 'by_status' %}
        sort_by_status();
    {% endif %}
</script>