  <div>
    <h2 class="modal-title">Escolhidos</h2>
    <div
      cdkDropList
      class="example-list2"
      (cdkDropListDropped)="drop($event)">
      <div class="example-box" *ngFor="let item of chosen, let i = index" cdkDrag>

        <div class="texto-card" *ngIf="lookAtThisPhotograph(item?.url); else elseBlock">
          {{item.name}}
          <div *ngIf="item?.description" style="margin-bottom: auto; font-size: 14px; overflow-y: auto;">
            <hr>
            {{item.description}}
          </div>
        </div>

        <ng-template #elseBlock>
          <img [src]="item.url" alt="Fotografia"
               style="height: 100px; width: auto">
        </ng-template>
        
        <button class="btn btn-danger" (click)="removeElement(item, i)">Remover</button>
      </div>
    </div>
  </div>
  <br>
  <div>
    <h2 class="modal-title">Disponiveis</h2>
    <div class="example-list">
      <div class="example-box" *ngFor="let item of received; let i = index">

        <div class="texto-card" *ngIf="lookAtThisPhotograph(item?.url); else elseBlock">
          {{item.name}}
          <div *ngIf="item?.description" style="margin-bottom: auto; font-size: 14px; overflow-y: auto;">
            <hr>
            {{item.description}}
          </div>
        </div>

        <ng-template #elseBlock>
          <img [src]="item.url" alt="Fotografia"
               style="height: 100px; width: auto">
        </ng-template>
        
        <div class="action-button">
          <button style="bottom:0px" class="btn btn-primary" (click)="addElement(item, i)">Adicionar</button>
        </div>
      </div>
    </div>
  </div>
<hr/>
<mat-dialog-actions align="end">
  <button class="btn btn-outline-secondary"  (click)="removerTudo()" style="margin-right: 20px;">Remover tudo</button>
  <button class="btn btn-outline-secondary"  (click)="adicionarTudo()" style="margin-right: 20px;">Adicionar tudo</button>
  <button class="btn btn-outline-primary" [mat-dialog-close]="getModalData()" cdkFocusInitial>{{chosen && chosen.length ? 'OK' : 'Cancelar'}}</button>
</mat-dialog-actions>
