{% extends "base.html" %}

{% block wrapper %}
    <div class="wrapper">
        <!-- Preloader -->
        <div class="preloader flex-column justify-content-center align-items-center">
            <img class="animation__shake" src="/assets/img/AdminLTELogo.png" alt="AdminLTELogo" height="60" width="60">
        </div>
        
        {{ include('section/navbar.html') }}

        {{ include('section/sidebar.html') }}

        {% block content %}
            <div class="content-wrapper">
                <div class="content-header">
                    <div class="container-fluid">
                        <div class="row mb-2">
                            <div class="col-sm-6">
                                <h1 class="m-0">Dashboard</h1>
                            </div>
                            <div class="col-sm-6">
                                <ol class="breadcrumb float-sm-right">
                                    <li class="breadcrumb-item"><a href="#">Inicio</a></li>
                                    <li class="breadcrumb-item active">Dashboard</li>
                                </ol>
                            </div>
                        </div>

                        <!-- Main content -->
                        <div class="content">
                            <div id="contenedor" class="container-fluid">
                                <div class="row">
                                    <div class="col-lg-4 col-12">
                                        <div class="small-box bg-info">
                                            <div class="inner">
                                                <h3 id="qtyProduct">{{ stats.qtyProducts }}</h3>
                                                <p>Productos</p>
                                            </div>
                                            <div class="icon">
                                                <i class="ion ion-bag"></i>
                                            </div>
                                            <a href="/productos" class="small-box-footer">M&aacute;s Informaci&oacute;n <i class="fas fa-arrow-circle-right"></i></a>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-12">
                                        <div class="small-box bg-success">
                                            <div class="inner">
                                                <h3 id="qtyPicture">{{ stats.qtyPictures }}</h3>
                                                <p>Imagenes</p>
                                            </div>
                                            <div class="icon">
                                                <i class="ion ion-bag"></i>
                                            </div>
                                            <a href="/galeria" class="small-box-footer">M&aacute;s Informaci&oacute;n <i class="fas fa-arrow-circle-right"></i></a>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-12">
                                        <div class="small-box bg-danger">
                                            <div class="inner">
                                                <h3 id="qtyBrand">{{ stats.qtyBrands }}</h3>
                                                <p>Marcas</p>
                                            </div>
                                            <div class="icon">
                                                <i class="ion ion-bag"></i>
                                            </div>
                                            <a href="/galeria" class="small-box-footer">M&aacute;s Informaci&oacute;n <i class="fas fa-arrow-circle-right"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% endblock %}

        {{ include('section/sidecontrol.html') }}
        
        {{ include('section/footer.html') }}
    </div>
{% endblock %}

{% block javascript %}
    {{ parent() }}
{% endblock %}

{% block script %}
    <script>App.Jaxon.Dashboard.init();</script>
{% endblock %}