<!--
  ~ 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.
  -->

<div id="dialog-box" class="confirmation-dialog">

  <header class="dialog-header">
    <h4 class="modal-title">
      <span>{{ data.type.toUpperCase() | convertaction}} </span>
    </h4>
    <button type="button" class="close" (click)="dialogRef.close()">&times;</button>
  </header>

  <div class="dialog-content">
    <div class="content-box">
      <div *ngIf="data.type === 'delete'">
        <mat-list class="resources">

          <mat-list-item class="list-header">
            <div class="object">Object</div>
            <div class="size">Size</div>
          </mat-list-item>

          <div class="scrolling-content delete-list" id="scrolling">

            <mat-list-item *ngFor="let object of data.items" class="delete-item">
              <div class="object">
                <span *ngIf="object['children']"><i class="material-icons folder-icon" >folder</i></span>
                <span *ngIf="!object['children']"><i class="material-icons folder-icon file-icon" >description</i></span>
                <div 
                  class="ellipsis"
                  matTooltip="{{object['item']}}"
                  matTooltipPosition="above"
                  matTooltipShowDelay="1000"
                  [matTooltipClass]="'full-size-tooltip'"
                >
                  {{object['item']}}
                </div>
              </div>
              <div  class="size">{{object['children'] ? '-' : object['object'].size | convertFileSize}}</div>
            </mat-list-item>

          </div>
        </mat-list>

        <div mat-dialog-content class="bottom-message" *ngIf="data.type === 'delete'">
          <span class="confirm-message" *ngIf="isFolders">All affected objects will be deleted.</span>
          <span class="confirm-message" *ngIf="!isFolders"><span *ngIf="data.items.length > 1">These objects</span><span *ngIf="data.items.length === 1">This object</span> will be deleted.</span>
        </div>

        <div class="text-center m-top-20">
          <p class="strong">Do you want to proceed?</p>
        </div>
      </div>

      <div *ngIf="data.type === 'resolve_conflicts'">
        <p>
          <span
            class="strong upload-item-name ellipsis"
            matTooltip="{{data.items}}"
            matTooltipPosition="above"
            matTooltipShowDelay="1000"
            [matTooltipClass]="'full-size-tooltip'"
          >
            {{data.items}}
          </span> already exists in selected folder. How would you like to resolve this conflict?
        </p>

        <mat-radio-group
          aria-labelledby="upload-radio-group-label"
          class="upload-radio-group"
          [(ngModel)]="fileAction"
        >
          <mat-radio-button 
            class="upload-radio-button" 
            *ngFor="let action of uploadActions" 
            [value]="action"
          >
            {{action}}
          </mat-radio-button>
        </mat-radio-group>

        <div class="repeat-for-all" >
          <div 
            class="empty-checkbox" 
            [ngClass]="{'checked': actionForAll}" 
            (click)="toggleActionForAll();$event.stopPropagation()" 
          >
            <span class="checked-checkbox" *ngIf="actionForAll"></span>
          </div>
          <span 
            class="repeat-message" 
            (click)="toggleActionForAll();$event.stopPropagation()"
          >
            Repeat for all remaining conflicts
          </span>
        </div>
      </div>

      <div *ngIf="data.type === 'cancel'">
        <p class="upload-message">
          <span>Cancel uploading file </span> <span class="strong ellipsis upload-item-name">{{data.items.name}}.</span>
        </p>
        <div class="text-center m-top-20">
          <span class="strong">Do you want to proceed?</span>
        </div>
      </div>

      <div *ngIf="data.type === 'upload_limitation'">
        <p class="upload-limit-message" *ngIf="data.items.toMany">Only the first fifty objects will be uploaded.</p>
        <p class="upload-limit-message" *ngIf="data.items.toBig">Only file(s) within 4 GB will be uploaded.</p>
        <div class="text-center m-top-20">
          <span class="strong">Do you want to proceed?</span>
        </div>
      </div>

      <div class="text-center m-top-20" *ngIf="data.type === 'delete' || data.type === 'cancel' || data.type === 'upload_limitation'">
        <button  
          mat-raised-button 
          type="button" 
          class="butt action" 
          (click)="dialogRef.close()"
        >
          No
        </button>
        <button 
          mat-raised-button 
          type="button" 
          class="butt butt-success action" 
          (click)="dialogRef.close(true)"
        >
          Yes
        </button>
      </div>

      <div class="text-center m-top-20" *ngIf="data.type === 'resolve_conflicts'">
        <button  
          mat-raised-button 
          type="button" 
          class="butt action" 
          (click)="dialogRef.close()"
        >
          Cancel
        </button>
        <button 
          mat-raised-button 
          type="button" 
          class="butt butt-success action" 
          (click)="submitResolving()"
        >
          Continue
        </button>
      </div>
    </div>
  </div>
</div>