{% extends 'base.html' %}
{% load static %}
{% block principal %}
      <section class="min-vh-100">
        <div class="container-fluid min-vh-100">
            <nav class="navbar navbar-expand-lg bg-body-tertiary" style="background-color: #dee2e6">
              <div class="container-fluid">
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                  <ul class="navbar-nav me-auto mb-2 mb-lg-0 nav nav-tabs border border-light border-bottom-0 fondo_ul">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active text-white" id="enlace1-tab" data-bs-toggle="tab" data-bs-target="#enlace1" type="button" role="tab" aria-controls="enlace1" aria-selected="true">Usted ha tenido</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link text-white" id="enlace2-tab" data-bs-toggle="tab" data-bs-target="#enlace2" type="button" role="tab" aria-controls="enlace2" aria-selected="false">Sintomas</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link text-white" id="enlace3-tab" data-bs-toggle="tab" data-bs-target="#enlace3" type="button" role="tab" aria-controls="enlace3" aria-selected="false">Condiciones de salud</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link text-white" id="enlace4-tab" data-bs-toggle="tab" data-bs-target="#enlace4" type="button" role="tab" aria-controls="enlace4" aria-selected="false">Factores de Riesgo</button>
                        </li>
                  </ul>
                </div>
              </div>
            </nav>
            {% for formato in formulario  %}
                <td>{{formato.name}}</td>
            {% endfor %}
            {% if messages %}
                {% for message in messages %}
                    <div class="alert alert-warning alert-dismissible fade show" role="alert">
                        <i class="fas fa-exclamation-triangle"></i> {{ message }}!
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                {% endfor %}
            {% endif %}
           <form method="post" enctype="multipart/form-data">
                {% csrf_token %}
                <div class="tab-content border  min-vh-100 ml-3 grid gap-3" id="myTabContent">
                    <div class="tab-pane fade show active" id="enlace1" role="tabpanel" aria-labelledby="enlace1-tab">
                        <div  class="col-8 p-3">
                           {{ form.atq_cardiaco }}
                           <span>Un ataque cardiaco</span>
                        </div>
                         <div class="col-8 p-3">
                           {{ form.cir_cardiaca }}
                           <span>Una cirugía cardiaca</span>
                       </div>
                         <div class="col-8 p-3">
                           {{ form.cat_cardiaco }}
                           <span>Un cateterismo cardiaco</span>
                         </div>
                         <div class="col-8 p-3">
                           {{ form.angioplastia }}
                           <span>Una angioplastia</span>
                         </div>
                         <div class="col-8 p-3">
                           {{ form.implnt_marcapasos }}
                           <span>Implante de marcapasos</span>
                         </div>
                         <div class="col-8 p-3">
                           {{ form.implnt_desfibrilador }}
                           <span>Implante de un desfibrilador</span>
                         </div>
                         <div class="col-8 p-3">
                           {{ form.enf_valv_cardiacas }}
                           <span>Enfermedad de las válvulas cardiacas</span>
                         </div>
                         <div class="col-8 p-3">
                           {{ form.insuf_cardiaca }}
                           <span>Insuficiencia cardiaca</span>
                         </div>
                         <div class="col-8 p-3">
                           {{ form.tras_corazon }}
                           <span>Trasplante de corazón</span>
                         </div>
                         <div class="col-8 p-3">
                           {{ form.enf_cardiaca_cong }}
                           <span>Enfermedad cardiaca congénita</span>
                         </div>
                    </div>
                    <div class="tab-pane fade grid gap-3" id="enlace2" role="tabpanel" aria-labelledby="enlace2-tab">
                        <div class="col-10 p-2">
                            {{ form.inconf_pecho }}
                            <span>Ha experimentado inconformidad en el pecho cuando hace ejercicio</span>
                        </div>
                        <div class="col-10 p-2">
                            {{ form.inexp_dificultad_resp }}
                            <span>Ha experimentado inexplicable dificultad respiratoria con el ejercicio</span>
                        </div>
                        <div class="col-10 p-2">
                            {{ form.mar_des_vision }}
                            <span>Ha experimentado mareos, desmayos o visión borrosa con el ejercicio</span>
                        </div>
                        <div class="col-10 p-2">
                            {{ form.med_corazon }}
                            <span>Toma medicamentos para el corazón</span>
                        </div>
                    </div>
                    <div class="tab-pane fade grid gap-3" id="enlace3" role="tabpanel" aria-labelledby="enlace3-tab">
                      <div class="col-10 p-2">
                          {{ form.diabetes }}
                        <span>Tiene usted diabetes</span>
                      </div>
                      <div class="col-10 p-2">
                            {{ form.asma_afecc_pulmonar }}
                            <span>Tiene usted asma u otra afección pulmonar</span>
                      </div>
                      <div class="col-10 p-2">
                        {{ form.ardor_calambres }}
                        <span>Tiene sensación de ardor o calambres en sus piernas cuando camina distancias cortas</span>
                      </div>
                      <div class="col-10 p-2">
                        {{ form.enf_osea_musc }}
                        <span>Tiene usted alguna enfermedad ósea o muscular que limite su actividad física</span>
                      </div>
                      <div class="col-10 p-2">
                        {{ form.preoc_ejercicio }}
                        <span>Tiene alguna preocupación acerca de la seguridad para realizar ejercicio</span>
                    </div>
                      <div class="col-10 p-2">
                        {{ form.medicacion_formulada }}
                        <span>Está tomando alguna medicación formulada por un medico</span>
                    </div>
                    </div>
                    <div class="tab-pane fade grid gap-3" id="enlace4" role="tabpanel" aria-labelledby="enlace4-tab">
                        <div class="col-10 p-2">
                            {{ form.mayor_45 }}
                            <span>Es hombre mayor de 45 años</span>
                        </div>
                        <div class="col-10 p-2">
                            {{ form.mujer_55_hist_menop }}
                            <span>Es mujer mayor de 55 años o le han practicado una histerectomía o ya tiene la menopausia</span>
                        </div>
                        <div class="col-10 p-2">
                            {{ form.fuma }}
                            <span>Fuma usted o dejo de fumar hace menos de 6 meses</span>
                        </div>
                        <div class="col-10 p-2">
                            {{ form.hipertension }}
                            <span>Sufre usted de hipertensión</span>
                        </div>
                        <div class="col-10 p-2">
                            {{ form.conoce_presion_arterial }}
                            <span>Conoce sus cifras de presión arterial</span>
                        </div>
                        <div class="col-10 p-2">
                            {{ form.conoce_valor_colesterol }}
                            <span>Conoce usted el valor de su colesterol</span>
                        </div>
                        <div class="col-10 p-2">
                            {{ form.colesterol_mayor_200 }}
                            <span>Sabe si su colesterol es mayor a 200 mg/dl</span>
                        </div>
                        <div class="col-10 p-2">
                            {{ form.pariente_ataq_cardiaco_cirugia }}
                            <span>Tiene usted un pariente cercano (hermano o padre) que haya sufrido un ataque cardiaco o una cirugía cardiaca antes de los 55 años o antes de los 65 madre o hermana</span>
                        </div>
                        <div class="col-10 p-2">
                            {{ form.fisic_inactivo }}
                            <span>Es usted físicamente inactivo (no realiza al menos  30 minutos de actividad física más de dos veces a la semana</span>
                        </div>
                        <div class="col-10 p-2">
                            {{ form.peso_actua_por_encima }}
                            <span>Sabe si su peso actual esta 8 kilos o más por encima de su peso adecuado</span>
                        </div>
                    </div>
                    <div class="my-3">
                    <button class="btn btn_yellow" type="submit">Guardar</button>
                </div>
                </div>
           </form>
        </div>
      </section>
{% endblock %}
{% block extrajs %}
    <script src="{% static 'js/funciones.js' %}"></script>
    <script>
        console.log("formulario:", {{ formulario|safe }});
        window.data = { args: {{ formulario|safe }}};
    </script>
{% endblock extrajs %}