<h2 mat-dialog-title style="text-align: center">
  Installation Conflict
  <mat-icon style="color: yellow; vertical-align: middle;">report_problem</mat-icon>
</h2>
<div style="text-align: center;">
  <mat-dialog-content class="mat-typography">
    <div *ngIf="data?.matchesInstalledTitles?.length">
      <h3>
        <strong>
          The following selected packages match an already installed package's title:
        </strong>
      </h3>
      <div style="margin: 0 auto; display: inline-block;">
        <mat-list>
          <mat-list-item *ngFor="let pkg of data.matchesInstalledTitles | keyvalue">
            <mat-icon color="accent" style="font-size: 18px; margin-top: 5px; vertical-align: middle;">
              local_mall
            </mat-icon>
            {{ pkg.value.title }}
          </mat-list-item>
        </mat-list>
      </div>
      <br>
      <br>
      <div style="text-align: center;">
        <strong>Please remove the conflicting packages first</strong>
      </div>
      <br>
    </div>

    <div *ngIf="data?.matchesSelectedTitles?.length">
      <h3>
        <strong>
          The following selected packages have conflicting titles:
        </strong>
      </h3>
      <div style="margin: 0 auto; display: inline-block;">
        <div *ngFor="let pkg of data.matchesSelectedTitles | keyvalue" style="margin-bottom: 1em; text-align: left;" (click)="onSelection(pkg)">
          <mat-checkbox color="primary" (click)="$event.stopPropagation()" (change)="$event ? onSelection(pkg) : null" [checked]="selection.isSelected(pkg)" [disabled]="disable[pkg.key]">
            {{ pkg.value.title }} (<a href="{{ pkg.value.repository }}" target="_blank">{{ pkg.value.repository }})</a>)
          </mat-checkbox>
        </div>
      </div>
      <br>
      <div style="text-align: center;">
        <strong>
          Please only select unique titles from the above options
        </strong>
      </div>
    </div>
  </mat-dialog-content>
</div>

<mat-dialog-actions align="center">
  <button *ngIf="data?.matchesSelectedTitles?.length" [disabled]="!selection?.selected?.length" mat-raised-button color="accent" matTooltip="Submit" (click)="onSubmit()" style="margin-right: 5em;">
    <mat-icon>
      done
    </mat-icon>
  </button>
  <button mat-raised-button (click)="onCancel()" color="primary">
    <mat-icon>
      close
    </mat-icon>
  </button>
</mat-dialog-actions>
