<div>
  <mat-list>
    <h1 mat-subheader>{{ 'settings.notification.chat' | translate }}</h1>
    <mat-list-item>
      <span class="item-title">{{
        'settings.notification.receival' | translate
      }}</span>
    </mat-list-item>
    <mat-list-item>
      <span class="item-input" fullWidth>
        <mat-radio-group
          aria-label="Select an option"
          [value]="setting.use ? 'true' : 'false'"
          (change)="onChangeUse($event)"
        >
          <mat-radio-button value="true">{{
            'settings.notification.receive' | translate
          }}</mat-radio-button>
          <mat-radio-button value="false">{{
            'settings.notification.notReceive' | translate
          }}</mat-radio-button>
        </mat-radio-group>
      </span>
    </mat-list-item>
    <mat-list-item>
      <span class="item-title">{{
        'settings.notification.method' | translate
      }}</span>
      <span class="item-input">
        <mat-form-field>
          <mat-select
            [value]="setting.method"
            (selectionChange)="onSelectionChangeMethod($event)"
          >
            <mat-option
              *ngFor="let notificationMethod of notificationMethodList"
              [value]="notificationMethod.type"
            >
              {{ notificationMethod.name }}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </span>
    </mat-list-item>

    <mat-list-item>
      <span class="item-title">{{
        'settings.notification.settingOfAlertWindow' | translate
      }}</span>
      <span class="item-input">
        <mat-form-field>
          <mat-select
            value="{{ setting.alertExposureTime }}"
            (selectionChange)="onSelectionChangeAlertExposureTime($event)"
          >
            <mat-option value="5">5</mat-option>
            <mat-option value="10">10</mat-option>
            <mat-option value="15">15</mat-option>
            <mat-option value="20">20</mat-option>
          </mat-select>
        </mat-form-field>
      </span>
    </mat-list-item>

    <mat-divider></mat-divider>

    <h1 mat-subheader>{{ 'settings.notification.mobile' | translate }}</h1>
    <mat-list-item>
      <span class="item-title">{{
        'settings.notification.receiveForMobile' | translate
      }}</span>
    </mat-list-item>
    <mat-list-item>
      <span class="item-input" fullWidth>
        <mat-checkbox
          [checked]="setting.receiveForMobile"
          (change)="onChangeReceiveForMobile($event)"
          >{{
            'settings.notification.receiveForMobileTypeAlways' | translate
          }}</mat-checkbox
        >
        <span class="text-guide">({{
          'settings.notification.descriptionReceiveForMobileTypeAlways'
            | translate
        }})</span>
      </span>
    </mat-list-item>

    <mat-divider></mat-divider>
    <h1 mat-subheader>{{ 'settings.notification.message' | translate }}</h1>
    <mat-list-item>
      <span class="item-title">{{
        'settings.notification.receiveForMessage' | translate
      }}</span>
    </mat-list-item>
    <mat-list-item>
      <span class="item-input" fullWidth>
        <mat-checkbox
          [checked]="setting.receiveForMessage"
          (change)="onChangeReceiveForMessage($event)"
          >{{
            'settings.notification.receiveForMessageTypePopup' | translate
          }}</mat-checkbox
        >
        <span class="text-guide">({{
          'settings.notification.descriptionReceiveForMobileTypePopup'
            | translate
        }})</span>
      </span>
    </mat-list-item>
  </mat-list>
</div>
