<section
  class="mb-20"
  style="
    background-image: url(/img/header-bg-image.png);
    background-size: cover;
    background-repeat: no-repeat;
  "
>
  <div class="container px-4">
    <h1
      class="mb-4 py-3 bg-gradient-to-t from-[#5E0C92] to-black inline-block text-transparent bg-clip-text text-4xl sm:text-6xl lg:text-7xl font-semibold text-center lg:text-left"
    >
      Content Planet's Blog
    </h1>
    <%if(suggested){%>
    <div class="bg-black p-5 rounded-lg">
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 items-center">
        <div
          class="relative w-full order-2 lg:order-1 flex items-center justify-center"
        >
          <img src="/img/blog-image.png" alt="" class="w-full" />
          <div
            class="backdrop-blur-sm p-2 lg:p-5 rounded-xl absolute w-[80%] h-[80%] custom-shadow flex items-center justify-center text-center"
          >
            <p
              class="bg-gradient-to-t from-[#5E0C92] to-black inline-block text-transparent bg-clip-text text-xl sm:text-4xl lg:text-3xl font-bold text-center"
            >
              <%=suggested.name%>
            </p>
          </div>
        </div>
        <div class="flex flex-col gap-4 items-start order-1 lg:order-2">
          <p class="px-4 py-2 border-white border rounded-lg text-white">
            latest
          </p>
          <a href="/blog/<%=suggested.slug %>">
            <h2
              class="font-semibold text-2xl bg-[linear-gradient(90deg,_#FEECFF_0%,_#FECAFF_11.71%,_#FEB5FF_26.8%,_#FFDBE7_40.18%,_#FFF4D6_49.22%,_#F3FCD7_58.71%,_#D2F5EE_71.29%,_#C3EFFF_84.44%,_#FBEFFF_100%)] bg-clip-text text-transparent"
            >
              <%=suggested.title%>
            </h2></a
          >
          <p class="text-white"><%=suggested.description%></p>
          <div class="flex justify-between">
            <div class="flex items-center gap-4">
              <img
                src="https://contentplanet.agency/img/users/<%=suggested.author.photo%>"
                alt=""
              />
              <div class="text-white">
                <p class="font-medium"><%=suggested.author.name%></p>
                <p><%=suggested.author.workfield%></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <%}%>
  </div>
</section>

<section class="mb-20 p-5">
  <div class="container">
    <div class="flex flex-col gap-4 p-5">
      <p class="text-sm font-medium">Latest Blog</p>
      <hr />
      <%doc.forEach(item=>{ %>

      <div
        class="justify-between items-center gap-4 md:grid-cols-12 grid grid-cols-1"
      >
        <div class="flex flex-col gap-4 md:col-span-8 col-span-12">
          <a href="/blog/<%=item.slug %>">
            <p
              class="py-3 bg-gradient-to-t from-[#5E0C92] to-black inline-block text-transparent bg-clip-text font-semibold lg:text-left text-2xl"
            >
              <%=item.title%>
            </p></a
          >
          <p class="max-w-[400px]"><%=item.introduction%></p>
          <div class="flex flex-wrap gap-4 items-center">
            <p class="items-center text-gray-500 flex gap-2">
              <svg
                width="14"
                height="14"
                viewBox="0 0 14 14"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M7 6.125C8.44974 6.125 9.625 4.94974 9.625 3.5C9.625 2.05026 8.44974 0.875 7 0.875C5.55026 0.875 4.375 2.05026 4.375 3.5C4.375 4.94974 5.55026 6.125 7 6.125Z"
                  fill="#7B7B7B"
                />
                <path
                  d="M12.25 10.5C12.25 9.05021 11.0748 7.875 9.625 7.875H4.375C2.92526 7.875 1.75 9.05021 1.75 10.5V13.125H12.25V10.5Z"
                  fill="#7B7B7B"
                />
              </svg>
              <%=item.author.name%>
            </p>
            <p class="items-center text-gray-500 flex gap-2">
              <svg
                width="12"
                height="12"
                viewBox="0 0 12 12"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M0.166016 10.0833C0.166016 11.075 0.924349 11.8333 1.91602 11.8333H10.0827C11.0743 11.8333 11.8327 11.075 11.8327 10.0833V5.41663H0.166016V10.0833ZM10.0827 1.33329H8.91602V0.749959C8.91602 0.399959 8.68268 0.166626 8.33268 0.166626C7.98268 0.166626 7.74935 0.399959 7.74935 0.749959V1.33329H4.24935V0.749959C4.24935 0.399959 4.01602 0.166626 3.66602 0.166626C3.31602 0.166626 3.08268 0.399959 3.08268 0.749959V1.33329H1.91602C0.924349 1.33329 0.166016 2.09163 0.166016 3.08329V4.24996H11.8327V3.08329C11.8327 2.09163 11.0743 1.33329 10.0827 1.33329Z"
                  fill="#7B7B7B"
                />
              </svg>
              <% const formattedDate = new
              Date(item.publishedAt).toLocaleDateString('en-US', { month:
              'short', day: 'numeric', year: 'numeric' }); %> Posted At <%=
              formattedDate %>
            </p>
          </div>
        </div>
        <div
          class="relative w-full flex items-center justify-center md:col-span-4 col-span-12"
        >
          <img src="/img/blog-image.png" alt="" class="w-full" />
          <div
            class="backdrop-blur-sm p-2 lg:p-5 rounded-xl absolute mx-2 md:mx-5 w-[80%] h-[80%] custom-shadow flex items-center justify-center text-center"
          >
            <p
              class="bg-gradient-to-t from-[#5E0C92] to-black inline-block text-transparent bg-clip-text text-xl font-bold text-center"
            >
              <%=item.name%>
            </p>
          </div>
        </div>
      </div>
      <hr class="opacity-50 text-gray-500" />
      <%})%>
    </div>
  </div>
</section>
<div class="pagination">
  <% if (pages > 1) { %>
  <form action="" class="flex justify-center mt-12 form">
    <ul class="flex flex-wrap justify-center gap-5">
      <% const current = parseInt(currentPage); %> <% const startPage =
      Math.max(1, current - 2); %> <% const endPage = Math.min(pages, current +
      2); %> <% if (startPage > 1) { %>
      <li>
        <a
          href="javascript:void(0)"
          onclick="pagination(1)"
          class="px-4 py-2 bg-purple-600 text-white rounded hover:bg-purple-700 transition"
        >
          1
        </a>
      </li>
      <% if (startPage > 2) { %>
      <li class="text-gray-500">...</li>
      <% } %> <% } %> <% for (let i = startPage; i <= endPage; i++) { %>
      <li>
        <a
          href="javascript:void(0)"
          onclick="pagination(<%= i %>)"
          class="px-4 py-2 <%= current === i ? 'bg-purple-800' : 'bg-purple-600' %> text-white rounded hover:bg-purple-700 transition"
        >
          <%= i %>
        </a>
      </li>
      <% } %> <% if (endPage < pages) { %> <% if (endPage < pages - 1) { %>
      <li class="text-gray-500">...</li>
      <% } %>
      <li>
        <a
          href="javascript:void(0)"
          onclick="pagination(<%= pages %>)"
          class="px-4 py-2 bg-purple-600 text-white rounded hover:bg-purple-700 transition"
        >
          <%= pages %>
        </a>
      </li>
      <% } %>
    </ul>
  </form>
  <% } %>
</div>

<!--Work With Us -->
<section class="container mb-20">
  <div class="grid grid-cols-7 items-center">
    <div class="col-span-7 md:col-span-2 order-3 md:order-1">
      <img src="/img/Work-with-us-image.png" alt="" class="mx-auto" />
    </div>
    <div
      class="col-span-7 md:col-span-3 flex flex-col gap-4 items-center order-2"
    >
      <h2
        class="py-3 bg-gradient-to-t from-[#5E0C92] to-black inline-block text-transparent bg-clip-text text-4xl sm:text-4xl lg:text-6xl font-semibold text-center"
      >
        Work With Us
      </h2>
      <p class="font-medium text-center">
        Are You a Content Writer or Graphic Designer?
      </p>
      <p class="text-center">There is an Empty Set For you in Our Team!</p>
      <div class="flex">
        <button class="px-2 py-1 rounded-lg bg-black text-white mb-2">
          Send a Resume
        </button>
      </div>
    </div>
    <div class="col-span-7 md:col-span-2 order-1 md:order-3">
      <img src="/img/Search-image.png" alt="" class="mx-auto" />
    </div>
  </div>
</section>
