<style>
  .control-section{
      margin-top: 100px;
  }
  
  </style>
  <div class="control-section">
    <div class="content-wrapper">
      <ejs-kanban #kanbanObj cssClass='kanban-transition' keyField='Category' [dataSource]='kanbanData'
        [cardSettings]='cardSettings'>
        <e-columns>
          <e-column headerText='Order' keyField='Order' allowToggle='true' allowDrop='false' [transitionColumns]='orderColumns'></e-column>
          <e-column headerText='Ready to Serve' keyField='Ready to Serve' allowToggle='true' [transitionColumns]='serveColumns'></e-column>
          <e-column headerText='Home Delivery' keyField='Ready to Deliver' allowToggle='true' [transitionColumns]='deliverColumns'></e-column>
          <e-column headerText='Delivered' keyField='Delivered, Served' allowToggle='true' allowDrag='false'></e-column>
        </e-columns>
        <ng-template #cardSettingsTemplate let-data>
          <div>
          <div class='e-card-header'>
          <div class='e-card-header-caption'>
          <div class='e-card-header-title e-tooltip-text'>{{data?.Title || 'Default Title'}}</div>
          </div>
          </div>
          <div class='e-card-content e-tooltip-text'>
          <div class='e-text'>{{data?.Description || 'Default Description'}}</div>
          <div class='e-card-kanban-image'>
          <img [src]="data?.ImageURL ? 'https://ej2.syncfusion.com/angular/demos/assets/kanban/images/' + data.ImageURL : 'default-image.png'" 
                               alt="{{data?.ImageURL || 'Default'}}" />
          </div>
          </div>
          <div class='e-card-custom-footer'>
          <div class="e-card-tag-field" *ngFor="let tag of (data?.Tags?.split(',') || []);">
                          {{tag}}
          </div>
          </div>
          </div>
          </ng-template>
      </ejs-kanban>
    </div>
  </div>
  