{% extends 'base2.html' %}
{% load static %}

<!-- Título de la página -->
{% block title %}
Parque Etnobiológico
{% endblock %}

<!--Contenido de la página -->
{% block content %}
  <br>
  <!--Contenido 1- Carrousel-->
  <div class="container-lg">
    <div class="carousel" data-bs-ride="carousel" id="myCarousel">
        <ol class="carousel-indicators">
            <li class="carousel-indicator active" data-bs-target="#myCarousel" data-bs-slide-to="0"></li>
            <li class="carousel-indicator" data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="static/media/images/actividades/1.jpg" class="d-block w-100" alt="Descripción de la imagen 1">
            </div>
            <div class="carousel-item">
                <img src="static/media/images/actividades/2.jpg" class="d-block w-100" alt="Descripción de la imagen 2">
            </div>
        </div>
        <a class="carousel-control-prev" href="#myCarousel" role="button" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="false"></span>
            <span class="">Anterior</span>
        </a>
        <a class="carousel-control-next" href="#myCarousel" role="button" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="false"></span>
            <span class="">Siguiente</span>
        </a>
    </div>
  </div>
  <br>

  <!--Contenido 2- Card, Qué son los jardines-->
  <div class="container-lg">
    <div class="card">
      <div class="card-body">
        Los “Jardines Etnobiológicos” son entendidos como espacios, en donde se conserve la flora y faunas locales, resguardando el conocimiento relativo a ellas; además de conservar los saberes locales y regionales que se encuentran en riesgo a perderse, promoviendo con ello el acceso universal al conocimiento.
      </div>
    </div>
  </div>
  <br>
  
  <div class="container-lg">
    <hr>
   <!--Contenido 3- Objetivo del jardín-->
   <div class="container">
    <div class="row align-items-start">
      <div class="col">
        <h2>Objetivo</h2>
      </div>
      <div class="col">
        <p>Desarrollar y establecer un Jardín Etnobiológico en Zacatecas, con la finalidad de impulsar un espacio público en donde se conservan especies de flora y fauna nativas y/o regionales y se resguarde el conocimiento relativo a ellas; se fomenta la vinculación e intercambio de saberes con las comunidades locales que sirvan para propiciar actividades artísticas y culturales; permitiendo con ello la difusión y el acceso universal al conocimiento etnobiológico y de la riqueza biocultural del estado de Zacatecas y el país, en articulación con la Red Nacional de Jardines Etnobiológicos.
        </p>
        <img src="static/media/images/actividades/2.jpg" class="d-block w-100" alt="Descripción de la imagen 2">
      </div>
    </div>
  </div>

  <hr>

  <!--Contenido 4- Maps e info de ubicación-->
  <div class="container">
    <div class="row align-items-start">
      <div class="col">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3678.4839800371374!2d-102.61462312542753!3d22.784523779341356!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x86824dfc4cfaa44d%3A0x7f6c2c6bc7175a7e!2sQuantum%20-%20Ciudad%20del%20Conocimiento!5e0!3m2!1ses!2smx!4v1714164106364!5m2!1ses!2smx" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
      
      </div>
      <div class="col">
        <br>
        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-geo-alt" viewBox="0 0 16 16">
          <path d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A32 32 0 0 1 8 14.58a32 32 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10"/>
          <path d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4m0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6"/>
        </svg>
        <h2>Conócenos</h2>
        <br>
        <p> El Jardín Etnobiológico se encuentra dentro del Parque   QUANTUM, situado en el Boulevard del bote s/n Cerro del Gato, a un costado del Instituto Politécnico Nacional de Zacatecas, a un kilómetro del centro comercial Galerías.</p>
      </div>
    </div>
  </div>

  <hr>
  <!--Contenido 5- Contacto-->

   <div class="container">
    <div class="row align-items-start">
      <div class="col">
        <card>
          <div class="card-body">
            <h5 class="card-title">¿Quieres visitarnos?</h5>
            <h6 class="card-subtitle mb2 text-body-secondary"> Contáctanos completando el formulario a continuación!</h6>
            <br>
              <form action="/enviar_correo/" method="post">
                {% csrf_token %}
                <div class="mb-3">
                  <label for="nombre" class="form-label">Nombre</label>
                  <input type="text" class="form-control" id="nombre" name="nombre" required>
                </div>
                <div class="mb-3">
                  <label for="email" class="form-label">Correo electrónico</label>
                  <input type="email" class="form-control" id="email" name="email" required>
                </div>
                <div class="mb-3">
                  <label for="mensaje" class="form-label">Mensaje</label>
                  <textarea class="form-control" id="mensaje" name="mensaje" required></textarea><br>
                </div>
                
                <button type="submit" class="btn btn-primary">Submit</button>
              </form>
          </div>
        </card>
      </div>
      <div class="col">
        <img src="static/media/images/actividades/2.jpg" class="d-block w-100" alt="Descripción de la imagen 2">
      </div>
    </div>
  </div>

  
  <br>

  </div>

{% endblock %}
