{% extends 'site_ama/base.html' %} {% load static %} {% block content %}
<style>
  :root {
    --bs-body-font-family: Roboto, sans-serif;
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #51596c;
  }

  main {
    margin: 0;
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    color: var(--bs-body-color);
  }
  ::selection {
    color: #008060;
    background-color: rgba(0, 128, 96, 0.1);
  }
.recent-posts article {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  padding: 30px;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
}
.recent-posts .post-img {
  max-height: 240px;
  margin: -30px -30px 15px -30px;
  overflow: hidden;
}
.recent-posts .title {
  font-size: 22px;
  font-weight: 700;
  padding: 0;
  margin: 0 0 0px 0;
}
.recent-posts .post-author-img {
  width: 50px;
  border-radius: 50%;
  margin-right: 15px;
}
.recent-posts .post-author {
  font-weight: 600;
  margin-bottom: 5px;
}
.recent-posts .post-date {
  font-size: 14px;
  color: #3c3c3c;
  margin-bottom: 0;
}
.post-img img {
    width: 100%; /* 100% da largura do contêiner pai */
    max-height: 300px; /* 100% da altura do contêiner pai */
    object-fit: cover; /* Mantém a proporção e cobre o contêiner */
    border-radius: 8px; /* Borda arredondada (opcional) */
}
a {
  text-decoration: none;
}
.readmore {
  color: #008374;
}
.readmore:hover {
  color: #008374;
}
.banner-header {
  padding: 60px 0 60px 0;
  min-height: 40vh;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.banner-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Ajuste a opacidade conforme necessário */
  z-index: 1;
}

.banner-header h2 {
  font-size: 56px;
  font-weight: 500;
  color: #fff;
  position: relative; /* Certifica-se de que o texto fica acima da sobreposição */
  z-index: 2;
}

.banner-header p {
  color: rgba(255, 255, 255, 0.8);
  position: relative; /* Certifica-se de que o texto fica acima da sobreposição */
  z-index: 2;
}
.banner-header .btn {
  position: relative;
  z-index: 2;
}
</style>

<main>
  <!-- Banner do Header -->
  {% for banner in banners %} {% if banner.banner_img %}
  
<div class="banner-header d-flex align-items-center" style="background-image: url('{{ banner.banner_img.url }}');">
  <div class="container position-relative">
    <div class="row d-flex justify-content-center">
      <div class="col-lg-6 text-center">
        <h2>Viveiro Ama</h2>
        <p>Conheça o viveiro Ama</p>
        <a href="{% url 'historia' %}"><button type="button" class="btn btn-success">Conheça nossa História</button></a>
      </div>
    </div>
  </div>
</div>
  {% endif %} {% endfor %}
  <!-- <section>
    {% for banner in banners %} {% if banner.banner_img %}
    <img
    src="{{ banner.banner_img.url }}"
    class="img-fluid"
    style="width: 100%; max-height: 400px; object-fit: cover; object-position: center;"
    alt="Item 1"
    loading="lazy"
  />
  
    {% else %}
    <img
      src="{% static './assets/img-vitrine/vecteezy_icon-image-not-found-vector_.jpg' %}"
      class="card-img-top"
      style="width: 100%; height: 700px; object-fit: cover"
      alt="Item 1"
    />
    {% endif %} {% endfor %}
  </section> -->
  <!-- Banner do Header end -->

  <!-- Primeira Area, Painel Solar -->
  {% if sustentabilidade %}
  <div id="sustentabilidade" class="container mt-5 mb-3">
    <section class="row g-0" style="text-align: justify">
      <div class="col-lg-6 order-lg-2">
          <img src="{{ sustentabilidade.primeira_imagem.url }}" alt="Imagem" class="img-fluid w-100 h-100" style="object-fit: cover; max-height: 600px" />
      </div>
  
      <div class="col-lg-6 d-flex align-items-center justify-content-center px-3 px-lg-5 py-5 order-lg-1">
          <div class="mx-auto py-lg-5" style="max-width: 35rem">
              <h2 class="texto-titulo-principal display-4">
                  {{ sustentabilidade.primeiro_titulo }}<span class="texto-titulo-color display-4 fw-bold"> {{ sustentabilidade.primeiro_titulo_cor }}</span>
              </h2>
              <p class="lead fs-5">{{ sustentabilidade.primeiro_paragrafo }}</p>
          </div>
      </div>
  </section>
    <!-- Primeira Area, Paper Pot -->
    <section class="row g-0" style="text-align: justify">
      <div class="col-lg-6 position-relative">
        <img
          src="{{ sustentabilidade.segunda_imagem.url }}"
          alt="Imagem"
          class="img-fluid w-100 h-100"
          style="object-fit: cover; max-height: 600px"
        />
      </div>

      <div
        class="col-lg-6 d-flex align-items-center justify-content-center px-3 px-lg-5 py-5"
      >
        <div class="mx-auto py-lg-2" style="max-width: 35rem">
          <h2 class="texto-titulo-color texto-titulo-principal display-4">
            {{ sustentabilidade.segundo_titulo_cor }}
          </h2>
          <p class="lead">{{sustentabilidade.segundo_paragrafo }}</p>
          <div class="d-grid gap-2 col-md-6 col-lg-6 mx-auto">
            <a href="{% url 'historia' %}" class="btn btn-success rounded-5 p-2 mt-2" type="button">Conheça nossa História</a>
        </div>        
        </div>
      </div>
    </section>
  </div>
  {% else %}
  <p>Nenhuma informação de sustentabilidade disponível.</p>
  {% endif %}
  <!-- Primeira Area, Painel Solar END -->
  <style>
  .product-grid{
  font-family: 'Poppins', sans-serif;
  text-align: center;
  border: 1px solid #e7e7e7;
}
.product-grid .product-image img{
    width: 100%;
    height: auto;
}
.product-grid:hover .product-links{
    opacity: 1;
    top: 50%;
}
.product-grid .product-links li{
    display: inline-block;
    margin: 0 2px;
}
.product-grid .product-links li a:hover{
    color: #fff;
    background: #224b43;
    box-shadow: 1px 1px 30px 0 rgba(0, 0, 0, 0.2);
}
.product-grid .product-content{
    padding: 12px 12px 15px;
    position: relative;
}
.product-grid p{
    color: #999;
    font-size: 16px;
    margin-top: 5px;
}

@media screen and (max-width:1200px){
    .product-grid{ margin: 0 0 30px; }
}
  </style>
  <!-- Segunda Area, Nossas Mudas -->
  <div style="background-color: #f2f2f2">
    <div class="container pt-5 pb-5">
        <div class="row">
            <div class="col-lg-12">
                <div class="main-carrousel d-flex">
                    <i id="left" class="fa-solid fa-angle-left"></i>
                    <div class="carousel carrol-img">
                        {% for item in carrousels %}
                            <div class="col-md-3 col-sm-6 mb-4">
                                <div class="product-grid" style="margin: 0 10px;">
                                    <div class="product-image">
                                        <img class="pic-1 d-block d-sm-none" style="width: 250px; height: 250px; object-fit: cover; padding: 0;" src="{{ item.carrousel_img_1.url }}" alt="Imagem">
                                        <img class="pic-1 d-none d-sm-block" style="width: 100%; height: auto; object-fit: cover;" src="{{ item.carrousel_img_1.url }}" alt="Imagem">
                                    </div>
                                    <div class="product-content">
                                        <h5 class="title" style="max-height: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                                            {{ item.nome_cientifico }}
                                            <p>{{ item.nome }}</p>
                                        </h5>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                    <i id="right" class="fa-solid fa-angle-right"></i>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg text-center">
                <h3 class="texto-especies display-4">
                    Nossas <span class="texto-titulo-color display-4 fw-bold"> Espécies</span>
                </h3>
                <p class="lead">
                    Contamos com diversas espécies em nosso viveiro. Conheça mais sobre elas
                </p>
                <div class="d-grid gap-2 col-md-6 col-lg-4 mx-auto">
                    <a href="{% url 'vitrine' %}" class="btn btn-success mb-5 mt-3 py-2" style="border-radius: 40px">Conheça nossas Mudas</a>
                </div>
            </div>
        </div>
    </div>
</div>


  <!-- Segunda Area, Nossas Mudas end -->

  {% if projetos %}
  <!-- Terceira Area, Nossos Projetos -->

  <div class="container py-5">
    <div class="row">
      <section class="row g-0">
        <div class="col-lg-6 order-lg-2" style="overflow: hidden">
          <img
            src="{{ projetos.primeira_imagem.url }}"
            alt="Imagem"
            class="img-fluid w-100"
          />
        </div>

        <div
          class="col-lg-6 d-flex align-items-center justify-content-center px-3 px-lg-5 py-5 order-lg-1"
        >
          <div class="mx-auto py-lg-5" style="max-width: 35rem">
            <h2 class="texto-titulo-principal texto-titulo-principal-center display-4">
              {{ projetos.primeiro_titulo}}<span class="texto-titulo-color display-4 fw-bold">
                {{ projetos.primeiro_titulo_cor}}</span
              >
            </h2>
            <p class="lead" style="max-width: 500px">
              {{ projetos.primeiro_paragrafo}}
            </p>
            <!-- <div class="d-grid gap-2 mt-5">
              <a href="" class="btn btn-outline-success" type="button"
                >Ver Projetos</a
              >
            </div> -->
          </div>
        </div>
      </section>
    </div>
  </div>
  {% else %}
  <p>Nenhuma informação de projetos disponível.</p>
  {% endif %}
  <!-- Terceira Area, Nossos Projetos end -->

  <!-- Quarta Area, Nossa gente -->
  {% if nossa_gente %}
  <div style="background-color: #f2f2f2">
    <div class="container pt-5 pb-5">
      <div class="row">
        <div class="col-md sustentabilidade">
          <h2 class="texto-titulo-principal display-4">
            {{ nossa_gente.primeiro_titulo}}
            <span class="texto-titulo-color display-4 fw-bold"
              >{{nossa_gente.primeiro_titulo_cor }}</span
            >
          </h2>
          <p class="lead" style="max-width: 500px">
            {{nossa_gente.primeiro_paragrafo }}
          </p>
        </div>
        <div class="col-md">
          <img
            src="{{ nossa_gente.primeira_imagem.url }}"
            class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto"
            width="500"
            height="500"
            role="img"
            aria-label="Placeholder: 500x500"
            preserveAspectRatio="xMidYMid slice"
            focusable="false"
          />
        </div>
      </div>
      <div class="row featurette">
        <div class="col-md order-md-2 sustentabilidade">
          <p class="lead none-nossa-gente" style="max-width: 500px">
            {{nossa_gente.segundo_paragrafo }}
          </p>
          <div class="d-grid gap-2 col-md-6 col-lg-4 mx-auto mt-3">
            <a
              href="{% url 'contato' %}"
              class="btn btn-success py-2"
              style="max-width: 500px; border-radius: 40px"
              type="button"
              >Trabalhe conosco</a
            >
          </div>
        </div>
        <div class="col-md order-md-1 none-nossa-gente">
          <img
            src="{{ nossa_gente.segunda_imagem.url }}"
            class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto"
            width="500"
            height="500"
            role="img"
            aria-label="Placeholder: 500x500"
            preserveAspectRatio="xMidYMid slice"
            focusable="false"
          />
        </div>
      </div>
    </div>
  </div>
  {% else %}
  <p>Nenhuma informação de sustentabilidade disponível.</p>
  {% endif %}
  <!-- Quarta Area, Nossa gente end -->
      </div>
    </div>
  </section>


</main>
 <!-- ======= Recent Posts Section ======= -->
    <section id="recent-posts" class="recent-posts mt-5">
      <div class="container" data-aos="fade-up">
        <div class="section-header">
          <h2 class="texto-titulo-color display-4 fw-bold">Notícias</h2>
          <p>Fique por dentro dos conteúdos do Viveiro Ama</p>
        </div>
        <div class="row gy-4">
          {% for noticia in noticias %}
          <div class="col-xl-4 col-md-6">
            <article>
              <div class="post-img">
                {% if noticia.imagem %}
                <img src="{{ noticia.imagem.url }}" alt="" class="img-fluid">
                {% else %}
                          <p>Nenhuma imagem disponível</p>
                      {% endif %}
              </div>
              <h2 class="title">{{ noticia.titulo }}</h2>
              <div class="d-flex align-items-center">
                  <p class="post-date">
                    <time datetime="">{{ noticia.data_publicacao|date:"d/m/Y H:i" }}</time>
                  </p>
              </div>
              <p class="post-category">
                <p>{{ noticia.conteudo|slice:":200" }}...</p>
              </p>              
              <div class="col-lg-4 col-md-6">
                  <a href="{% url 'detalhes_noticias' noticia_id=noticia.id %}" class="readmore">Ler mais <i class="bi bi-arrow-right"></i></a>
              </div>
            </article>
          </div>
          {% endfor %}
        </div>
      </div>
    </section><!-- End Recent Posts Section -->

<script>
  // Carrousel da seção das especies, codigo serve para dar page no carrousel
  const carousel = document.querySelector(".carousel"),
  firstImg = carousel.querySelectorAll("img")[0],
  arrowIcons = document.querySelectorAll(".main-carrousel i");

// ... Restante do código permanece inalterado ou ajustado conforme necessário


  let isDragStart = false,
    isDragging = false,
    prevPageX,
    prevScrollLeft,
    positionDiff;

  const showHideIcons = () => {
    // showing and hiding prev/next icon according to carousel scroll left value
    let scrollWidth = carousel.scrollWidth - carousel.clientWidth; // getting max scrollable width
    arrowIcons[0].style.display = carousel.scrollLeft == 0 ? "none" : "block";
    arrowIcons[1].style.display =
      carousel.scrollLeft == scrollWidth ? "none" : "block";
  };

  arrowIcons.forEach((icon) => {
    icon.addEventListener("click", () => {
      let firstImgWidth = firstImg.clientWidth + 14; // getting first img width & adding 14 margin value
      // if clicked icon is left, reduce width value from the carousel scroll left else add to it
      carousel.scrollLeft += icon.id == "left" ? -firstImgWidth : firstImgWidth;
      setTimeout(() => showHideIcons(), 60); // calling showHideIcons after 60ms
    });
  });

  const autoSlide = () => {
    // if there is no image left to scroll then return from here
    if (
      carousel.scrollLeft - (carousel.scrollWidth - carousel.clientWidth) >
        -1 ||
      carousel.scrollLeft <= 0
    )
      return;

    positionDiff = Math.abs(positionDiff); // making positionDiff value to positive
    let firstImgWidth = firstImg.clientWidth + 14;
    // getting difference value that needs to add or reduce from carousel left to take middle img center
    let valDifference = firstImgWidth - positionDiff;

    if (carousel.scrollLeft > prevScrollLeft) {
      // if user is scrolling to the right
      return (carousel.scrollLeft +=
        positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff);
    }
    // if user is scrolling to the left
    carousel.scrollLeft -=
      positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
  };

  const dragStart = (e) => {
    // updatating global variables value on mouse down event
    isDragStart = true;
    prevPageX = e.pageX || e.touches[0].pageX;
    prevScrollLeft = carousel.scrollLeft;
  };

  const dragging = (e) => {
    // scrolling images/carousel to left according to mouse pointer
    if (!isDragStart) return;
    e.preventDefault();
    isDragging = true;
    carousel.classList.add("dragging");
    positionDiff = (e.pageX || e.touches[0].pageX) - prevPageX;
    carousel.scrollLeft = prevScrollLeft - positionDiff;
    showHideIcons();
  };

  const dragStop = () => {
    isDragStart = false;
    carousel.classList.remove("dragging");

    if (!isDragging) return;
    isDragging = false;
    autoSlide();
  };

  carousel.addEventListener("mousedown", dragStart);
  carousel.addEventListener("touchstart", dragStart);

  document.addEventListener("mousemove", dragging);
  carousel.addEventListener("touchmove", dragging);

  document.addEventListener("mouseup", dragStop);
  carousel.addEventListener("touchend", dragStop);

  // fim do carrousel
</script>

{% endblock %}