<div class="row">
  <div class="col-12">
    <app-heading></app-heading>
    <app-breadcrumb></app-breadcrumb>
    <div class="separator mb-5"></div>
  </div>
</div>
<div class="row">
  <div class="col-12">
    <h5 class="mb-4">{{'sortable.columns' | translate}}</h5>
    <div class="row icon-cards-row mb-4 sortable" [sortablejs]="itemsRow">
      <div class="col-md-3 col-lg-3 col-sm-4 col-6 mb-2">
        <a href="javascript:;" class="card">
          <div class="card-body text-center">
            <i class="iconsminds-clock"></i>
            <p class="card-text font-weight-semibold mb-0">{{'dashboards.pending-orders' | translate}}</p>
            <p class="lead text-center">14</p>
          </div>
        </a>
      </div>
      <div class="col-md-3 col-lg-3 col-sm-4 col-6 mb-2">
        <a href="javascript:;" class="card">
          <div class="card-body text-center">
            <i class="iconsminds-basket-coins"></i>
            <p class="card-text mb-0">{{'dashboards.completed-orders' | translate}}</p>
            <p class="lead text-center">32</p>
          </div>
        </a>
      </div>
      <div class="col-md-3 col-lg-3 col-sm-4 col-6 mb-2">
        <a href="javascript:;" class="card">
          <div class="card-body text-center">
            <i class="iconsminds-arrow-refresh"></i>
            <p class="card-text mb-0">{{'dashboards.refund-requests' | translate}}</p>
            <p class="lead text-center">74</p>
          </div>
        </a>
      </div>
      <div class="col-md-3 col-lg-3 col-sm-4 col-6 mb-2">
        <a href="javascript:;" class="card">
          <div class="card-body text-center">
            <i class="iconsminds-mail-read"></i>
            <p class="card-text mb-0">{{'dashboards.new-comments' | translate}}</p>
            <p class="lead text-center">25</p>
          </div>
        </a>
      </div>
    </div>

    <h5 class="mb-4">{{'sortable.basic' | translate}}</h5>
    <div class="card mb-4">
      <div class="card-body">
        <ul class="sortable list-unstyled mb-0" [sortablejs]="itemsBasic">
          <li>
            <p>1. Angel Cake </p>
          </li>
          <li>
            <p>2. Bibingka </p>
          </li>
          <li>
            <p>3. Cremeschnitte </p>
          </li>
          <li>
            <p>4. Faworki</p>
          </li>
        </ul>
      </div>
    </div>

    <h5 class="mb-4">{{'sortable.handles' | translate}}</h5>
    <div class="card mb-4">
      <div class="card-body">
        <ul class="sortable list-unstyled" [sortablejs]="itemsHandles" [sortablejsOptions]="{ handle: '.handle' }">
          <li>
            <p>
              <span class="badge badge-pill badge-secondary handle">
                <i class="simple-icon-cursor-move"></i>
              </span>
              <span>Angel Cake</span>
            </p>
          </li>
          <li>
            <p>
              <span class="badge badge-pill badge-secondary handle">
                <i class="simple-icon-cursor-move"></i>
              </span> Bibingka</p>
          </li>
          <li>
            <p>
              <span class="badge badge-pill badge-secondary handle">
                <i class="simple-icon-cursor-move"></i>
              </span> Cremeschnitte</p>
          </li>
          <li>
            <p>
              <span class="badge badge-pill badge-secondary handle">
                <i class="simple-icon-cursor-move"></i>
              </span> Faworki</p>
          </li>
        </ul>
      </div>
    </div>

    <h5 class="mb-4">{{'sortable.event' | translate}}</h5>
    <div class="card mb-4">
      <div class="card-body">
        <ul class="sortable list-unstyled" [sortablejs]="itemsUpdates" [sortablejsOptions]="optionsUpdates">
          <li>
            <p>1 </p>
          </li>
          <li>
            <p>2 </p>
          </li>
          <li>
            <p>3 </p>
          </li>
          <li>
            <p>4 </p>
          </li>
        </ul>
        <br>
        <pre class="border p-2 rounded" *ngFor="let update of updates">{{update}}</pre>

      </div>
    </div>

  </div>
</div>
