{% load i18n %}
{% load static from staticfiles %}
<div class="col-md-12">
    <div id="carousel-menu" data-interval="4000" class="carousel slide" data-ride="carousel">
        <!-- Indicadores -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-menu" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-menu" data-slide-to="1"></li>
            <li data-target="#carousel-menu" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner carousel-menu-gral">
            <div class="item active">
                <img src="http://placehold.it/1580x200" class='img-responsive'>
                <div class="carousel-caption">
                    <h2>Title</h2>
                    <p>Description</p>
                </div>
            </div>
            <div class="item">
                <img src="http://placehold.it/1580x200" class='img-responsive'>
                <div class="carousel-caption">
                    <h2>Title</h2>
                    <p>Description</p>
                </div>
            </div>
            <div class="item">
                <img src="http://placehold.it/1580x200" class='img-responsive'>
                <div class="carousel-caption">
                    <h2>Title</h2>
                    <p>Description</p>
                </div>
            </div>
        </div>
        <a class="left carousel-control" href="#carousel-menu" data-slide="prev">
            <i class="icon-prev fa fa-angle-left"></i>
        </a>
        <a class="right carousel-control" href="#carousel-menu" data-slide="next">
            <i class="icon-next fa fa-angle-right"></i>
        </a>
    </div>
</div>
<div class="col-md-12">
    <h2>{% trans 'Sección - Información' %}</h2>
    <div class="row row-modulos">
        <div class="col-md-4">
            <div class="small-box modulo-economico opt-mnu-gral">
                <div class="inner">
                    <div class="row">
                        <div class="col-md-9 col-sm-9 col-xs-9">
                            <h3>{% trans 'ECONOMIA' %}</h3>
                        </div>
                        <div class="col-md-3 col-sm-3 col-xs-3 text-right">
                            <h3><i class="ion-stats-bars"></i></h3>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 col-sm-4 col-xs-4">
                            <img src="{% static 'img/modulo_economico.png' %}" alt="{% trans 'Módulo Económico' %}" class="img-responsive">
                        </div>
                        <div class="col-md-8 col-sm-8 col-xs-8">
                            <p>{% trans 'Real' %}</p>
                            <p class="text-right">{% trans 'Monetario - Financiero' %}</p>
                            <p>{% trans 'Externo' %}</p>
                            <p class="text-center">{% trans 'Fiscal' %}</p>
                        </div>
                    </div>
                </div>
                <a href="#opt-economico" class="small-box-footer" onclick="show_hide('opt-economico')"><i class="fa fa-sort-desc"></i></a>
            </div>
            <div class="smal-box modulo-economico" id="opt-economico" style="display:none">
                <div class="inner">
                    <div class="row">
                        <div class="col-md-12">
                            <a href="{% url 'economico-cargar-datos' %}">{% trans 'Cargar Datos' %}</a>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <a href="{% url 'economico-consultar-datos' %}">{% trans 'Consultar Datos' %}</a>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <a href="#">{% trans 'Indicadores' %}</a>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <a href="#">{% trans 'Reportes' %}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-4" {# style="display:none" #}>
            <div class="small-box modulo-productivo opt-mnu-gral">
                <div class="inner">
                    <div class="row">
                        <div class="col-md-9 col-sm-9 col-xs-9">
                            <h3>{% trans 'PRODUCTIVO' %}</h3>
                        </div>
                        <div class="col-md-3 col-sm-3 col-xs-3 text-right">
                            <h3><i class="fa fa-cogs"></i></h3>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 col-sm-4 col-xs-4">
                            <img src="{% static 'img/modulo_productivo.png' %}" alt="{% trans 'Módulo Productivo' %}" class="img-responsive">
                        </div>
                        <div class="col-md-8 col-sm-8 col-xs-8">
                            <p class="text-center">{% trans 'Actividad Económica' %}</p>
                            <p class="text-right">{% trans 'Producción' %}</p>
                            <p>{% trans 'Requerimiento de Insumos' %}</p>
                        </div>
                    </div>
                </div>
                <a href="#opt-productivo" class="small-box-footer" onclick="show_hide('opt-productivo')"><i class="fa fa-sort-desc"></i></a>
            </div>
            <div class="smal-box modulo-productivo" id="opt-productivo" style="display:none">
                <div class="inner">
                    <div class="row">
                        <div class="col-md-12">
                            <a href="{% url 'productivo-consultar-datos' %}">{% trans 'Consultar Datos' %}</a>
                        </div>
                    </div>
                    <!--<div class="row">
                        <div class="col-md-12">
                            <a href="#">{% trans 'Indicadores' %}</a>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <a href="#">{% trans 'Reportes' %}</a>
                        </div>
                    </div>-->
                </div>
            </div>
        </div>
        <div class="col-md-4" {# style="display:none" #}>
            <div class="small-box modulo-social opt-mnu-gral">
                <div class="inner">
                    <div class="row">
                        <div class="col-md-9 col-sm-9 col-xs-9">
                            <h3>{% trans 'SOCIAL' %}</h3>
                        </div>
                        <div class="col-md-3 col-sm-3 col-xs-3 text-right">
                            <h3>
                                <i class="fa fa-pencil-square-o"></i>
                            </h3>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 col-sm-4 col-xs-4">
                            <img src="{% static 'img/modulo_social.png' %}" alt="{% trans 'Módulo Social' %}" class="img-responsive">
                        </div>
                        <div class="col-md-8 col-sm-8 col-xs-8">
                            <img src="{% static 'img/modulo_social_2.png' %}" alt="{% trans 'Módulo Social' %}"
                                     class="img-responsive pull-right social-image">
                            <p>{% trans 'Educación' %}</p>
                            <p class="text-center">{% trans 'Salud' %}</p>
                            <p class="text-right">{% trans 'Empleo' %}</p>
                            <p class="text-center">{% trans 'Demografía' %}</p>
                        </div>
                    </div>
                </div>
                <a href="#opt-social" class="small-box-footer" onclick="show_hide('opt-social')"><i class="fa fa-sort-desc"></i></a>
            </div>
            <div class="smal-box modulo-social" id="opt-social" style="display:none">
                <div class="inner">
                    <div class="row">
                        <div class="col-md-12">
                            <a href="#">{% trans 'Cargar Datos' %}</a>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <a href="#">{% trans 'Consultar Datos' %}</a>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <a href="#">{% trans 'Indicadores' %}</a>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <a href="#">{% trans 'Reportes' %}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>