{% import "website/macros/chip.html" as chip %} {% import
"website/macros/image-carousel.html" as image_carousel %} {% macro
project_item(project) %}
<script src="/static/js/project-item.js"></script>

<div class="flex items-center justify-between w-full h-full gap-4 text-white">
  <div class="flex flex-col w-full gap-4 m-4 md:w-1/3">
    <div class="prose">
      <h1 class="text-white">{{ project.name }}</h1>
      <p class="text-white whitespace-pre-wrap">
        {{ project.short_description }}
      </p>
    </div>
    <div class="flex flex-wrap justify-center gap-2 md:justify-start">
      {% for technology in project.technologies %} {{
      chip::chip(text=technology) }} {% endfor %}
    </div>
    <a
      href="/projects/project/{{ project.name }}"
      class="text-center glass-effect glossy-effect bottom gloss-highlight p-2 rounded-2xl bg-yellow-400 hover:bg-yellow-500 text-black"
      >Read more</a
    >
    <div class="flex flex-wrap gap-2 sm:justify-center md:justify-start">
      {% if project.github_url %}
      <a
        href="{{ project.github_url }}"
        target="_blank"
        rel="noopener noreferrer"
        class="flex items-center justify-center w-full gap-1 p-2 text-center glass-effect glossy-effect bottom gloss-highlight rounded-2xl bg-yellow-400 hover:bg-yellow-500 text-black"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-github"
        >
          <path
            d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"
          />
          <path d="M9 18c-4.51 2-5-2-7-2" />
        </svg>
        CODE
      </a>
      {% endif %} {% if project.visit_url %}
      <a
        href="{{ project.visit_url }}"
        target="_blank"
        rel="noopener noreferrer"
        class="flex items-center justify-center w-full gap-1 p-2 text-center glass-effect glossy-effect bottom gloss-highlight rounded-2xl bg-yellow-400 hover:bg-yellow-500 text-black"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-eye"
        >
          <path
            d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"
          />
          <circle cx="12" cy="12" r="3" />
        </svg>
        LIVE
      </a>
      {% endif %} {% if project.download_url %}
      <a
        href="{{ project.download_url }}"
        target="_blank"
        rel="noopener noreferrer"
        class="flex items-center justify-center w-full gap-1 p-2 text-center glass-effect glossy-effect bottom gloss-highlight rounded-2xl bg-yellow-400 hover:bg-yellow-500 text-black"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-cloud-download"
        >
          <path d="M12 13v8l-4-4" />
          <path d="m12 21 4-4" />
          <path
            d="M4.393 15.269A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.436 8.284"
          />
        </svg>
        DOWNLOAD
      </a>
      {% endif %}
    </div>
    {% if project.thumbnails|length > 0 %}
    <div class="w-full m-2 md:hidden">
      {% set carousel_id = "carousel-mobile-" ~ project.id %} {{
      image_carousel::image_carousel(id=carousel_id,
      thumbnails=project.thumbnails) }}
    </div>
    {% endif %} {% if project.thumbnails|length == 0 %}
    <div class="w-full m-2 md:hidden">
      <div
        class="bg-gradient-to-r from-violet-600 to-indigo-600 shadow-lg w-full max-w-full md:max-w-[50hw] h-[40rem] flex items-center justify-center glass-effect glossy-effect bottom gloss-highlight"
      >
        {% if project.category == "Desktop" %}
        <svg
          title="desktop"
          xmlns="http://www.w3.org/2000/svg"
          width="256"
          height="256"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-app-window"
        >
          <rect x="2" y="4" width="20" height="16" rx="2" />
          <path d="M10 4v4" />
          <path d="M2 8h20" />
          <path d="M6 4v4" />
        </svg>
        {% endif %} {% if project.category == "Mobile" %}
        <svg
          title="mobile"
          xmlns="http://www.w3.org/2000/svg"
          width="256"
          height="256"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-smartphone"
        >
          <rect width="14" height="20" x="5" y="2" rx="2" ry="2" />
          <path d="M12 18h.01" />
        </svg>
        {%endif%} {% if project.category == "Web" %}
        <svg
          title="web"
          xmlns="http://www.w3.org/2000/svg"
          width="256"
          height="256"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-globe"
        >
          <circle cx="12" cy="12" r="10" />
          <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
          <path d="M2 12h20" />
        </svg>
        {%endif%} {% if project.category == "Api" %}
        <svg
          title="API"
          xmlns="http://www.w3.org/2000/svg"
          width="256"
          height="256"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-monitor-cog"
        >
          <path d="M12 17v4" />
          <path d="m15.2 4.9-.9-.4" />
          <path d="m15.2 7.1-.9.4" />
          <path d="m16.9 3.2-.4-.9" />
          <path d="m16.9 8.8-.4.9" />
          <path d="m19.5 2.3-.4.9" />
          <path d="m19.5 9.7-.4-.9" />
          <path d="m21.7 4.5-.9.4" />
          <path d="m21.7 7.5-.9-.4" />
          <path d="M22 13v2a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7" />
          <path d="M8 21h8" />
          <circle cx="18" cy="6" r="3" />
        </svg>
        {%endif%} {% if project.category == "Game" %}
        <svg
          title="game"
          xmlns="http://www.w3.org/2000/svg"
          width="256"
          height="256"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-gamepad-2"
        >
          <line x1="6" x2="10" y1="11" y2="11" />
          <line x1="8" x2="8" y1="9" y2="13" />
          <line x1="15" x2="15.01" y1="12" y2="12" />
          <line x1="18" x2="18.01" y1="10" y2="10" />
          <path
            d="M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z"
          />
        </svg>
        {%endif%}
      </div>
    </div>
    {% endif %}
  </div>
  {% if project.thumbnails|length > 0 %}
  <div class="hidden m-2 md:flex md:w-1/2">
    {% set carousel_id = "carousel-desktop-" ~ project.id %} {{
    image_carousel::image_carousel(id=carousel_id,
    thumbnails=project.thumbnails) }}
  </div>
  {% endif %} {% if project.thumbnails|length == 0 %}
  <div class="hidden m-2 md:flex md:w-1/2">
    <div
      class="bg-gradient-to-r from-violet-600 to-indigo-600 shadow-lg w-full max-w-full md:max-w-[50hw] h-[40rem] flex items-center justify-center glass-effect glossy-effect bottom gloss-highlight"
    >
      {% if project.category == "Desktop" %}
      <svg
        title="desktop"
        xmlns="http://www.w3.org/2000/svg"
        width="256"
        height="256"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-app-window"
      >
        <rect x="2" y="4" width="20" height="16" rx="2" />
        <path d="M10 4v4" />
        <path d="M2 8h20" />
        <path d="M6 4v4" />
      </svg>
      {% endif %} {% if project.category == "Mobile" %}
      <svg
        title="mobile"
        xmlns="http://www.w3.org/2000/svg"
        width="256"
        height="256"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-smartphone"
      >
        <rect width="14" height="20" x="5" y="2" rx="2" ry="2" />
        <path d="M12 18h.01" />
      </svg>
      {%endif%} {% if project.category == "Web" %}
      <svg
        title="web"
        xmlns="http://www.w3.org/2000/svg"
        width="256"
        height="256"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-globe"
      >
        <circle cx="12" cy="12" r="10" />
        <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
        <path d="M2 12h20" />
      </svg>
      {%endif%} {% if project.category == "Api" %}
      <svg
        title="API"
        xmlns="http://www.w3.org/2000/svg"
        width="256"
        height="256"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-monitor-cog"
      >
        <path d="M12 17v4" />
        <path d="m15.2 4.9-.9-.4" />
        <path d="m15.2 7.1-.9.4" />
        <path d="m16.9 3.2-.4-.9" />
        <path d="m16.9 8.8-.4.9" />
        <path d="m19.5 2.3-.4.9" />
        <path d="m19.5 9.7-.4-.9" />
        <path d="m21.7 4.5-.9.4" />
        <path d="m21.7 7.5-.9-.4" />
        <path d="M22 13v2a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7" />
        <path d="M8 21h8" />
        <circle cx="18" cy="6" r="3" />
      </svg>
      {%endif%} {% if project.category == "Game" %}
      <svg
        title="game"
        xmlns="http://www.w3.org/2000/svg"
        width="256"
        height="256"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-gamepad-2"
      >
        <line x1="6" x2="10" y1="11" y2="11" />
        <line x1="8" x2="8" y1="9" y2="13" />
        <line x1="15" x2="15.01" y1="12" y2="12" />
        <line x1="18" x2="18.01" y1="10" y2="10" />
        <path
          d="M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z"
        />
      </svg>
      {%endif%}
    </div>
  </div>
  {% endif %}
</div>
{% endmacro project_item %}