<div class="fl-bordered-box">
  <div>
    <app-icon [icon]="{name: bootSourceIcon(), class: 'fl-icons'}"></app-icon>
  </div>
  <div class="selected-source-display">
    <span *ngIf="!selectedBootSource.object" i18n>No boot source selected</span>
    <span *ngIf="selectedBootSource && selectedBootSource.object" class="fl-ellipsis-text">
      {{selectedBootSource.object.display_name || selectedBootSource.object.name || selectedBootSource.object.id}}
    </span>
    <div class="mat-caption selected-source-display-details" *ngIf="selectedBootSource.type">{{selectedBootSource.type}}
      <span *ngIf="selectedBootSource && selectedBootSource.type && selectedBootSource.type !== 'volume' &&
      selectedBootSource.type !== 'volume_snapshot' && selectedBootSource.createNewVolume" i18n>
        - create {{selectedBootSource.volumeSize}} GB volume
      </span>
    </div>
    <div class="mat-caption" *ngIf="!selectedBootSource.type" i18n>Click change to select a boot source.</div>
  </div>
  <div>
    <a mat-button color="primary" (click)="showSideDialog()" i18n>Change</a>
  </div>
</div>
<div [@openCloseDialog]="showSources ? {value: 'open', params: { leftOffset:leftOffset, rightOffset:rightOffset}} : {value: 'closed', params: {closedLeftOffset:closedLeftOffset, closedRightOffset:closedRightOffset}}"
     class="boot-source-select-dialog">
  <div class="boot-source-select-backdrop" [ngStyle]="showSources ? {} : (languageService.langDirection === 'ltr' ? {left: '100%'} : {right: '100%'})" (click)="cancelSelection()"></div>
  <div class="boot-source-select-dialog-container">
    <p class="mat-subtitle-1 fl-no-margin-bottom" i18n>Select boot source</p>
    <p class="mat-caption fl-no-margin-top" i18n>
      Choose from an existing image, volume, instance snapshot or volume snapshot
    </p>

    <mat-tab-group #bootSourcesTabGroup [dynamicHeight]="true" [animationDuration]="'0'"
                   class="boot-source-tab-group"
                   (selectedTabChange)="changedTab($event)" [dir]="languageService.langDirection"
                   [(selectedIndex)]="selectedTab">
      <mat-tab label="Public images" i18n-label *ngIf="!requestedBootSource">
        <p *ngIf="images && !images.length" class="fl-detail fl-margin-top" i18n>No items to choose from.</p>
        <mat-radio-group
          aria-labelledby="Image boot source" i18n-aria-labelledby
          class="boot-source-radio-group"
          (change)="changedSource('image')"
          [(ngModel)]="selectedBootSource.objectId">
          <mat-radio-button [color]="'primary'" *ngFor="let image of images" [value]="image.id"
                            [disabled]="!image.assigned_to_flavor || image.disabled"
                            (change)="setBootSourceObject(image)" (dblclick)="doubleClickedSource()">
            <div [attr.fl-tooltip]="getImageTooltip(image)" fl-tooltip-direction="right">
              <span>{{image.display_name || image.id}}</span>
              <span class="mat-caption boot-source-caption">
                {{image.os_distro}} {{image.os_version}} {{image.architecture}} <app-date-displayer [date]="image.created_at"></app-date-displayer>
              </span>
            </div>
          </mat-radio-button>
        </mat-radio-group>
      </mat-tab>
      <mat-tab label="Client images" i18n-label *ngIf="!requestedBootSource">
        <p *ngIf="ownedImages && !ownedImages.length" class="fl-detail fl-margin-top" i18n>No items to choose from.</p>
        <mat-radio-group
          aria-labelledby="Image boot source" i18n-aria-labelledby
          class="boot-source-radio-group"
          (change)="changedSource('owned_image')"
          [(ngModel)]="selectedBootSource.objectId">
          <mat-radio-button [color]="'primary'" *ngFor="let image of ownedImages" [value]="image.id"
                            [disabled]="!image.assigned_to_flavor || image.disabled"
                            (change)="setBootSourceObject(image)" (dblclick)="doubleClickedSource()">
            <div [attr.fl-tooltip]="getImageTooltip(image)" fl-tooltip-direction="right">
              <span>{{image.display_name || image.id}}</span>
              <span class="mat-caption boot-source-caption">
                {{image.os_distro}} {{image.os_version}} {{image.architecture}} <app-date-displayer [date]="image.created_at"></app-date-displayer>
              </span>
            </div>
          </mat-radio-button>
        </mat-radio-group>
      </mat-tab>
      <mat-tab label="Community images" i18n-label *ngIf="showCommunityImages">
        <p *ngIf="communityImages && !communityImages.length" class="fl-detail fl-margin-top" i18n>No items to choose from.</p>
        <mat-radio-group
          aria-labelledby="Image boot source" i18n-aria-labelledby
          (change)="changedSource('community_image')"
          class="boot-source-radio-group"
          [(ngModel)]="selectedBootSource.objectId">
          <mat-radio-button [color]="'primary'" *ngFor="let image of communityImages" [value]="image.id"
                            [disabled]="!image.assigned_to_flavor || image.disabled"
                            (change)="setBootSourceObject(image)" (dblclick)="doubleClickedSource()">
            <div [attr.fl-tooltip]="getImageTooltip(image)" fl-tooltip-direction="right">
              <span>{{image.display_name || image.id}}</span>
              <span class="mat-caption boot-source-caption">
                {{image.os_distro}} {{image.os_version}} {{image.architecture}} <app-date-displayer [date]="image.created_at"></app-date-displayer>
              </span>
            </div>
          </mat-radio-button>
        </mat-radio-group>
      </mat-tab>
      <mat-tab label="Shared images" i18n-label *ngIf="showSharedImages">
        <p *ngIf="sharedImages && !sharedImages.length" class="fl-detail fl-margin-top" i18n>No items to choose from.</p>
        <mat-radio-group
          aria-labelledby="Image boot source" i18n-aria-labelledby
          (change)="changedSource('shared_image')"
          class="boot-source-radio-group"
          [(ngModel)]="selectedBootSource.objectId">
          <mat-radio-button [color]="'primary'" *ngFor="let image of sharedImages" [value]="image.id"
                            [disabled]="!image.assigned_to_flavor || image.disabled"
                            (change)="setBootSourceObject(image)" (dblclick)="doubleClickedSource()">
            <div [attr.fl-tooltip]="getImageTooltip(image)" fl-tooltip-direction="right">
              <span>{{image.display_name || image.id}}</span>
              <span class="mat-caption boot-source-caption">
                {{image.os_distro}} {{image.os_version}} {{image.architecture}} <app-date-displayer [date]="image.created_at"></app-date-displayer>
              </span>
            </div>
          </mat-radio-button>
        </mat-radio-group>
      </mat-tab>
      <mat-tab label="Volumes" i18n-label *ngIf="!requestedBootSource">
        <p *ngIf="volumes && !volumes.length" class="fl-detail fl-margin-top" i18n>No items to choose from.</p>
        <mat-radio-group
          aria-labelledby="Volume boot source" i18n-aria-labelledby
          (change)="changedSource('volume')"
          class="boot-source-radio-group"
          [(ngModel)]="selectedBootSource.objectId">
          <mat-radio-button [color]="'primary'" *ngFor="let volume of volumes" [value]="volume.id"
                            (change)="setBootSourceObject(volume)" (dblclick)="doubleClickedSource()">
            <span>{{volume.name || volume.id}}</span>
            <span class="mat-caption boot-source-caption">
              <span *ngIf="volume.description">{{volume.description}}</span>
              <span *ngIf="!volume.description" i18n>{{volume.size}} GB created on <app-date-displayer [date]="volume.created_at"></app-date-displayer></span>
            </span>
          </mat-radio-button>
        </mat-radio-group>
      </mat-tab>
      <mat-tab label="Volume snapshots" i18n-label *ngIf="!requestedBootSource">
        <p *ngIf="volumeSnapshots && !volumeSnapshots.length" class="fl-detail fl-margin-top" i18n>No items to choose from.</p>
        <mat-radio-group
          aria-labelledby="Volume boot source" i18n-aria-labelledby
          (change)="changedSource('volume_snapshot')"
          class="boot-source-radio-group"
          [(ngModel)]="selectedBootSource.objectId">
          <mat-radio-button [color]="'primary'" *ngFor="let volumeSnapshot of volumeSnapshots"
                            [value]="volumeSnapshot.id" (change)="setBootSourceObject(volumeSnapshot)"
                            (dblclick)="doubleClickedSource()">
            <span>{{volumeSnapshot.name || volumeSnapshot.id}}</span>
            <span class="mat-caption boot-source-caption">
              <span *ngIf="volumeSnapshot.description">{{volumeSnapshot.description}}</span>
              <span *ngIf="!volumeSnapshot.description" i18n>{{volumeSnapshot.size}} GB created on <app-date-displayer [date]="volumeSnapshot.created_at"></app-date-displayer></span>
            </span>
          </mat-radio-button>
        </mat-radio-group>
      </mat-tab>

      <mat-tab label="Requested image" i18n-label *ngIf="requestedBootSource">
        <p *ngIf="requestedImages && !requestedImages.length" class="fl-detail fl-margin-top" i18n>No items to choose from.</p>
        <mat-radio-group
          aria-labelledby="Requested image" i18n-aria-labelledby
          (change)="changedSource('requested_image')"
          class="boot-source-radio-group"
          [(ngModel)]="selectedBootSource.objectId">
          <mat-radio-button [color]="'primary'" *ngFor="let image of requestedImages" [value]="image.id"
                            [disabled]="image.disabled"
                            (change)="setBootSourceObject(image)" (dblclick)="doubleClickedSource()">
            <div [attr.fl-tooltip]="getImageTooltip(image)" fl-tooltip-direction="right">
              <span>{{image.display_name || image.id}}</span>
              <span class="mat-caption boot-source-caption">
                {{image.os_distro}} {{image.os_version}} {{image.architecture}} <app-date-displayer [date]="image.created_at"></app-date-displayer>
              </span>
            </div>
          </mat-radio-button>
        </mat-radio-group>
      </mat-tab>
    </mat-tab-group>

    <div class="boot-source-select-dialog-footer">
      <a [routerLink]="config.getPanelUrl('openstack/images/create')"
         [queryParams]="{from_instance_create: true}"
         *ngIf="((selectedBootSource.type && selectedBootSource.type !== 'volume'
         && selectedBootSource.type !== 'volume_snapshot') || !selectedBootSource.type)
         && authService.feature('openstack.images.updatecreate')"
         class="upload-img-btn" mat-stroked-button i18n>
        Upload new image
      </a>
      <div *ngIf="selectedBootSource.type && isImageType.indexOf(selectedBootSource.type) > -1 && showStorageSelection">
        <div layoutDirection="row" class="storage-row">
          <mat-form-field appFlex="20" ltMdFlex="40">
            <mat-label i18n>Storage type</mat-label>
            <mat-select [(ngModel)]="selectedBootSource.storageType"
                        [disabled]="selectedBootSource && !selectedBootSource.objectId"
                        (selectionChange)="storageTypeChanged()">
              <mat-option [value]="'local'"
                          *ngIf="(selectedFlavor && selectedFlavor.root_gb > 0) || !selectedFlavor" i18n>
                Local storage
              </mat-option>
              <ng-container *ngIf="showVolumeOptions()">
                <mat-option *ngFor="let volType of volumeTypes" [value]="volType.name">
                  {{volType.description}}
                </mat-option>
              </ng-container>
            </mat-select>
          </mat-form-field>
          <mat-form-field appFlex="10" ltMdFlex="20" class="offset-1" *ngIf="selectedBootSource.createNewVolume">
            <mat-label i18n>Volume size (GB)</mat-label>
            <input  matInput placeholder="Volume size (GB)" i18n-placeholder
                    [step]="sizeIncrement"
                    [min]="minimumSize"
                    [disabled]="selectedBootSource && !selectedBootSource.objectId"
                    type="number"
                    [ngModelOptions]="{standalone: true}"
                    [(ngModel)]="selectedBootSource.volumeSize">
            <span *ngIf="!validVolumeSize()" class="mat-error invalid-vol-size" i18n>Invalid volume size.</span>
          </mat-form-field>
          <mat-form-field appFlex="20" ltMdFlex="40" class="offset-1"
                          *ngIf="selectedBootSource.createNewVolume && !this.hideVolumeAz &&
                          this.config.authService.feature('openstack.instances.availability_zones')">
            <mat-label i18n>Volume availability zone</mat-label>
            <mat-select [(ngModel)]="selectedBootSource.cinderAZ"
                        [disabled]="selectedBootSource && !selectedBootSource.objectId">
              <mat-option value="fleio-auto" i18n>
                Auto
              </mat-option>
              <ng-container *ngIf="showVolumeOptions()">
                <mat-option *ngFor="let az of cinderAz" [value]="az">
                  {{az}}
                </mat-option>
              </ng-container>
            </mat-select>
          </mat-form-field>
        </div>
        <div layoutDirection="row" class="fl-margin-bottom-medium">
          <div *ngIf="!selectedBootSource.createNewVolume" i18n>Disk is determined by flavor</div>
          <mat-checkbox [(ngModel)]="selectedBootSource.deleteOnTermination" [color]="'primary'"
                        *ngIf="selectedBootSource.createNewVolume" i18n>
            Auto delete volume when instance is terminated
          </mat-checkbox>
        </div>
      </div>
      <mat-divider></mat-divider>
      <div class="boot-source-select-dialog-actions">
        <a mat-raised-button color="primary"
           [disabled]="!!!selectedBootSource.object || (selectedBootSource.createNewVolume && !validVolumeSize())"
           [attr.fl-tooltip]="!!!selectedBootSource.object ? 'Select a boot source' : ''"
           (click)="makeSelection()" i18n>Select</a>
        <a class="offset-1" mat-button (click)="cancelSelection()" i18n>Cancel</a>
      </div>
    </div>
  </div>
</div>
