<div class="mb-5">
  <!--Navbar -->
  <nav class="navbar navbar-expand-lg bg-app fixed-top m-0 p-0" style="height: 90px">
    <div class="container-fluid">
      <div class="row w-100 p-0" style="height: 80px; width: 120px">
        <div class="col-3">
          <a class="navbar-brand" href="#">
            <div class="logo"></div>
          </a>
        </div>
      </div>
    </div>
  </nav>
  <!-- Navbar -->

</div>

<div class="container-fluid" style="height: 100vh">
  <div class="d-flex flex-column h-100">
    <div>

      <div class="flex-fill mt-5">
        <div>
          <h4>Pedidos em processo de separação</h4>
        </div>
        <kendo-grid
          [data]="ordersShipping"
          [resizable]="true"
          [scrollable]="true"
          [loading]="loading"
          style="height: 100hv; width: 100wv"
        >
          <ng-template kendoGridNoRecordsTemplate>
            <h4>Sem registros para serem exibidos.</h4>
          </ng-template>

          <ng-template class="mt-4" kendoGridLoadingTemplate>
            <div class="k-loading-color"></div>
            <div class="loading-container">
              <kendo-loader
                type="converging-spinner"
                size="large"
              ></kendo-loader>
            </div>
          </ng-template>

          <!-- columns for mid-size devices -->
          <kendo-grid-column
            media="(min-width: 450px)"
            field="orderDate"
            title="Mapa separação"
            [width]="120"
          >
            <ng-template kendoGridCellTemplate let-dataItem>
              {{ dataItem.orderDate  }}
            </ng-template>
          </kendo-grid-column>
          <kendo-grid-column
          media="(min-width: 450px)"
          field="orderId"
          title="Pedido"
          [width]="80"
        >
        </kendo-grid-column>
          <kendo-grid-column
            media="(min-width: 450px)"
            field="customerName"
            title="Cliente"
            [width]="200"
          >
          </kendo-grid-column>
          <kendo-grid-column
            media="(min-width: 450px)"
            field="progress"
            title="Progresso"
            [width]="150"
          >
          <ng-template kendoGridCellTemplate let-dataItem>
            <kendo-sparkline
              type="bar"
              [data]="dataItem.progress"
              [tooltip]="{ visible: false }"
              [transitions]="true"
              [seriesDefaults]="{
                labels: { background: 'none', visible: true, format: '{0}%' }
              }"
            >
              <kendo-chart-area [opacity]="0" [width]="300"></kendo-chart-area>
              <kendo-chart-value-axis>
                <kendo-chart-value-axis-item [min]="0" [max]="150">
                </kendo-chart-value-axis-item>
              </kendo-chart-value-axis>
            </kendo-sparkline>
          </ng-template>
          </kendo-grid-column>

          <!-- additional columns on large devices -->
          <kendo-grid-column
            media="(min-width: 680px)"
            field="process"
            title="Etapa"
            [width]="120"
          >
          </kendo-grid-column>
          <kendo-grid-column
            media="(min-width: 680px)"
            field="processDate"
            title="Data/Hora"
            [width]="100"
          >
          <ng-template kendoGridCellTemplate let-dataItem>
            {{ dataItem.processDate  }}
          </ng-template>
          </kendo-grid-column>
          <kendo-grid-column
            media="(min-width: 680px)"
            field="timeHour"
            title="Tempo decorrido"
            [width]="100"
          >
          <ng-template kendoGridCellTemplate let-dataItem>
            <span>{{ dataItem.timeHour }} Horas {{dataItem.timeMinute}} minutos</span>
          </ng-template>
          </kendo-grid-column>


        </kendo-grid>
      </div>
    </div>
  </div>
</div>
