<!doctype html>
<html lang="en">
  <head>
    {% load static %}
    {% load custom_filters %}  
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">    
        
    <link rel="stylesheet" href="{% static 'css/font-awesome.css' %}">    
     
    <title>
        Estudio Socioeconómico
    </title>    
    <style type="text/css">
        @page {
            size: A4;
            /*size: landscape;*/
            margin: 0.5cm;            
            margin-top: 1cm;    
            margin-bottom: 2cm;    
            @bottom-right{                
                margin-bottom: 0cm;     
                content: "Pagina " counter(page) " de " counter(pages);
            }
        }
    </style>    
  </head>

  <body>
    <div class="text-center">
      <img class="img-fluid mx-auto" style="height: 10rem;" src="{% static 'images/LogoCozcyt.png' %}" alt="Logo" >  
      <h2 class="m-0 mb-5">Formato para estudio socioeconómico</h2>
    </div>    


    {% for seccion in preguntasEstudio %}
        {% if seccion.tipo == 'agregacion' %}
        <div class="cont-agregacion" id="agregacion-{{ seccion.id }}">
        {% endif %}
        <div class="cont-seccion container border border-2 rounded-2 p-0 mb-5 borde-pagina-principal ">
            <h3 class="m-3 mb-3">{{ seccion.nombre }}</h3>                 
                            
                {% if seccion.tipo != 'agregacion' %} 
                <div class="mb-1 mx-1 border-2 border-top border-dark">
                    <div class="row row-col row-elementos p-0 mx-0 border-2 border-bottom border-start border-dark">                   
                        {% for elemento in seccion.elemento_set.all %}
                            {% if elemento.tipo == 'separador' %}
                                <div class="col cont-elem p-0 rounded rounded-3 border-2 border-end border-dark" > 
                                    <div style="margin: 0.3px; " class="col p-1 border-2 border-dark text-center fondo-gris-3 font-md ">
                                        {{ elemento.nombre }}                                
                                    </div>                         
                                </div>
                            {% else %}
                                {% with valoresRespuesta|hashD:elemento.id as respuesta %}
                                <div class="col m-0 cont-elem rounded rounded-3 border-2 border-end border-dark " >
                                    <div style="margin: 0.3px; " class="row text-center p-2 border-2 border-bottom border-dark text-center fondo-gris-2">
                                        <div class="col border-2 border-dark text-center ">
                                            {{ elemento.nombre }}                                
                                        </div>                                    
                                    </div>
                                    <div class="row text-center py-2 border-2 text-center">
                                        <div class="col p-1 text-center mx-auto">
                                            {% if respuesta|is_list %}
                                                <div class="row row-cols-auto">
                                                    {% for opcion in respuesta|slice:"1:" %}                                                    
                                                        <div class="col mx-auto">
                                                            <div class="mx-1">
                                                                {% if opcion|is_list %}
                                                                    <i class="{{respuesta.0.1}} m-0"></i>
                                                                    {% for str in opcion %}
                                                                        {{ str }}
                                                                    {% endfor %}
                                                                {% else %}
                                                                    <i class="{{respuesta.0.0}} m-0"></i>
                                                                    {{ opcion }}
                                                                {% endif %}
                                                            </div>
                                                        </div>
                                                    {% endfor %}
                                                </div>
                                            {% else %}
                                                {{ respuesta }}
                                            {% endif %}
                                        </div>                                    
                                    </div>                                        
                                </div>
    
                                {% endwith %}                            
                            {% endif %} 
    
                            
                            
                            {% with c=seccion.elemento_set.all|hashD:forloop.counter %}
                            {% with cb=elemento %}                                                  
                                {% if c.row != cb.row and c is not None %}                                               
                                    </div>
                                    <div class="row row-col row-elementos p-0 mx-0 border-2 border-bottom border-start border-dark">                   
                                {% endif %}
                            {% endwith %}
                            {% endwith %}                                               
                        {% endfor %}      
                    
                    </div>
                </div>
                
                {% endif %}
            
        {% if seccion.tipo == 'agregacion' %}
            {% with registrosA|hashD:seccion.id as registros %}                                
                <h5 class="mx-3 mt-0 mb-2">Registros</h5>
                <div class="p-0 " style="margin: 0.3px;">
                    <table class="custom-table-se">                                     
                        <thead >
                            <tr>
                                {% for elemento in seccion.elemento_set.all %}                                   
                                <th class="font-xs" title="{{elemento.nombre}}"> {{elemento.nombre}}</th>
                                {% endfor %}                                
                            </tr>
                        </thead>                            
                        <tbody>
                            {% if registros %}
                                {% for registro in registros %}
                                <tr>                                          
                                    {% for respuest in registro%}    
                                    {% with respuest.getStringValue as valor %}                          
                                    <td class="font-xs " title="{{ valor }}" >
                                        {{ valor }}
                                    </td>    
                                    {% endwith %}                  
                                    {% endfor %}                                                  
                                </tr>
                                {% endfor %}
                            {% endif %}
                        </tbody>
                    </table>
                </div>            
            {% endwith %}
        </div>
        </div>
        {% else %}
        </div>
        {% endif %}
    {% endfor %}   


    <div class="text-center mx-auto" style="width: 60%;">
      <p>
        <span class="font-semi-bold" style="color: red;">NOTA:</span> El proporcionar información falsa es motivo suficiente para anular el trámite. El COZCyT se reserva el derecho de investigar la veracidad de lo antes declarado.
      </p>        
      <p class="font-semi-bold"> {{ solicitante.nombre }} {{ solicitante.ap_paterno }} {{ solicitante.ap_materno }} </p>        
      <div class="mx-auto mt-5" style="border-bottom: 2px solid #000; width: 20rem;"></div>
      <p class="font-semi-bold"> Firma del (a) Estudiante </p>        
      <p>
          Manifiesto que la información proporcionada es verídica y de buena fe. De caso contrario me atendré a las sanciones correspondientes.
      </p>
    </div>
                
  </body>
</html>