<div class="row">
  <div class="page-wrapper chiller-theme toggled">
    
    <main class="page-content">
      <div class="container justify-content-md-center">

        <h2 style="text-align: center;">Estoque - Itens Convicto</h2>
        <div class="row" style="justify-content: center;">
          <div class="col-md-6">
            <input type="text" style="text-align: center;" ng-model="procurar" class="form-control" placeholder="Digite sua busca">
          </div>
          <div style="display: flex;margin-top: 10px;">
            <div style="margin-right: 10px;"><a href="#/group/edit/{{ grupo }}" role="button" class="btn btn-info borda-bt">Buscar</a></div>
            <div><a style="width: 76px;" href="#/codigodebarras" role="button" class="btn btn-info borda-bt">Voltar</a></div>
          </div>
          <div class="col-md-12">
            <form method="POST" class="mt-3" action="/split/public/seller/partials/items/processa.php"
          enctype="multipart/form-data">
          

        </form>
          </div>
        </div> 

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

        <div class="row form-login" style="justify-content: center;text-align: center;" ng-init="inicio()">
          <div>
          <div class="col-md-3">
            <div class="card border-dark mb-3" style="width: 12rem;">
              <a href="#/items" class="card-link">
                <div class="card-header text-white bg-dark">Total: {{ all }}</div>
              </a>
            </div>
          </div>

          <div class="col-md-3">
            <div class="card border-success mb-3" style="width: 12rem;">
              <a href="#/items/positive" class="card-link">
                <div class="card-header text-white bg-success">Positivos: {{ positive }}</div>
              </a>
            </div>
          </div>

          <div class="col-md-3">
            <div class="card border-primary mb-3" style="width: 12rem;">
              <a href="#/items/outOfStock" class="card-link">
                <div class="card-header text-white bg-primary">Sem Estoque: {{ nullStock }}</div>
              </a>
            </div>
          </div>

          <div class="col-md-3">
            <div class="card border-danger mb-3" style="width: 12rem;">
              <a href="#/items/negative" class="card-link">
                <div class="card-header text-white bg-danger">Negativos: {{ negative }}</div>
              </a>
            </div>
          </div>
        </div>
        </div>

        <div class="row form-login">

        <div class="table-responsive">
          <table class="table">
            <thead>
              <tr>
                <th scope="col">#</th>
                <th scope="col">Título do Produto</th>
                <th scope="col">Tamanho</th>
                <th scope="col">Bhan</th>
                <th scope="col">Grupo</th>
                <th scope="col">Quantidade</th>
                <th scope="col"></th>
              </tr>
            </thead>
            <tbody dir-paginate="i in items|filter:procurar|itemsPerPage:20 ">
              <tr>
                <th scope="row">{{i.ean}}</th>
                <td>{{i.nameProduct}}</td>
                <td>{{i.sizeProduct}}</td>
                <td>{{i.skuBhan}}</td>
                <td>{{i.codGroup}}</td>
                <td class="p-3 mb-2 text-white text-center" ng-class="{'bg-success':i.quantidade > 0, 'bg-danger':i.quantidade < 0, 'bg-primary':i.quantidade==0 || 'null'}">{{i.quantidade}}</td>
                <td><a href="#/items/edit/{{i.ean}}" class="btn btn-primary">Alterar Estoque</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>
