<div class="content">

  <div style="display: flex;  margin-bottom: 5px;"> 
    <button nz-button nzType="dashed" (click)="selectSubTemplate()" style=" border-radius: 0.5rem; border: 1px solid #ddd;">
      <i nz-icon nzType="appstore" nzTheme="outline"></i>
      选择子模板类型
    </button>
  
    <h2 *ngIf="_item.template" style="margin-left: 10px; margin-top: 1px;">
      {{_item.template.description}}
    </h2>

    <button nz-button nzType="danger" (click)="deleteSubTemplate()" style="position: absolute; right: 30px; border-radius: 0.5rem; border: 1px solid #ddd;">
      <i nz-icon nzType="delete" nzTheme="outline"></i>
      删除
    </button>
  
  </div>
 

    <iframe #iframe id="iframe" [src]="safeUrl" style="width: 98%; height: 70vh; border: 1px solid #ccc; padding: 5px;" frameborder="0">
    </iframe>




 

 

 
  <nz-modal [(nzVisible)]="isShowTemplate" (nzAfterClose)="closePanel()" nzTitle="选择子模板" [nzFooter]="null"
    (nzOnCancel)="panelCancelClicked()" nzWidth="80%" nzHeight="80%">

    <div class="template-container">

      <div *ngFor="let template of templateArr" >

          <div (click)="templateClick(template)" style="width: 150px; height: 100px; border: 1px solid #ccc; margin: 5px; cursor:pointer; user-select: none;">
            <div style="width: 100%; height: 70%; border-bottom: 1px solid #ccc; overflow: hidden;">
              <img [src]="template.cover" style="width: 100%; height: auto;">
            </div>
            <div style="width: 100%; height: 30%; display: flex; align-items: center; justify-content: center; ">
              <label  style="width: 90%; text-align: center; text-overflow: ellipsis; white-space:nowrap; overflow: hidden; ">{{template.description}}</label>
            </div>
          </div>
        </div>

    </div>
  </nz-modal>
   

</div>