{% extends 'base.html' %} 
{% block titulo %}Principal{% endblock  %}
{% block seccion %} 

{% block titulodeseccion %} Panel de Inventario {% endblock%} 
{% block etiqueta1 %}Inicio{% endblock %}
{% block etiqueta2 %} Información{% endblock %} 

{% endblock %} 

{% block contenido %}
 <!-- Small boxes (Stat box) -->
        <div class="row">
          <div class="col-lg-4 col-6">
            <!-- small box -->
            <div class="small-box bg-info">
              <div class="inner">
                <h3>{{ articulo|length }}</h3>
                <p>ARTICULOS</p>
              </div>
              <div class="icon">
                <i class="ion ion-bag"></i>
              </div>
              <a href="#" class="small-box-footer">Más información <i class="fas fa-arrow-circle-right"></i></a>
            </div>
          </div>
          <!-- ./col -->
          <div class="col-lg-4 col-6">
            <!-- small box -->
            <div class="small-box bg-success">
              <div class="inner">
                <h3>{{ unidades }}<sup style="font-size: 20px"></sup></h3>
                <p>UNIDADES</p>
              </div>
              <div class="icon">
                <i class="ion ion-stats-bars"></i>
              </div>
              <a href="{% url 'unidad' %}" class="small-box-footer">Más información <i class="fas fa-arrow-circle-right"></i></a>
            </div>
          </div>
          <div class="col-lg-4 col-6">
            <div class="small-box bg-warning">
              <div class="inner">
                <h3>{{ usuarios }}</h3>
                <p>USUARIOS</p>
              </div>
              <div class="icon">
                <i class="ion ion-person-add"></i>
              </div>
              <a href="#" class="small-box-footer">Más información <i class="fas fa-arrow-circle-right"></i></a>
            </div>
          </div>
          <div class="col-lg-3 col-6">
          </div>
        </div>
    

<div class="row">
  <div class="col-lg-12">
    <div class="card card-dark card-outline">
      <div class="card-header">
        <div class="d-flex justify-content-between">
         <h3></h3>
          <!-- <a href="{% url 'envio_articulo' %}" class="btn btn-warning font-weight-bold"><i class="fas fa-solid fa-paper-plane"></i>  Envio</a> -->
          <a href="{% url 'crear_articulo' %}" class="btn btn-dark font-weight-bold"><i class="fas fa-solid fa-plus"></i> Agregar</a>
        </div>
      </div>
      <div class="card-body">
        <div class="table-responsive">
          <table id="example1" class="table align-items-center table-flush">
            <thead class="thead-light">
              <tr>
                <th scope="col" class="text-center">N°</th>
                <th scope="col" class="text-center">Fecha Entrada</th>
                <th scope="col" class="text-center">Carpas</th>
                <th scope="col" class="text-center">Descripcion</th>
                <th scope="col" class="text-center">Cantidad</th>
                <th scope="col" class="text-center">Acciones</th>
              </tr>
            </thead>
            <tbody>
              {% for articulo in articulo %}
              <tr class="">
                <td class="text-center">{{forloop.counter}}</td>
                <td class="text-center">{{articulo.fecha|date:"d-m-y"}}</td>
                <td class="text-center">{{articulo.articulo}}</td>
                <td class="text-center">{{articulo.descripcion}}</td>
                <td class="text-center">{{articulo.cantidad}}</td>
                <td class="text-center">
                <a href="{% url 'editar' articulo.id %}" class="btn btn-info"><i class="fas fa-solid fa-pen"></i></a> |
                <a href="{% url 'eliminar' articulo.id %}" class="btn btn-danger"><i class="fas fa-solid fa-trash"></i></a>
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}