<div class="content">
  <div class="default-header">
    <div class="row">
      <div class="col col-md-1">
        <button
          class="top-button"
          *ngIf="controller"
          class="cancel-button"
          mat-button
          routerLink="/controller/{{ controller.id }}/preferences"
          >
          <mat-icon>arrow_back</mat-icon>
        </button>
      </div>
      <div class="col col-md-10">
        <h1 class="col">Docker container templates</h1>
      </div>
      <div class="col col-md-1">
        <button
          *ngIf="controller"
          class="top-button cancel-button"
          matTooltip="Add Docker container template"
          matTooltipClass="custom-tooltip"
          routerLink="/controller/{{ controller.id }}/preferences/docker/addtemplate"
          mat-button
        >
          <mat-icon>add_circle_outline</mat-icon>
        </button>
      </div>
    </div>

  </div>
  <app-empty-templates-list *ngIf="!dockerTemplates.length"></app-empty-templates-list>
  <div class="default-content" *ngIf="dockerTemplates.length">
    <div class="listcontainer mat-elevation-z8">
      <mat-nav-list *ngIf="controller">
        <div class="list-item" *ngFor="let template of dockerTemplates">
          <mat-list-item class="template-name" routerLink="{{ template.template_id }}">{{
            template.name
          }}</mat-list-item>
          <button mat-button class="menu-button" [matMenuTriggerFor]="menu">
            <mat-icon>more_vert</mat-icon>
          </button>
          <mat-menu #menu="matMenu">
            <button mat-menu-item routerLink="{{ template.template_id }}">
              <mat-icon>edit</mat-icon><span>Edit</span>
            </button>
            <button mat-menu-item (click)="copyTemplate(template)">
              <mat-icon>content_copy</mat-icon><span>Copy</span>
            </button>
            <button mat-menu-item (click)="deleteTemplate(template)">
              <mat-icon>delete</mat-icon><span>Delete</span>
            </button>
          </mat-menu>
        </div>
      </mat-nav-list>
    </div>
  </div>
</div>
<app-delete-template #deleteComponent [controller]="controller" (deleteEvent)="onDeleteEvent()"> </app-delete-template>
