{% extends "base.html" %}

{% load staticfiles %}

{% block title %}CCYTET{% endblock %}

{% block extrahead %}
    <meta charset="utf-8">

    <!-- Bootstrap Stylesheet -->
    <link rel="stylesheet" href="{% static "bootstrap/css/bootstrap.min.css" %}" media="screen">
    <!-- Theme Stylesheet -->
    <link rel="stylesheet" href="{% static "assets/css/dandelion.theme.css" %}" media="screen">
    <!-- Icon Stylesheet -->
    <link rel="stylesheet" href="{% static "assets/css/fonts/glyphicons/style.css" %}" media="screen">
    <!--  Main Stylesheet -->
    <link rel="stylesheet" href="{% static "assets/css/dandelion.css" %}" media="screen">
    <!-- Demo Stylesheet -->
    <link rel="stylesheet" href="{% static "assets/css/demo.css" %}" media="screen">

    <!-- Login Stylesheet -->
    <link rel="stylesheet" href="{% static "assets/css/form.css" %}" media="screen">
    <link rel="stylesheet" href="{% static "assets/css/login.css" %}" media="screen">

    <link rel="stylesheet" href="{% static "plugins/zocial/zocial.css" %}" media="screen">

{% endblock %}

{% block wrapper %}
    <div id="dgtic-wrapper">
        {% block header %}
            <!-- Header -->
            <div id="dgtic-header">

                <div id="dgtic-header-top">

                    <!-- Container -->
                    <div class="dgtic-container clearfix">

                        {% include  'imagen_encabezado.html' %}

                        {% block headertoolbar %}

                        {% endblock %}

                    </div>
                </div>

                <div id="dgtic-header-bottom">
                    <!-- Container -->
                    <div class="dgtic-container clearfix">

                        <!--<div id="dgtic-search">
                            <form>
                                <input type="text" class="search-query" placeholder="Search...">
                            </form>
                        </div>-->

                        <!-- Breadcrumbs -->
                        <div id="dgtic-breadcrumb">
                            <ul>
                                {% block breadcrumbs %}
                                    <li class="{%if request.path == '/' %}active{%endif%}"><a href="/"><i class="icol-house"></i> Inicio</a></li>
                                    <!--<li><a target="_blank" href="{% static "manual/tut_con_gen_folios.pdf" %}"><i class="icol-doc-pdf"></i> Descargar Manual</a></li>-->
                                {% endblock %}
                            </ul>
                        </div>

                    </div>
                </div>
            </div>
        {% endblock %}


        <div id="dgtic-content"><!-- INICIO Content -->
            <div class="dgtic-container clearfix"><!-- INICIO Container -->
                <div id="dgtic-sidebar-separator"></div><!-- Sidebar Separator do not remove -->


                {% block sidebar %}
                    <div id="dgtic-sidebar"><!-- INICIO Sidebar -->
                        <!-- Navigation Toggle for < 480px -->
                        <div id="dgtic-sidebar-toggle"></div>

                        <div id="dgtic-main-nav" class="btn-container"><!-- INICIO Main Navigation -->

                            <ul>

                                <li class="{%if request.path == '/' %}active{%endif%}">
                                    <a href="/">
                                        <!-- Icon Container -->
                                        <span class="dgtic-nav-icon">
                                        <i class="icon-home"></i>
                                    </span>
                                        Inicio
                                    </a>
                                </li>

                                <li class="{%if request.path == '/snct/' %}active{%endif%}">
                                    <a href="/snct/">
                                        <!-- Icon Container -->
                                        <span class="dgtic-nav-icon">
                                        <i class="icon-calendar"></i>
                                    </span>
                                        ¿Qué es la SNCT?
                                    </a>
                                </li>
                                {#                            <li >#}
                                {#                                <a target="_blank" href="http://www.ccytet.gob.mx/Web/ccytet04/SemanaNacional.aspx">#}
                                {#                                    <!-- Icon Container -->#}
                                {#                                    <span class="dgtic-nav-icon">#}
                                {#                                        <i class="icon-book-open"></i>#}
                                {#                                    </span>#}
                                {#                                    Programa de la Sede Estatal#}
                                {#                                </a>#}
                                {#                            </li>#}
                                <li class="{%if request.path == '/convocatorias_/' %}active{%endif%}">
                                    <a href="/convocatorias_/">
                                        <!-- Icon Container -->
                                        <span class="dgtic-nav-icon">
                                        <i class="icon-file"></i>
                                    </span>
                                        Convocatorias
                                    </a>
                                </li>
                                <li class="{%if request.path == '/registro_institucion/' %}active{%endif%}" >
                                    <a href="/registro_institucion/">
                                        <!-- Icon Container -->
                                        <span class="dgtic-nav-icon">
                                        <i class="icon-justify"></i>
                                    </span>
                                        Registro institución por primera vez
                                    </a>
                                </li>

                                <li class="{%if request.path == '/login_/' %}active{%endif%}" >
                                    <a href="/login_/">
                                        <!-- Icon Container -->
                                        <span class="dgtic-nav-icon">
                                        <i class="icon-user"></i>
                                    </span>
                                        Iniciar sesión (Usuario ya registrado)
                                    </a>
                                </li>
                                <li class="{%if request.path == '/tutoriales/' %}active{%endif%}">
                                    <a href="/tutoriales/">
                                        <!-- Icon Container -->
                                        <span class="dgtic-nav-icon">
                                        <i class="icon-eye-open"></i>
                                    </span>
                                        Tutoriales
                                    </a>
                                </li>

                                <!--li class="" >
                                <a target="_blank" href="{% static "manual/Manual Parte 1 Sistema 22SNCyT.pdf" %}">
                                    <span class="dgtic-nav-icon">
                                        <i class="icon-circle-info"></i>
                                    </span>
                                    Manual del Usuario Parte 1
                                </a>
                            </li>

                            <li class="" >
                                <a target="_blank" href="{% static "manual/Manual Parte 2 Sistema 22SNCyT.pdf" %}">
                                    <span class="dgtic-nav-icon">
                                        <i class="icon-circle-info"></i>
                                    </span>
                                    Manual del Usuario Parte 2
                                </a>
                            </li-->
                                {##}
                                {##}
                                {#                            <li class="" >#}
                                {#                                <a href="/videos/">#}
                                {#                                    <!-- Icon Container -->#}
                                {#                                    <span class="dgtic-nav-icon">#}
                                {#                                        <i class="icon-circle-info"></i>#}
                                {#                                    </span>#}
                                {#                                    Videos#}
                                {#                                </a>#}
                                {#                            </li>#}

                                <li class="{% if request.path == '/dudas/' %}active{% endif %}" >
                                    <a  href="/dudas/">
                                        <!-- Icon Container -->
                                        <span class="dgtic-nav-icon">
                                        <i class="icon-envelope"></i>
                                    </span>
                                        ¿Dudas? Contáctanos
                                    </a>
                                </li>


                                <li class="{% if request.path == '/frecuentes/'%}active{% endif %}" >
                                    <a  href="/frecuentes/">
                                        <!-- Icon Container -->
                                        <span class="dgtic-nav-icon">
                                        <i class="icon-circle-question-mark"></i>
                                    </span>
                                        Preguntas frecuentes
                                    </a>
                                </li>

                            </ul>

                        </div><!-- FIN Main Navigation -->
                    </div><!-- FIN Sidebar -->
                {% endblock %}

                <div id="dgtic-content-wrap" class="clearfix"><!-- INICIO Main Content Wrapper -->

                    <div id="dgtic-content-area"><!-- INICIO Content Area -->
                        <div class="row-fluid">

                            {% block maincontent %}

                                {# TODO. Inicia SECCION DE LA DERECHA #}
                                <div class="row-fluid">

                                    {# TODO. Publicacion Inicio #}
                                    <div class="span6">
                                        <div id="dgtic-ex-accordion-plain" class="ui-accordion">
                                            {% for pub in publicacion %}
                                                <h3 class="ui-accordion-header">
                                                    <a href="#">
                                                        <div class="dgtic-panel-header">
                                                        <span class="dgtic-panel-title">
                                                            <i class="icon-brightness-reduce"></i>
                                                                <b>{{ pub.titulo }}</b>
                                                        </span>
                                                        </div>
                                                    </a>
                                                </h3>
                                                <div class="ui-accordion-content">
                                                    <p>
                                                    <div style="text-align:justify" class="entry">
                                                        <img src="{{ MEDIA_URL }}{{pub.logo}}" alt="" width="100"  height="160" class="left" style="float:left;"/>
                                                        {{ pub.cuerpo|linebreaksbr }}
                                                    </div>

                                                    {% if pub.hipervinculo_video %}
                                                        <div class="dgtic-panel-content dgtic-form-container">
                                                            <div align="center" class="dgtic-panel-content with-padding">
                                                                <h3>{{ pub.descripcion_hipervinculo }}</h3>
                                                                <div class="embed-responsive embed-responsive-16by9">
                                                                    <iframe class="embed-responsive-item" src="{{ pub.hipervinculo_video }}" frameborder="0" allowfullscreen></iframe>
                                                                </div>
                                                                <hr>
                                                            </div>
                                                        </div>
                                                    {% endif %}

                                                    </p>
                                                </div>
                                            {% endfor %}
                                        </div>

                                        {# TODO. SECCION DE ABAJO #}
                                        <div class="row-fluid">
                                            {# TODO. Inicia Banner #}
                                            {% if banner %}
                                                <div class="span12">
                                                    <div class="dgtic-panel">
                                                        <div class="dgtic-panel-header">
                                                            <span class="dgtic-panel-title">

                                                            </span>
                                                        </div>
                                                        <div class="dgtic-panel-content dgtic-form-container">
                                                            {% for banner in banner %}
                                                                <p style="text-align:center;">
                                                                    <img src="{{ MEDIA_URL }}{{ banner.imagen }}" width="458" height="252" align="middle">
                                                                </p>
                                                            {% endfor %}
                                                        </div>
                                                    </div>
                                                </div>
                                            {% endif %}
                                            {# TODO. FIN Banner #}
                                        </div>
                                        {# TODO. FINALIZA SECCION DE ABAJO #}

                                    </div>
                                    {# TODO. Finaliza Publicacion Inicio #}

                                    {# TODO. Inicia sitios de interes #}
                                    {% if enlaces %}
                                        <div class="span6">
                                            <div class="dgtic-panel">
                                                <div class="dgtic-panel-header">
                                            <span class="dgtic-panel-title">
                                                <i class="icon-user"></i> Sitios de Interés
                                            </span>
                                                </div>
                                                <div class="dgtic-panel-content">
                                                    <ul>
                                                        {% for enlace in enlaces %}
                                                            <li>
                                                                <a href="{{ enlace.hipervinculo }}">
                                                                    <img src="{{ MEDIA_URL }}{{ enlace.imagen }}" alt="Imagen enlace" width="70px">
                                                                    {{ enlace.nombre }}
                                                                </a>
                                                            </li>
                                                        {% endfor %}
                                                    </ul>
                                                </div>

                                            </div>
                                        </div>
                                    {% endif %}
                                    {# TODO. Finaliza sitios de interes #}


                                    {# TODO. Inicia Panel de Descargas #}
                                    {% if lista_graficos %}
                                        <div class="span6">
                                            <div class="dgtic-panel collapsible">
                                                <div class="dgtic-panel-header">
                                            <span class="dgtic-panel-title">
                                                <i class="icol-photos"></i>
                                                Descargas
                                            </span>
                                                </div>

                                                <div>
                                                    <div class="dgtic-panel-content with-padding">
                                                        <ul id="enlaces">
                                                            {% for l_g in lista_graficos %}
                                                                <li>
                                                                    <a target="_blank" href="{{ l_g.hipervinculo }}">
                                                                        {{ l_g.descripcion }}
                                                                    </a>
                                                                </li>
                                                            {% endfor %}
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    {% endif %}
                                    {# TODO. Finaliza panel Graficos #}

                                    {# TODO. Inicia panel Programa #}
                                    {% if prog %}
                                        <div class="span6">
                                            <div class="dgtic-panel collapsible">
                                                <div class="dgtic-panel-header">
                                                    <span class="dgtic-panel-title">
                                                        <i class="icol-desktop"></i>
                                                        PROGRAMAS
                                                    </span>

                                                </div>
                                                <div class="dgtic-panel-content with-padding">
                                                    <ul id="enlaces">
                                                        {% for p in prog %}
                                                            <li>
                                                                <a target="_blank" href="{{ MEDIA_URL }}{{ p.documento_pdf }}">
                                                                    {{ p.titulo }}
                                                                </a>
                                                            </li>
                                                        {% endfor %}
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    {% endif %}
                                    {# TODO. Finaliza panel Programa #}

                                </div>
                                {# TODO. FINALIZA SECCION DE LA DERECHA #}



                            {% endblock %}
                        </div>
                    </div><!-- FIN Content Area -->
                </div><!-- FIN Main Content Wrapper -->



            </div><!-- FIN Container -->


        </div><!-- FIN Content -->

        {% block footer %}
            <br><br><br><br><br>
            <!-- Footer -->
            <div id="dgtic-footer">
                <div class="dgtic-container clearfix">
                    <p>Derechos Reservados &copy; Direccion General de Tecnologías de la Información y la Comunicación.</p>
                    <a href="#">
                        <img src="{% static "assets/images/logo-dgtic.png" %}" id="logo-size">
                    </a>
                </div>
            </div>
        {% endblock %}

    </div>
{% endblock %}



{% block extralibs %}
    <script src="{% static "assets/js/libs/jquery.placeholder.min.js" %}"></script>
    <script src="{% static "plugins/validate/jquery.validate.min.js" %}"></script>

    <!-- JS Login -->
    <script src="{% static "assets/js/core/dandelion.login.js" %}"></script>

    <script src="{% static "assets/js/libs/jquery-1.8.3.min.js"%}"></script>
    <script src="{% static "assets/js/libs/jquery.placeholder.min.js" %}"></script>
    <script src="{% static "assets/js/libs/jquery.mousewheel.min.js" %}"></script>

    <!-- JS Bootstrap -->
    <script src="{% static "bootstrap/js/bootstrap.min.js" %}"></script>

    <!-- jQuery-UI JavaScript Files -->
    <script src="{% static "assets/jui/js/jquery-ui-1.9.2.min.js"%}"></script>
    <script src="{% static "assets/jui/jquery.ui.timepicker.min.js" %}"></script>
    <script src="{% static "assets/jui/jquery.ui.touch-punch.min.js" %}"></script>
    <link rel="stylesheet" type="text/css" href="{% static "assets/jui/css/jquery.ui.all.css" %}" media="screen">

    <!-- JS Plugins -->

    <!-- Validation Plugin -->
    <script src="{% static "plugins/validate/jquery.validate.min.js" %}"></script>

    <!-- jGrowl Plugin -->
    <script src="{% static "plugins/jgrowl/jquery.jgrowl.min.js" %}"></script>
    <link rel="stylesheet" href="{% static "plugins/jgrowl/jquery.jgrowl.css" %}" media="screen">

    <!-- JS Demo -->
    <script src="{% static "assets/js/demo/demo.ui.js" %}"></script>

    <!-- JS Template -->
    <script src="{% static "assets/js/core/dandelion.core.js" %}"></script>

    <!-- JS Customizer -->
    <script src="{% static "assets/js/core/dandelion.customizer.js" %}"></script>

{% endblock %}