{% extends "Base.html" %}

{% block content %}
<main class="conteiner">
    <div class="row">
        <div class="col-md-10 offset-md-1 mt-4">
            <form action="/inventario/" method="POST">
                    <div class="card-header">
                      <h3 class="text-center">Inventario</h3>
                    </div>
                    <div class="table-responsive">
                        <table class="table mt-3">
                            <thead class="table-dark">
                                <tr>
                                    <th scope="col">#</th>
                                    <th scope="col">Articulo</th>
                                    <th scope="col">Descripcion de articulo</th>
                                    <th scope="col">Bodega</th>
                                    <th scope="col">Cantidad</th>
                                    <th scope="col">Precio</th>
                                </tr>
                            </thead>
                            <tbody>
                            {% for inventario in persona %}
                                <tr>
                                    <th scope="row">{{ inventario.id }}</th>
                                    <td> {{ inventario.articulo.nombre_articulo }} {{inventario.articulo.medida}} </td>
                                    <td> {{ inventario.articulo.descripcion }} </td>
                                    <td> {{ inventario.bodega.nombre_bodega }} </td>
                                    <td> {{ inventario.cantidad }} </td>
                                    <td> {{ inventario.precio }} </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                  </table>
                </div>
            </form>
        </div>
    </div>
    <div class="fixed-bottom col-12 mc-3">
        <di class="gap-2 d-md-flex justify-content-md-end mb-3">
            <div class="btn-group dropup">
                <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                    &#128194;
                </button>
                <ul class="dropdown-menu dropdown-menu-dark">
                  <!-- Dropdown menu links -->
                  <li><a class="dropdown-item" href="{% url 'generar_reporte_pdf' %}" >Descargar PDF</a></li>
                  <li><a class="dropdown-item" href="{% url 'generar_reporte_excel' %}" >Descargar Excel</a></li>
                  <li><a class="dropdown-item" href="{% url 'generar_reporte_csv' %}">Descargar CSV</a></li>
                  <li><a class="dropdown-item" href="{% url 'generar_grafico_chartjs' %}">Generar Grafico</a></li>
                </ul>
              </div>
            <br>
        </div>
    </div>
</main>

{% endblock  %}