{% extends 'explicacion.situacional.html' %}
{% load staticfiles %}
{% block titulo %}_-=SAPIC-Caracterización Física=-_{% endblock titulo %}
{% block extracss %}
  <link rel="stylesheet" type="text/css" href="{% static "DataTables/media/css/jquery.dataTables.min.css" %}">
  <link rel="stylesheet" type="text/css" href="{% static "DataTables/extensions/Buttons/css/buttons.dataTables.min.css" %}">
  <link rel="stylesheet" type="text/css" href="{% static "DataTables/extensions/Select/css/select.dataTables.min.css" %}">
  <link rel="stylesheet" type="text/css" href="{% static "DataTables/extensions/Responsive/css/responsive.dataTables.min.css" %}">
{% endblock extracss %}
{% block extrajs %}
<!--<script type="text/javascript" src="{% static 'explicacion_situacional/explicacion_situacional_map.js' %}"></script>-->
    {{ form.media }}
    <script type="text/javascript" language="javascript" src="{% static "DataTables/media/js/jquery.dataTables.min.js" %}"></script>
    <script type="text/javascript" language="javascript" src="{% static "DataTables/extensions/Buttons/js/dataTables.buttons.min.js" %}"></script>
    <script type="text/javascript" language="javascript" src="{% static "DataTables/extensions/Buttons/js/buttons.print.min.js" %}"></script>
    <script type="text/javascript" language="javascript" src="{% static "DataTables/extensions/Buttons/js/buttons.jqueryui.js" %}"></script>
    <script type="text/javascript" language="javascript" src="{% static "DataTables/extensions/Buttons/js/buttons.html5.min.js" %}"></script>
    <script src="{% static 'js/funciones.js' %}"></script>
{% endblock extrajs %}
{% block contenido_principal %}
    <div class="col-xs-12">
        <div class="panel-sapic">
            <section class="content-header">
                <h2 class="text-center">Caracterización Física</h2>
                  <p class="text-center">
                      En este submódulo se registra información sobre la posición geográfica  y las condiciones físicas de la comunidad.
                  </p>
             <br>
             <center>
                <img  class="img-responsive" src="{% static 'media/img/caracterizacion_fisica.png' %}">
              </center><br><br>
            </section>
            <section class="content">
                <div class="col-lg-12 col-xs-12">
                  <!-- small box -->
                  <!--<div class="small-box bg-aqua">
                    <div class="inner">
                      <h3>Ubicación Geográfica y Mapa de la comunidad</h3>

                      <p align="justify">En este sub-módulo podrá registrar, consultar y modificar la ubicación geográfica de su comunidad.</p>
                    </div>
                    <div class="icon">
                      <i class="ion ion-map"></i>
                    </div>
                    <a href="#" class="small-box-footer">Ingresar<i class="fa fa-arrow-circle-right"></i></a>
                  </div>
                </div>-->
                {% if not 25 in consultas %}
                <div class="col-lg-12 col-xs-12">
                  <!-- small box -->
                  <div class="small-box bg-aqua">
                    <div class="inner">
                      <h3 title="Condición de suelos, vientos, aguas, viviendas y servicios públicos de mi comunidad">Condición de suelos, vientos, aguas,...</h3>

                      <p align="justify">En este sub-módulo podrá registrar, consultar y modificar las condiciones de su comunidad.</p>
                    </div>
                    <div class="icon">
                      <i class="ion ion-cloud"></i>
                    </div>
                    <a href="{% url 'explicacion:condicion_suelos' 25 %}" class="small-box-footer">Ingresar<i class="fa fa-arrow-circle-right"></i></a>
                  </div>
                </div>
                {% endif %}
            </section>
            {% if consultas %}
                <table id="tabla-participacion" class="display ">
                    <thead>
                        <tr>
                            <th class="fisica0">Pregunta</th>
                            <th class="fisica1">Respuesta</th>
                            <th class="fisica2">Consulta</th>
                        </tr>
                    </thead>
                    <tbody>
                      {% for respuesta in abierta %}
                        {% if not respuesta.es_justificacion %}
                          <tr>
                            <td>{{ respuesta.pregunta }}</td>
                            <td role="button" onclick="return abrir_modal('{% url 'explicacion:modificar_respuesta_' respuesta.pregunta.tipo_pregunta.pk respuesta.pk %}')">{{ respuesta.texto_respuesta }}</td>
                            <td>{{ respuesta.pregunta.consulta.nombre_consulta | cut:" de mi comunidad" | cut:"Calidad del servicio de " | cut:"Calidad de servicios de " | cut:"Calidad de servicios " | cut:"Calidad de los servicios asociados a " | cut:"en " | cut:"relacionados a " | title}}</td>
                          </tr>
                        {% endif %}
                     {% endfor %}
                    </tbody>
                </table>
            {% endif %}
        </div>
    </div>
    <div id="popup" class="modal fade" role="dialog"></div>
{% endblock contenido_principal %}