<div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <h2 class="custom-h2 config-title">
            {{ 'CONFIG.TITLE' | translate
            }}<span
                class="spinner spinner-inline ml-1 v-mid"
                [hidden]="inProgress === false"></span>
        </h2>
        <ul class="nav" role="tablist">
            <li role="presentation" class="nav-item">
                <button
                    id="config-auth"
                    class="btn btn-link nav-link"
                    type="button"
                    routerLink="auth"
                    routerLinkActive="active">
                    {{ 'CONFIG.AUTH' | translate }}
                </button>
            </li>
            <li role="presentation" class="nav-item">
                <button
                    id="config-email"
                    class="btn btn-link nav-link"
                    type="button"
                    routerLink="email"
                    routerLinkActive="active">
                    {{ 'CONFIG.EMAIL' | translate }}
                </button>
            </li>
            <li role="presentation" class="nav-item">
                <button
                    id="config-security"
                    class="btn btn-link nav-link"
                    type="button"
                    routerLink="security"
                    routerLinkActive="active">
                    {{ 'HELM_CHART.SECURITY' | translate }}
                </button>
            </li>
            <li role="presentation" class="nav-item">
                <button
                    id="config-system"
                    class="btn btn-link nav-link"
                    type="button"
                    routerLink="setting"
                    routerLinkActive="active">
                    {{ 'CONFIG.SYSTEM' | translate }}
                </button>
            </li>
        </ul>
    </div>
</div>
<router-outlet></router-outlet>
