{% extends 'base.html' %} {% block title %} {{research.title}} {% endblock %} {% load static %} {% block content %}
<!--hero section-->
<section
  class="relative h-[300px] flex flex-col items-start justify-start text-start text-white py-0 px-3"
>
  <div class="video-docker absolute top-0 left-0 w-full h-full overflow-hidden">
    <img
      src="{{research.image.url}}"
      class="w-full h-[400px] object-cover"
      alt="{{research.title}}"
    />
  </div>

  <nav
    aria-label="Breadcrumb"
    class="absolute items-start justify-start bottom-0 z-10 w-full -mb-4"
  >
    <ol
      class="breadcrumb flex items-stretch gap-2 px-4 list-none rounded-none shadow-none h-8 bg-secondary bg-opacity-50 text-dark font-Roboto font-semibold text-thin text-sm transition-colors hover:text-gray"
    >
      <li class="items-center flex gap-2 md:flex">
        <a
          href="{% url 'home' %}"
          class="flex max-w-[20ch] items-start gap-1 text-gray truncate whitespace-nowrap font-Roboto font-semibold text-thin transition-colors hover:text-gray"
          >Home</a
        >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="flex-none w-4 h-4 transition-transform stroke-slate-700 md:rotate-180 text-dark"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          stroke-width="1.5"
          aria-hidden="true"
          aria-labelledby="title-01 description-01"
          role="graphics-symbol"
        >
          <title id="title-01">Arrow</title>
          <desc id="description-01">
            Arrow icon that points to the next page in big screen resolution
            sizes and previous page in small screen resolution sizes.
          </desc>
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M15 19l-7-7 7-7"
          />
        </svg>
      </li>
      <li class="items-center flex gap-2 md:flex">
        <a
          href="{% url 'research_list' %}"
          class="flex max-w-[20ch] items-start gap-1 text-gray truncate whitespace-nowrap font-Roboto font-semibold text-thin transition-colors hover:text-gray"
          >Research</a
        >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="flex-none w-4 h-4 transition-transform stroke-slate-700 md:rotate-180 text-dark"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          stroke-width="1.5"
          aria-hidden="true"
          aria-labelledby="title-01 description-01"
          role="graphics-symbol"
        >
          <title id="title-01">Arrow</title>
          <desc id="description-01">
            Arrow icon that points to the next page in big screen resolution
            sizes and previous page in small screen resolution sizes.
          </desc>
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M15 19l-7-7 7-7"
          />
        </svg>
      </li>
      <li class="items-center flex gap-2 md:flex">
        <a
          href="{% url 'research_by_category' category_slug=research.category.slug %}"
          class="flex max-w-[20ch] items-start gap-1 text-gray truncate whitespace-nowrap font-Roboto font-semibold text-thin transition-colors hover:text-gray"
        >
          {{research.category.name}}
        </a>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="flex-none w-4 h-4 transition-transform stroke-slate-700 md:rotate-180 text-dark"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          stroke-width="1.5"
          aria-hidden="true"
          aria-labelledby="title-01 description-01"
          role="graphics-symbol"
        >
          <title id="title-01">Arrow</title>
          <desc id="description-01">
            Arrow icon that points to the next page in big screen resolution
            sizes and previous page in small screen resolution sizes.
          </desc>
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M15 19l-7-7 7-7"
          />
        </svg>
      </li>
      <li class="items-center hidden gap-2 md:flex">
        <p
          class="flex max-w-[20ch] items-center gap-1 text-dark truncate whitespace-nowrap font-Roboto font-semibold text-thin transition-colors hover:text-gray"
        >
          {{research.title}}
        </p>
      </li>
    </ol>
  </nav>
</section>

<section class="relative sm:mx-12 mx-2 mt-8">
  <div class="relative shadow- none bg-primary sm:flex block">
    <div class="relative overflow-hidden sm:w-1/6 sm:mr-2">
      <!-- Component: Carousel with controls outside -->
      <div class="relative w-full">
        <!-- Slides -->
        <div class="overflow-hidden">
          <ul
            class="relative w-full mt-4 overflow-hidden p-0 whitespace-no-wrap block [backface-visibility: hidden] [transform-style: preserve-3d] [touch-action: pan-Y] [will-change: transform]"
          >
            {% if same_research %} {% for research in same_research %}
            <li class="flex shadow-none mt-2">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="flex-none w-4 h-4 transition-transform stroke-slate-700 md:rotate-180 text-dark"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                stroke-width="1.5"
                aria-hidden="true"
                aria-labelledby="title-01 description-01"
                role="graphics-symbol"
              >
                <title id="title-01">Arrow</title>
                <desc id="description-01">
                  Arrow icon that points to the next page in big screen
                  resolution sizes and previous page in small screen resolution
                  sizes.
                </desc>
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M15 19l-7-7 7-7"
                />
              </svg>
              <a
                href="{{research.get_absolute_url}}"
                class="text-start text-sm text-dark text-wrap font-bold hover:underline"
                >{{ research.title }}</a
              >
            </li>
            {% endfor %} {% else %}
            <li class="flex shadow-none mt-2">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="flex-none w-4 h-4 transition-transform stroke-slate-700 md:rotate-180 text-dark"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                stroke-width="1.5"
                aria-hidden="true"
                aria-labelledby="title-01 description-01"
                role="graphics-symbol"
              >
                <title id="title-01">Arrow</title>
                <desc id="description-01">
                  Arrow icon that points to the next page in big screen
                  resolution sizes and previous page in small screen resolution
                  sizes.
                </desc>
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M15 19l-7-7 7-7"
                />
              </svg>
              <a
                href="#!"
                class="text-start text-sm text-gray text-wrap text-thin hover:underline"
                >No related research</a
              >
              {% endif %}
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="sm:w-5/6 block mx-12 mt-2">
      <h5
        class="text-xl font-bold text-start text-wrap text-dark mt-2 uppercase font-Roboto"
      >
        {{research.title}}
      </h5>
      <div class="lg:mb-0">
        <div
          class="relative mb-6 overflow-hidden rounded-lg bg-cover bg-no-repeat shadow-none"
          data-te-ripple-init
          data-te-ripple-color="light"
        >
          <a href="#!">
            <div
              class="absolute top-0 right-0 bottom-0 left-0 h-full w-full overflow-hidden bg-fixed opacity-0 transition duration-300 ease-in-out hover:opacity-100 bg-[hsla(0,0%,98.4%,.15)]"
            ></div>
          </a>
        </div>
        <p class="text-gray text-thin mb-6">
          {{research.description|safe}}
          <br />
        </p>
      </div>
    </div>
  </div>
</section>
{% endblock %}