<div id="managerViewContainer" class="flex flex-column flex-1 gap-6 h-100">
  <div id="schedulerBarContainer">
    <qrzmng-scheduler-control></qrzmng-scheduler-control>
  </div>

  <div id="manager-content-container" class="flex flex-row flex-1 gap-6">
    <div class="flex-1" style="max-width: 250px">
      <div fxLayout="row" fxLayoutAlign="stretch" fxFill>
        <qrzmng-trigger-list
          (onNewTriggerClicked)="onNewTriggerRequested()"
          [openedNewTriggerForm]="newTriggerFormOpened"
          (onSelectedTrigger)="setSelectedTrigger($event)"
          fxFill></qrzmng-trigger-list>
      </div>
    </div>

    <div class="flex-1" style="max-width: 350px">
      <div fxLayout="row" fxFill>
        <div fxLayout="column" fxFill>
          <qrzmng-simple-trigger-config
            fxFill
            [triggerKey]="selectedTriggerKey"
            (triggerFormOpenChange)="setNewTriggerFormOpened($event)"
            (onTriggerSubmitting)="monitorTrigger($event)"
            (onNewTrigger)="onNewTriggerCreated($event)">
          </qrzmng-simple-trigger-config>
        </div>
      </div>
    </div>

    <div class="flex-1">
        <div class="h-100 min-h-100 flex flex-column gap-6">
          <div class="flex flex-column" >
            <progress-panel class="flex-1"
              [triggerKey]=monitoredTriggerKey
            >
            </progress-panel>
          </div>
          <div class="flex flex-column flex-1" style="max-height: calc(100% - 136px); min-height: calc(100% - 210px);">
            <logs-panel  class="flex flex-1 h-100 max-h-100"
                         [triggerKey]=monitoredTriggerKey
            >
            </logs-panel>
          </div>
        </div>
      </div>
  </div>
</div>
