{% raw %}
        <div class="tabs-body-item" v-if="activeTab === 'qos' && settingFetchComplete">
            <h2>Настройки QoS</h2>
            <div class="settings-set-container">
                <label>
                    <span>Активировать QoS</span>
                    <span class="toggle-input"><input type="checkbox" v-model="paramsQos.en" /><span class="slider"></span></span>
                </label>
            </div>
            <div v-for="classesGroup in ['rt1', 'rt2', 'rt3', 'cd']">
                <h3>Классы {{ classesGroup.toUpperCase() }} <button class="action-button" @click="qosAddClass(classesGroup)"> + </button></h3>
                <details v-for="(qosClass, index) in paramsQos[classesGroup]" :key="index" class="settings-set-container">
                    <summary>
                        <span v-if="classesGroup === 'cd'">#{{ index }} CIR={{ qosClass.cir }}кбит, PIR={{ qosClass.pir }}кбит {{ qosClass.description }}</span>
                        <span v-if="classesGroup !== 'cd'">#{{ index }} CBR={{ qosClass.cir }}кбит {{ qosClass.description }}</span>
                        <span class="summary-actions">
                            <label>
                                <span class="toggle-input">
                                    <input type="checkbox" v-model="qosClass.isEnabled" />
                                    <span class="slider"></span>
                                </span>
                            </label>
                        </span>
                    </summary>
                    <label>
                        <span v-if="classesGroup === 'cd'">CIR</span> <span v-if="classesGroup !== 'cd'">CBR</span>
                        <input v-model="qosClass.cir" type="number"/>
                    </label>
                    <label v-if="classesGroup === 'cd'">
                        <span>PIR</span>
                        <input v-model="qosClass.pir" type="number"/>
                    </label>
                    <label>
                        <span>Описание</span>
                        <input v-model="qosClass.description"/>
                    </label>

                    <h3>Фильтры ({{ qosClass.filters.length }})</h3>
                    <div>
                        <button class="action-button" @click="qosClassAddRule(classesGroup, index)">Добавить правило</button>
                    </div>
                    <details v-for="(filter, filterIndex) in qosClass.filters" :key="filterIndex" class="settings-set-container">
                        <summary>
                            <span>#{{ filterIndex }} {{ qosGenerateRuleDescription(filter) }}</span>
                            <span class="summary-actions">
                                <label>
                                    <span class="toggle-input">
                                        <input type="checkbox" v-model="filter.isEnabled" />
                                        <span class="slider"></span>
                                    </span>
                                </label>
                                <button class="dangerous-button" @click="qosDelFilter(classesGroup, index, filterIndex)">Del</button>
                            </span>
                        </summary>
                        <label>
                            <span>VLAN ID</span>
                            <!-- singleVlanExpr: (([0-9]{1,4}-[0-9]{1,4})|([0-9]{1,4}))-->
                            <!-- expr: ^(((single,)+single)|single)$-->
                            <input v-model="filter.vlan" type="text" pattern="^((((([0-9]{1,4}-[0-9]{1,4})|([0-9]{1,4})),)+(([0-9]{1,4}-[0-9]{1,4})|([0-9]{1,4})))|(([0-9]{1,4}-[0-9]{1,4})|([0-9]{1,4})))$">
                        </label>
                        <div>
                            <span>Протокол L3</span>
                            <label class="l3-proto-label"><span>AH:</span><input type="checkbox" value="ah" v-model="filter.proto"></label>
                            <label class="l3-proto-label"><span>COMP:</span><input type="checkbox" value="comp" v-model="filter.proto"></label>
                            <label class="l3-proto-label"><span>DCCP:</span><input type="checkbox" value="dccp" v-model="filter.proto"></label>
                            <label class="l3-proto-label"><span>ESP:</span><input type="checkbox" value="esp" v-model="filter.proto"></label>
                            <label class="l3-proto-label"><span>ICMP:</span><input type="checkbox" value="icmp" v-model="filter.proto"></label>
<!--                                <label class="l3-proto-label"><span>ICMPV6:</span><input type="checkbox" value="icmpv6" v-model="filter.proto"></label>-->
                            <label class="l3-proto-label"><span>SCTP:</span><input type="checkbox" value="sctp" v-model="filter.proto"></label>
                            <label class="l3-proto-label"><span>TCP:</span><input type="checkbox" value="tcp" v-model="filter.proto"></label>
                            <label class="l3-proto-label"><span>UDP:</span><input type="checkbox" value="udp" v-model="filter.proto"></label>
                            <label class="l3-proto-label"><span>UDPLITE:</span><input type="checkbox" value="udplite" v-model="filter.proto"></label>
                        </div>
                        <label>
                            <span>Порт источника</span>
                            <input v-model="filter.sport" type="text" pattern="^((((([0-9]{1,5}-[0-9]{1,5})|([0-9]{1,5})),)+(([0-9]{1,5}-[0-9]{1,5})|([0-9]{1,5})))|(([0-9]{1,5}-[0-9]{1,5})|([0-9]{1,5})))$">
                        </label>
                        <label>
                            <span>Порт назначения</span>
                            <input v-model="filter.dport" type="text" pattern="^((((([0-9]{1,5}-[0-9]{1,5})|([0-9]{1,5})),)+(([0-9]{1,5}-[0-9]{1,5})|([0-9]{1,5})))|(([0-9]{1,5}-[0-9]{1,5})|([0-9]{1,5})))$">
                        </label>
                        <label>
                            <span>IP источника</span>
                            <input v-model="filter.ip_src" type="text">
                        </label>
                        <label>
                            <span>IP назначения</span>
                            <input v-model="filter.ip_dest" type="text">
                        </label>
                        <label>
                            <span>Метка IP.DSCP</span>
                            <input v-model="filter.dscp" type="text">
                        </label>
                    </details>

                    <div>
                        <button class="dangerous-button" @click="qosDelClass(classesGroup, index)">Удалить класс QoS</button>
                    </div>
                </details>
            </div>
            <button class="action-button" @click="settingsSubmitQoS()">Применить <span class="submit-spinner" v-show="submitStatus.qos"></span></button>

            {% endraw %}{% if 'tcpaccel' in params.paramGroupsList %}{% raw %}
            <h2>Настройки TCP-акселерации</h2>
            <div class="settings-set-container">
                <label>
                    <span>Активировать акселерацию</span>
                    <span class="toggle-input"><input type="checkbox" v-model="paramsTcpAccel.en" /><span class="slider"></span></span>
                </label>
                <label>
                    <span>Максимальное количество соединений</span>
                    <input type="number" v-model="paramsTcpAccel.maxConnections" min="1" max="10000" />
                </label>
            </div>
            <button class="action-button" @click="settingsSubmitTcpAccel()">Применить <span class="submit-spinner" v-show="submitStatus.tcpAccel"></span></button>
        </div>
        {% endraw %}{% endif %}