<div class="list-items" cdkDropList (cdkDropListDropped)="drop($event)">
  <div class="item" *ngFor="let entry of entries; let index=index; trackBy: trackBy" cdkDrag
    [cdkDragDisabled]="readonly">
    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mr-2 text-secondary" fill="none" viewBox="0 0 24 24"
      stroke="currentColor" cdkDragHandle [class.opacity-0]="readonly" [class.cusor-move]="!readonly">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l4-4 4 4m0 6l-4 4-4-4" />
    </svg>
    <app-rule-list-item [symbolMap]="symbolMap" [readonly]="readonly" [value]="entry"
      (valueChange)="updateValue(index, $event)" (selectedChange)="selectItem(index, $event)"
      (delete)="deleteEntry(index)">
    </app-rule-list-item>
  </div>
</div>

<div class="button-list" *ngIf="selectedItems.length === 0">
  <div class="dotted" *ngIf="!entries?.length && readonly">
    No entries available
  </div>

  <button class="new-entry dotted" (click)="addEntry()"
    *ngIf="!readonly && (!entries?.length || entries[entries.length-1] !== '')">
    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd"
        d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
    </svg>
    <span>Add Rule</span>
  </button>
</div>

<div class="flex justify-end button-list" *ngIf="selectedItems.length > 0">
  <span>
    <app-menu-trigger [menu]="selectionMenu" [useContent]="true">
      {{ selectedItems.length }} Rule{{ selectedItems.length > 1 ? 's' : ''}} selected
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
        <path fill-rule="evenodd"
          d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
          clip-rule="evenodd" />
      </svg>
    </app-menu-trigger>
  </span>

  <app-menu #selectionMenu>
    <app-menu-item (click)="removeSelectedItems()">Remove Rules</app-menu-item>
    <app-menu-item (click)="abortSelection()">Cancel</app-menu-item>
  </app-menu>
</div>
