<div class="row">
  <div class="page-wrapper chiller-theme toggled">
    <nav id="sidebar" class="sidebar-wrapper">
      <menu-admin name={{name}}></menu-admin>
      <link-exit></link-exit>
    </nav>

    <main class="page-content">
      <div class="container-fluid justify-content-md-center" ng-init="inicio()">

        <h2>Lista de Pedidos</h2>
        <input type="text" ng-model="procurar" class="form-control" placeholder="Digite sua busca">

        <div class="row form-login">
          <div class="col-md-2">
            <h5 class="align-middle text-center text-monospace">Filtros</h5>
          </div>

          <div class="col-md-3">
            <div class="card border-success mb-3" style="width: 12rem;">
              <a href="#/invoiced" class="card-link">
                <div class="card-header text-white bg-success text-center">Faturados</div>
              </a>
            </div>
          </div>

          <div class="col-md-3">
            <div class="card border-primary mb-3" style="width: 12rem;">
              <a href="#/ready" class="card-link">
                <div class="card-header text-white bg-primary text-center">Prontos para faturar</div>
              </a>
            </div>
          </div>

          <div class="col-md-3">
            <div class="card border-danger mb-3" style="width: 12rem;">
              <a href="#/canceled" class="card-link">
                <div class="card-header text-white bg-danger text-center">Cancelados</div>
              </a>
            </div>
          </div>

        </div>

        <p ng-show="mensagem.length" class="alert alert-info">{{mensagem}}</p>

        <div class="row form-login" ng-init="inicio()">

        <div class="col">
          <table class="table">
            <thead>
              <tr>
                <th scope="col">Data</th>
                <th scope="col">Pedido</th>
                <th scope="col">Cliente</th>
                <th scope="col">Status</th>
                <th scope="col">Valor</th>
                <th scope="col">Estoque</th>
                <th scope="col">Seller</th>
                <th scope="col"></th>
              </tr>
            </thead>
            <tbody dir-paginate="v in orders|filter:procurar|itemsPerPage:10">
              <tr>
                <!--<th scope="row">{{(v.creationDate).split("T")[0].split("-").reverse().join().replace(",","-").replace(",","-")}}</th>-->
                <th scope="row">{{ v.creationDate | date:'dd/MM/yyyy' }}</th>
                <td>{{v.orderId}}</td>
                <td>{{v.clientFirstName}} {{v.clientLastName}}</td>
                <td ng-class="{'text-success':v.status=='invoiced', 'text-danger':v.status=='canceled', 'text-secondary':v.status=='ready-for-handling'}">{{v.statusDescription}}</td>
                <td>{{(v.value / 100).toFixed(2).replace(".", ",")}}</td>
                <td></td>
                <td>{{ v.warehouseId }}</td>
                <td><a href="#/orders/{{v.orderId}}" class="btn btn-primary">Detalhes</a></td>
              </tr>
            </tbody>
          </table>
        </div>

      </div>
      <div class="row justify-content-md-center">

        <nav>
          <dir-pagination-controls max-size="5" boundary-links="false"></dir-pagination-controls>
        </nav>

      </div>

      </div>
    </main>

  </div>

</div>
