<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~   http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
-->

<app-help-message-show
  [help_message_content]="'status.help' | i18n"
  [guild_link]="'status.help.link' | i18n"
  [module_name]="'menu.advanced.status'"
  [icon_name]="'mobile'"
></app-help-message-show>
<nz-divider></nz-divider>

<nz-spin [nzSpinning]="orgLoading" [nzTip]="'Loading...'" nzSize="large">
  <!-- Organization brand card: empty-state guide / configured summary / inline edit form -->
  <div class="status-org-card">
    <!-- Empty state: organization not configured -->
    <ng-container *ngIf="!orgEditing && statusOrg?.id == undefined">
      <div class="status-org-empty">
        <div class="status-org-empty-icon">
          <i nz-icon nzType="appstore" nzTheme="outline"></i>
        </div>
        <div class="status-org-empty-content">
          <div class="status-org-empty-title">{{ 'status.org.empty.title' | i18n }}</div>
          <div class="status-org-empty-desc">{{ 'status.org.empty.desc' | i18n }}</div>
        </div>
        <div class="status-org-empty-action">
          <button nz-button nzType="primary" (click)="startEditOrg()">
            <i nz-icon nzType="setting" nzTheme="outline"></i>
            {{ 'status.org.setup' | i18n }}
          </button>
        </div>
      </div>
    </ng-container>

    <!-- Configured summary: shows brand at a glance -->
    <ng-container *ngIf="!orgEditing && statusOrg?.id != undefined">
      <div class="status-org-summary" [style.borderLeftColor]="statusOrg.color || '#1890ff'">
        <div class="status-org-summary-logo" [style.backgroundColor]="statusOrg.color || '#f0f5ff'">
          <img *ngIf="statusOrg.logo" [src]="statusOrg.logo" alt="logo" />
          <i *ngIf="!statusOrg.logo" nz-icon nzType="appstore" nzTheme="outline"></i>
        </div>
        <div class="status-org-summary-body">
          <div class="status-org-summary-title">
            <span class="status-org-name">{{ statusOrg.name }}</span>
            <nz-tag nzColor="success" class="status-org-tag">
              <i nz-icon nzType="check-circle" nzTheme="fill"></i>
              {{ 'status.org.configured' | i18n }}
            </nz-tag>
          </div>
          <div class="status-org-summary-desc" *ngIf="statusOrg.description">{{ statusOrg.description }}</div>
          <div class="status-org-summary-meta">
            <span class="meta-item" *ngIf="statusOrg.home">
              <i nz-icon nzType="link" nzTheme="outline"></i>
              <a [href]="statusOrg.home" target="_blank" rel="noopener">{{ statusOrg.home }}</a>
            </span>
            <span class="meta-item" *ngIf="statusOrg.feedback">
              <i nz-icon nzType="message" nzTheme="outline"></i>
              <a [href]="statusOrg.feedback" target="_blank" rel="noopener">{{ statusOrg.feedback }}</a>
            </span>
            <span class="meta-item" *ngIf="statusOrg.color">
              <i nz-icon nzType="bg-colors" nzTheme="outline"></i>
              <span class="color-chip" [style.background]="statusOrg.color"></span>
              <span>{{ statusOrg.color }}</span>
            </span>
          </div>
        </div>
        <div class="status-org-summary-actions">
          <a routerLink="/status" target="_blank" class="status-preview-link">
            <i nz-icon nzType="eye" nzTheme="outline"></i>
            {{ 'status.preview' | i18n }}
            <i nz-icon nzType="arrow-right" nzTheme="outline"></i>
          </a>
          <button nz-button nzType="default" (click)="startEditOrg()">
            <i nz-icon nzType="edit" nzTheme="outline"></i>
            {{ 'common.button.edit' | i18n }}
          </button>
        </div>
      </div>
    </ng-container>

    <!-- Inline edit form -->
    <ng-container *ngIf="orgEditing">
      <div class="status-org-edit-header">
        <span class="status-org-edit-title">
          <i nz-icon nzType="setting" nzTheme="outline"></i>
          {{ 'status.org.edit' | i18n }}
        </span>
      </div>
      <div class="-inner-content">
        <form nz-form #newForm="ngForm">
          <nz-form-item>
            <nz-form-label [nzSpan]="7" nzFor="name" nzRequired="true">
              {{ 'status.org.name' | i18n }}
            </nz-form-label>
            <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
              <input
                [(ngModel)]="statusOrgForEdit.name"
                nz-input
                name="name"
                type="text"
                id="name"
                required
                [placeholder]="'status.org.name.tip' | i18n"
              />
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSpan]="7" nzFor="desc" nzRequired="true">
              {{ 'status.org.desc' | i18n }}
            </nz-form-label>
            <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
              <input
                [(ngModel)]="statusOrgForEdit.description"
                nz-input
                required
                name="desc"
                type="text"
                id="desc"
                [placeholder]="'status.org.desc.tip' | i18n"
              />
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSpan]="7" nzFor="home" nzRequired="true">
              {{ 'status.org.home' | i18n }}
            </nz-form-label>
            <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
              <input
                [(ngModel)]="statusOrgForEdit.home"
                nz-input
                required
                name="home"
                type="text"
                id="home"
                [placeholder]="'status.org.home.tip' | i18n"
              />
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSpan]="7" nzFor="logo" nzRequired="true">
              {{ 'status.org.logo' | i18n }}
            </nz-form-label>
            <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
              <input
                [(ngModel)]="statusOrgForEdit.logo"
                nz-input
                required
                name="logo"
                type="text"
                id="logo"
                [placeholder]="'status.org.logo.tip' | i18n"
              />
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSpan]="7" nzFor="feedback" nzRequired="true">
              {{ 'status.org.feedback' | i18n }}
            </nz-form-label>
            <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
              <input
                [(ngModel)]="statusOrgForEdit.feedback"
                nz-input
                required
                name="feedback"
                type="text"
                id="feedback"
                [placeholder]="'status.org.feedback.tip' | i18n"
              />
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSpan]="7" nzFor="color">
              {{ 'status.org.color' | i18n }}
            </nz-form-label>
            <nz-form-control [nzSpan]="12">
              <input
                [(colorPicker)]="statusOrgForEdit.color"
                cpFallbackColor="#e9f3d3"
                cpOutputFormat="hex"
                [style.background]="statusOrgForEdit.color"
                style="width: 100%"
                nz-input
                required
                name="color"
                type="text"
                id="color"
                [placeholder]="statusOrgForEdit.color == undefined ? ('status.org.color.tip' | i18n) : ''"
              />
            </nz-form-control>
          </nz-form-item>
          <div nz-row>
            <div nz-col [nzXs]="{ span: 24 }" [nzLg]="{ span: 12, offset: 7 }" class="status-org-edit-actions">
              <button nz-button type="button" (click)="cancelEditOrg()" *ngIf="statusOrg?.id != undefined">
                {{ 'common.button.cancel' | i18n }}
              </button>
              <button nz-button nzType="primary" type="submit" (click)="onSaveStatusOrg(newForm.form)">
                {{ 'common.button.ok' | i18n }}
              </button>
            </div>
          </div>
        </form>
      </div>
    </ng-container>
  </div>
</nz-spin>

<nz-tabset nzSize="large" [nzTabBarGutter]="8" class="status-tabset">
  <nz-tab [nzTitle]="'status.component' | i18n" (nzClick)="loadComponentInfo()">
    <app-toolbar>
      <ng-template #left>
        <button nz-button nzType="primary" nz-tooltip (click)="syncComponent()" [nzTooltipTitle]="'common.refresh' | i18n">
          <i nz-icon nzType="sync" nzTheme="outline"></i>
        </button>
        <button nz-button nzType="primary" (click)="onNewStatusComponent()">
          <i nz-icon nzType="appstore-add" nzTheme="outline"></i>
          {{ 'status.component.new' | i18n }}
        </button>
      </ng-template>
    </app-toolbar>
    <nz-table #fixedTable [nzData]="statusComponents" nzFrontPagination="false" [nzLoading]="componentLoading">
      <thead>
        <tr>
          <th nzAlign="center" nzWidth="18%">{{ 'status.component.name' | i18n }}</th>
          <th nzAlign="center" nzWidth="12%">{{ 'status.component.state' | i18n }}</th>
          <th nzAlign="center" nzWidth="14%">{{ 'status.component.method' | i18n }}</th>
          <th nzAlign="center" nzWidth="20%">{{ 'status.component.tag' | i18n }}</th>
          <th nzAlign="center" nzWidth="22%">{{ 'common.edit-time' | i18n }}</th>
          <th nzAlign="center" nzWidth="14%">{{ 'common.edit' | i18n }}</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of fixedTable.data">
          <td nzAlign="center">{{ data.name }}</td>
          <td nzAlign="center">
            <nz-tag *ngIf="data.state == 0" [nzColor]="'#09b919'">
              {{ 'status.component.state.0' | i18n }}
            </nz-tag>
            <nz-tag *ngIf="data.state == 1" [nzColor]="'#fd4357'">
              {{ 'status.component.state.1' | i18n }}
            </nz-tag>
            <nz-tag *ngIf="data.state == 2" [nzColor]="'#b2b2b2'">
              {{ 'status.component.state.2' | i18n }}
            </nz-tag>
          </td>
          <td nzAlign="center">
            <nz-tag *ngIf="data.method == 0" [nzColor]="'success'">
              {{ 'status.component.method.0' | i18n }}
            </nz-tag>
            <nz-tag *ngIf="data.method == 1" [nzColor]="'processing'">
              {{ 'status.component.method.1' | i18n }}
            </nz-tag>
          </td>
          <td nzAlign="center">
            <nz-tag *ngFor="let label of data.labels | keyvalue" style="margin-top: 2px" [nzColor]="getLabelColor(label.key)">
              {{ label.key }}:{{ label.value }}
            </nz-tag>
          </td>
          <td nzAlign="center">{{ data.gmtUpdate | date : 'YYYY-MM-dd HH:mm:ss' }}</td>
          <td nzAlign="center">
            <div class="actions">
              <button
                nz-button
                nzType="primary"
                (click)="onEditOneComponent(data)"
                nz-tooltip
                [nzTooltipTitle]="'status.component.edit' | i18n"
              >
                <i nz-icon nzType="edit" nzTheme="outline"></i>
              </button>
              <button nz-button nz-dropdown [nzDropdownMenu]="more_menu">
                <span nz-icon nzType="ellipsis"></span>
              </button>
              <nz-dropdown-menu #more_menu="nzDropdownMenu">
                <ul nz-menu>
                  <li nz-menu-item>
                    <button
                      nz-button
                      nzDanger
                      (click)="onDeleteOneComponent(data.id)"
                      nz-tooltip
                      [nzTooltipTitle]="'status.component.delete' | i18n"
                    >
                      <i nz-icon nzType="delete" nzTheme="outline"></i>
                    </button>
                  </li>
                </ul>
              </nz-dropdown-menu>
            </div>
          </td>
        </tr>
      </tbody>
    </nz-table>
  </nz-tab>
  <nz-tab [nzTitle]="'status.incident' | i18n" (nzClick)="loadIncidenceInfo()">
    <app-toolbar>
      <ng-template #left>
        <button nz-button nzType="primary" nz-tooltip (click)="syncIncidence()" [nzTooltipTitle]="'common.refresh' | i18n">
          <i nz-icon nzType="sync" nzTheme="outline"></i>
        </button>
        <button nz-button nzType="primary" (click)="onNewStatusIncident()">
          <i nz-icon nzType="appstore-add" nzTheme="outline"></i>
          {{ 'status.incident.new' | i18n }}
        </button>
      </ng-template>
      <ng-template #right>
        <app-multi-func-input
          groupStyle="width: 180px;"
          class="mobile-hide"
          [placeholder]="'status.incident.name' | i18n"
          [(value)]="search"
          (keydown.enter)="onPageIndexChange(1)"
          (cleared)="onPageIndexChange(1)"
        />
        <button class="mobile-hide" nz-button nzType="primary" (click)="onPageIndexChange(1)">
          {{ 'common.search' | i18n }}
        </button>
      </ng-template>
    </app-toolbar>
    <nz-table
      #incidentTable
      [nzData]="statusIncidences"
      [nzPageIndex]="pageIndex"
      [nzPageSize]="pageSize"
      [nzTotal]="total"
      nzFrontPagination="false"
      [nzShowTotal]="rangeTemplate"
      [nzPageSizeOptions]="[8, 15, 25]"
      (nzPageIndexChange)="onPageIndexChange($event)"
      (nzQueryParams)="onTablePageChange($event)"
      nzShowPagination="true"
      nzShowSizeChanger
      [nzLoading]="incidentLoading"
    >
      <thead>
        <tr>
          <th nzAlign="center" nzWidth="16%">{{ 'status.incident.name' | i18n }}</th>
          <th nzAlign="center" nzWidth="10%">{{ 'status.incident.state' | i18n }}</th>
          <th nzAlign="center" nzWidth="34%">{{ 'status.incident.message-latest' | i18n }}</th>
          <th nzAlign="center" nzWidth="14%">{{ 'status.incident.component' | i18n }}</th>
          <th nzAlign="center" nzWidth="12%">{{ 'common.new-time' | i18n }}</th>
          <th nzAlign="center" nzWidth="14%">{{ 'common.edit' | i18n }}</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of incidentTable.data">
          <td nzAlign="left" nzEllipsis nz-tooltip [nzTooltipTitle]="data.name">{{ data.name }}</td>
          <td nzAlign="center">
            <nz-tag *ngIf="data.state == 0" [nzColor]="'#ff2f2f'">
              {{ 'status.incident.state.0' | i18n }}
            </nz-tag>
            <nz-tag *ngIf="data.state == 1" [nzColor]="'#e56c23'">
              {{ 'status.incident.state.1' | i18n }}
            </nz-tag>
            <nz-tag *ngIf="data.state == 2" [nzColor]="'#19a7e7'">
              {{ 'status.incident.state.2' | i18n }}
            </nz-tag>
            <nz-tag *ngIf="data.state == 3" [nzColor]="'#34be8f'">
              {{ 'status.incident.state.3' | i18n }}
            </nz-tag>
          </td>
          <td nzAlign="left" nzEllipsis nz-tooltip [nzTooltipTitle]="getLatestIncidentContentMsg(data.contents)">
            {{ getLatestIncidentContentMsg(data.contents) }}
          </td>
          <td nzAlign="center">
            <nz-tag *ngFor="let item of data.components" class="hoverClass">
              {{ item.name }}
            </nz-tag>
          </td>
          <td nzAlign="center">{{ data.startTime | date : 'YYYY-MM-dd HH:mm:ss' }}</td>
          <td nzAlign="center">
            <div class="actions">
              <button
                nz-button
                nzType="primary"
                (click)="onUpdateOneIncident(data.id)"
                nz-tooltip
                [nzTooltipTitle]="'status.incident.update' | i18n"
              >
                <i nz-icon nzType="redo" nzTheme="outline"></i>
              </button>
              <button nz-button nz-dropdown [nzDropdownMenu]="more_menu">
                <span nz-icon nzType="ellipsis"></span>
              </button>
              <nz-dropdown-menu #more_menu="nzDropdownMenu">
                <ul nz-menu>
                  <li nz-menu-item>
                    <button
                      nz-button
                      nzDanger
                      (click)="onDeleteOneIncident(data.id)"
                      nz-tooltip
                      [nzTooltipTitle]="'status.incident.delete' | i18n"
                    >
                      <i nz-icon nzType="delete" nzTheme="outline"></i>
                    </button>
                  </li>
                </ul>
              </nz-dropdown-menu>
            </div>
          </td>
        </tr>
      </tbody>
    </nz-table>
    <ng-template #rangeTemplate> {{ 'common.total' | i18n }} {{ total }} </ng-template>
  </nz-tab>
</nz-tabset>

<!-- new or update component pop-up box -->
<nz-modal
  [(nzVisible)]="currentComponentVisible"
  [nzTitle]="isComponentModalAdd ? ('status.component.new' | i18n) : ('status.component.edit' | i18n)"
  (nzOnCancel)="onComponentModalCancel()"
  (nzOnOk)="onComponentModalOk()"
  nzMaskClosable="false"
  nzWidth="55%"
  [nzOkLoading]="currentComponentLoading"
>
  <div *nzModalContent class="-inner-content">
    <form nz-form #componentForm="ngForm">
      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzFor="component-name" nzRequired="true">{{ 'status.component.name' | i18n }}</nz-form-label>
        <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
          <input
            [(ngModel)]="currentStatusComponent.name"
            nz-input
            required
            name="component-name"
            type="text"
            id="component-name"
            [placeholder]="'status.component.name.tip' | i18n"
          />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzFor="component-desc">{{ 'status.component.desc' | i18n }}</nz-form-label>
        <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
          <input
            [(ngModel)]="currentStatusComponent.description"
            nz-input
            name="component-desc"
            type="text"
            id="component-desc"
            [placeholder]="'status.component.desc.tip' | i18n"
          />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzFor="method" [nzTooltipTitle]="'status.component.method.tip' | i18n">{{
          'status.component.method' | i18n
        }}</nz-form-label>
        <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
          <nz-radio-group [(ngModel)]="currentStatusComponent.method" nzButtonStyle="solid" [required]="'true'" name="method" id="method">
            <label nz-radio-button [nzValue]="0">
              {{ 'status.component.method.0' | i18n }}
            </label>
            <label nz-radio-button [nzValue]="1">
              {{ 'status.component.method.1' | i18n }}
            </label>
          </nz-radio-group>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="currentStatusComponent.method == 0">
        <nz-form-label [nzSpan]="7" nzFor="tag" nzRequired="true" [nzTooltipTitle]="'status.component.tag.tip' | i18n">{{
          'status.component.tag' | i18n
        }}</nz-form-label>
        <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
          <app-form-field
            [item]="{
              field: 'labels',
              type: 'label-selector',
              required: true
            }"
            [name]="'sourceLabels'"
            [(ngModel)]="currentStatusComponent.labels"
          />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="currentStatusComponent.method == 1">
        <nz-form-label [nzSpan]="7" nzFor="config-state" [nzTooltipTitle]="'status.component.config-state.tip' | i18n">{{
          'status.component.config-state' | i18n
        }}</nz-form-label>
        <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
          <nz-radio-group
            [(ngModel)]="currentStatusComponent.configState"
            nzButtonStyle="solid"
            [required]="'true'"
            name="config-state"
            id="config-state"
          >
            <label nz-radio-button [nzValue]="0">
              {{ 'status.component.state.0' | i18n }}
            </label>
            <label nz-radio-button [nzValue]="1">
              {{ 'status.component.state.1' | i18n }}
            </label>
            <label nz-radio-button [nzValue]="2">
              {{ 'status.component.state.2' | i18n }}
            </label>
          </nz-radio-group>
        </nz-form-control>
      </nz-form-item>
    </form>
  </div>
</nz-modal>

<!-- status incident modal -->
<nz-modal
  [(nzVisible)]="currentIncidentVisible"
  [nzTitle]="isIncidentModalAdd ? ('status.incident.new' | i18n) : ('status.incident.update' | i18n)"
  (nzOnCancel)="onIncidentModalCancel()"
  (nzOnOk)="onIncidentModalOk()"
  nzMaskClosable="false"
  nzWidth="60%"
  [nzOkLoading]="currentIncidentLoading"
>
  <div *nzModalContent class="-inner-content">
    <form nz-form #incidentForm="ngForm">
      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzFor="incident-name" nzRequired="true">{{ 'status.incident.name' | i18n }}</nz-form-label>
        <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
          <input
            [(ngModel)]="currentStatusIncident.name"
            nz-input
            required
            name="incident-name"
            type="text"
            id="incident-name"
            [placeholder]="'status.incident.name.tip' | i18n"
          />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzFor="incident-component" nzRequired="true">{{ 'status.incident.component' | i18n }}</nz-form-label>
        <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
          <nz-checkbox-group name="incident-component" id="incident-component" [(ngModel)]="currentIncidentComponentOptions">
          </nz-checkbox-group>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="!isIncidentModalAdd">
        <nz-form-label [nzSpan]="7" nzFor="incident-history">{{ 'status.incident.history' | i18n }}</nz-form-label>
        <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
          <nz-collapse>
            <nz-collapse-panel *ngFor="let content of currentStatusIncident.contents" [nzHeader]="panelHeader">
              <nz-list nzSize="small" nzSplit="false">
                <nz-list-item>
                  {{ content.message }}
                </nz-list-item>
                <nz-list-item>
                  <span>{{ content.timestamp | date : 'YYYY-MM-dd HH:mm:ss' }}</span>
                  <nz-tag *ngIf="content.state == 0" [nzColor]="'#ff2f2f'">
                    {{ 'status.incident.state.0' | i18n }}
                  </nz-tag>
                  <nz-tag *ngIf="content.state == 1" [nzColor]="'#e56c23'">
                    {{ 'status.incident.state.1' | i18n }}
                  </nz-tag>
                  <nz-tag *ngIf="content.state == 2" [nzColor]="'#19a7e7'">
                    {{ 'status.incident.state.2' | i18n }}
                  </nz-tag>
                  <nz-tag *ngIf="content.state == 3" [nzColor]="'#34be8f'">
                    {{ 'status.incident.state.3' | i18n }}
                  </nz-tag>
                </nz-list-item>
              </nz-list>
              <ng-template #panelHeader>
                <div style="width: 100%; display: flex; justify-content: space-between">
                  <div>
                    <span>{{ sliceStringLength(content.message, 20) }}</span>
                  </div>
                  <div>
                    <span>{{ content.timestamp | date : 'MM-dd HH:mm:ss' }}</span>
                  </div>
                </div>
              </ng-template>
            </nz-collapse-panel>
          </nz-collapse>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzFor="incident-state" nzRequired="true">{{ 'status.incident.state' | i18n }}</nz-form-label>
        <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
          <nz-radio-group
            [(ngModel)]="currentStatusIncident.state"
            nzButtonStyle="solid"
            [required]="'true'"
            name="incident-state"
            id="incident-state"
          >
            <label nz-radio-button [nzValue]="0">
              {{ 'status.incident.state.0' | i18n }}
              <span nz-icon nzType="arrow-right" nzTheme="outline"></span>
            </label>
            <label nz-radio-button [nzValue]="1">
              {{ 'status.incident.state.1' | i18n }}
              <span nz-icon nzType="arrow-right" nzTheme="outline"></span>
            </label>
            <label nz-radio-button [nzValue]="2">
              {{ 'status.incident.state.2' | i18n }}
              <span nz-icon nzType="arrow-right" nzTheme="outline"></span>
            </label>
            <label nz-radio-button [nzValue]="3">
              {{ 'status.incident.state.3' | i18n }}
              <span nz-icon nzType="poweroff" nzTheme="outline"></span>
            </label>
          </nz-radio-group>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzFor="incident-message" nzRequired="true">{{ 'status.incident.message' | i18n }}</nz-form-label>
        <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
          <textarea
            [(ngModel)]="currentIncidentContent.message"
            nz-input
            required
            name="incident-message"
            type="text"
            id="incident-message"
            [placeholder]="'status.incident.message.tip.' + currentStatusIncident.state | i18n"
            rows="2"
          ></textarea>
        </nz-form-control>
      </nz-form-item>
    </form>
  </div>
</nz-modal>
