<div class="da-drawer-menu">
  <d-toast [value]="msgs"></d-toast>
  <div class="da-operations">
    <span (click)="close($event)" title="Close" class="icon icon-close"> </span>
  </div>
  <div class="da-options da-menu-item">
    <div class="da-options-header">
      <p>
        {{ 'side-setting.layout' | translate }}
        <i class="icon icon-helping" dTooltip [content]="helpContent" [position]="'top'"></i>
      </p>
    </div>
    <div class="da-option-items">
      <div class="da-option-item da-side-bar-layout-item" (click)="handleLayoutClicked('sidebar')">
        <i class="icon icon-right selected" [ngStyle]="{ display: layout === 'sidebar' ? '' : 'none' }"></i>
      </div>
      <div class="da-option-item da-topnav-layout-item" (click)="handleLayoutClicked('topNav')">
        <i class="icon icon-right" [ngStyle]="{ display: layout === 'topNav' ? '' : 'none' }"></i>
      </div>
      <div class="da-option-item da-left-right-layout-item" (click)="handleLayoutClicked('left-right')">
        <i class="icon icon-right" [ngStyle]="{ display: layout === 'left-right' ? '' : 'none' }"></i>
      </div>
    </div>
    <div class="da-option-multiple da-no-option-items">
      <div class="da-multiple-item">
        <span>{{ 'side-setting.fix-header' | translate }}</span>
        <d-toggle [(ngModel)]="layoutConfig.header!.fixed" [disabled]="layout === 'sidebar'" (ngModelChange)="updateLayout()"></d-toggle>
      </div>
      <div class="da-multiple-item" [title]="layout !== 'left-right' ? sidebarNotice['cannotConfig'] : sidebarNotice['canConfig']">
        <span>{{ 'side-setting.fix-sidebar' | translate }}</span>
        <d-toggle [(ngModel)]="layoutConfig.sidebar.fixed" [disabled]="layout === 'topNav'" (ngModelChange)="updateLayout()"></d-toggle>
      </div>
    </div>
  </div>
  <div class="da-options da-menu-item">
    <div class="da-options-header">
      <p>{{ 'side-setting.content-area' | translate }}</p>
    </div>
    <div class="da-option-multiple da-no-option-items">
      <div class="da-multiple-item">
        <span>{{ 'side-setting.hide-footer' | translate }}</span>
        <d-toggle [(ngModel)]="layoutConfig.footer!.hidden" (ngModelChange)="updateLayout()"></d-toggle>
      </div>
      <div class="da-multiple-item">
        <span>{{ 'side-setting.hide-top' | translate }}</span>
        <d-toggle [(ngModel)]="layoutConfig.header!.hidden" (ngModelChange)="updateLayout()"></d-toggle>
      </div>
      <div class="da-multiple-item">
        <span>{{ 'side-setting.hide-menu' | translate }}</span>
        <d-toggle [(ngModel)]="layoutConfig.sidebar.hidden" [disabled]="layout === 'topNav'" (ngModelChange)="updateLayout()"></d-toggle>
      </div>
      <div class="da-multiple-item">
        <span>{{ 'side-setting.hide-menu-head' | translate }}</span>
        <d-toggle [(ngModel)]="layoutConfig.hideLogo" (ngModelChange)="updateLayout()"></d-toggle>
      </div>
    </div>
  </div>
  <div class="da-options da-menu-item">
    <d-alert [type]="'info'" [closeable]="false">{{ 'side-setting.notice' | translate }}</d-alert>
    <d-button [bsStyle]="'common'" [width]="'100%'" (btnClick)="onCopyClicked()">
      {{ 'side-setting.copy-config' | translate }}
      <i class="icon icon-copy"></i>
    </d-button>
  </div>
</div>