{%- comment -%}
Make this include generic: accepts `include.entry` (or falls back to `post`, `project`, or `item`).
`kind` is inferred from `include.kind` or `entry.collection` when available. Icon and metadata
adjust based on kind so the same template can render posts, projects, pages, etc.
{%- endcomment -%}

{%- assign entry = include.entry | default: post | default: project | default: item -%}
{%- assign kind_raw = include.kind | default: entry.collection | default: entry.type | default: 'post' -%}
{%- assign kind = kind_raw | downcase -%}
{%- assign card_image = entry.card_image | default: entry.image -%}
{%- assign external_href = nil -%}
{%- if entry.external and entry.external != true -%}
{%- assign external_href = entry.external -%}
{%- elsif entry.external == true and entry.external_url -%}
{%- assign external_href = entry.external_url -%}
{%- endif -%}
{%- assign entry_href = external_href | default: entry.url | relative_url -%}
{%- assign entry_target = '' -%}
{%- assign entry_rel = '' -%}
{%- if external_href -%}
{%- assign entry_target = ' target="_blank"' -%}
{%- assign entry_rel = ' rel="noopener noreferrer"' -%}
{%- endif -%}

{%- assign icon_class = 'fa-solid fa-file-lines' -%}
{%- if kind == 'post' or kind == 'posts' -%}
{%- assign icon_class = 'fa-solid fa-feather-pointed' -%}
{%- elsif kind == 'project' or kind == 'projects' -%}
{%- assign icon_class = 'fa-solid fa-shapes' -%}
{%- elsif kind == 'page' or kind == 'pages' -%}
{%- assign icon_class = 'fa-solid fa-file' -%}
{%- endif -%}

<li
    class="project-card rounded-md p-0 w-full flex flex-col gap-1 bg-primary-200 dark:bg-primary-950 outline-primary-200 dark:outline-primary-900 overflow-hidden">
    <div class="project-card__layout flex flex-col sm:flex-row items-stretch gap-3 w-full px-3 py-2">
        {%- if (kind == 'project' or kind == 'projects') and card_image -%}
        <div
            class="w-full h-36 min-w-0 self-center overflow-hidden rounded-md border-0 border-primary-500/40 md:w-36 md:h-24 md:min-w-36 lg:w-48 lg:h-36 lg:min-w-44">
            <img src="{{ card_image | relative_url }}" alt=""
                class="w-full h-full object-cover border-0" loading="lazy" aria-hidden="true">
        </div>
        {%- endif -%}

   
        <div class="project-card__content flex flex-col gap-2 w-full min-w-0">
            <div
                class="flex flex-row gap-2 w-full rounded-md items-center px-2 py-1.5 bg-primary-300 dark:bg-primary-800">
                <h2 class="my-0 items-center text-md flex-1">
                    {% include icon.html name=icon_class class="w-4 h-4 mr-2 inline-block text-primary-800 dark:text-primary-600" %}
                    <a href="{{ entry_href }}" class="no-external-icon"{{ entry_target }}{{ entry_rel }}>{{ entry.title }}</a>
                </h2>

                {%- if kind == 'post' or kind == 'posts' -%}
                <p class="text-xs text-primary-700 dark:text-primary-400 my-0">
                    {{ entry.date | date: "%m-%d-%Y" }}
                </p>
                {%- elsif (kind == 'project' or kind == 'projects') and (entry.start_date or entry.end_date or
                entry.activity_percent) -%}
                <div
                    class="flex flex-col items-end text-[11px] leading-tight text-primary-600 dark:text-primary-400 my-0">
                    <span>
                        {%- if entry.start_date -%}
                        {{ entry.start_date | date: "%b %Y" }}
                        {%- endif -%}
                        {%- if entry.end_date -%}
                        - {{ entry.end_date | date: "%b %Y" }}
                        {%- elsif entry.start_date -%}
                        - now
                        {%- endif -%}
                    </span>
                </div>
                {%- endif -%}
            </div>

            <div class="flex flex-col gap-2 text-sm">
                <p class="my-0">{{ entry.description }}</p>

                {%- if entry.tags and entry.tags.size > 0 -%}
                <div class="flex flex-row flex-wrap gap-2">
                    {% for tag in entry.tags %}
                    <a href="/tag/{{ tag | downcase | replace: ' ', '-' }}/" class="no-underline no-external-icon">
                        <div
                            class="bg-primary-300 text-primary-800 dark:bg-primary-900 dark:text-primary-200 py-1 items-center px-2 rounded-md flex flex-row gap-2 h-fit text-xs">
                            {% include icon.html name="fa-tag" class="w-3 h-3" %}{{ tag }}
                        </div>
                    </a>
                    {% endfor %}
                </div>
                {%- endif -%}

                {%- if kind == 'project' or kind == 'projects' -%}
                <div class="project-card__desktop-links flex flex-row flex-wrap gap-2 mt-1">
                    {%- if entry.links and entry.links.size > 0 -%}
                    {% for link in entry.links %}
                    <a href="{{ link.url }}" class="no-underline no-external-icon">
                        <div
                            {% if link.icon and link.icon contains 'fa-trophy' %}data-trophy-link {% endif %}class="bg-primary-100 dark:bg-primary-900 border border-primary-500 py-1 px-2 rounded-md text-xs flex flex-row items-center gap-2">
                            {% include icon.html name=link.icon class="w-3 h-3" %}{{ link.title }}
                        </div>
                    </a>
                    {% endfor %}
                    {%- else -%}
                    {%- if entry.live_demo -%}
                    <a href="{{ entry.live_demo }}" class="no-underline no-external-icon">
                        <div
                            class="bg-primary-100 dark:bg-primary-900 border border-primary-500 py-1 px-2 rounded-md text-xs flex flex-row items-center gap-2">
                            {% include icon.html name="fa-play" class="w-3 h-3" %}Live demo
                        </div>
                    </a>
                    {%- elsif entry.demo -%}
                    <a href="{{ entry.demo }}" class="no-underline no-external-icon">
                        <div
                            class="bg-primary-100 dark:bg-primary-900 border border-primary-500 py-1 px-2 rounded-md text-xs flex flex-row items-center gap-2">
                            {% include icon.html name="fa-play" class="w-3 h-3" %}Live demo
                        </div>
                    </a>
                    {%- elsif entry.website -%}
                    <a href="{{ entry.website }}" class="no-underline no-external-icon">
                        <div
                            class="bg-primary-100 dark:bg-primary-900 border border-primary-500 py-1 px-2 rounded-md text-xs flex flex-row items-center gap-2">
                            {% include icon.html name="fa-play" class="w-3 h-3" %}Live demo
                        </div>
                    </a>
                    {%- endif -%}

                    {%- if entry.source_code -%}
                    <a href="{{ entry.source_code }}" class="no-underline no-external-icon">
                        <div
                            class="bg-primary-100 dark:bg-primary-900 border border-primary-500 py-1 px-2 rounded-md text-xs flex flex-row items-center gap-2">
                            {% include icon.html name="fa-brands fa-github" class="w-3 h-3" %}Source
                        </div>
                    </a>
                    {%- elsif entry.source -%}
                    <a href="{{ entry.source }}" class="no-underline no-external-icon">
                        <div
                            class="bg-primary-100 dark:bg-primary-900 border border-primary-500 py-1 px-2 rounded-md text-xs flex flex-row items-center gap-2">
                            {% include icon.html name="fa-brands fa-github" class="w-3 h-3" %}Source
                        </div>
                    </a>
                    {%- elsif entry.github -%}
                    <a href="{{ entry.github }}" class="no-underline no-external-icon">
                        <div
                            class="bg-primary-100 dark:bg-primary-900 border border-primary-500 py-1 px-2 rounded-md text-xs flex flex-row items-center gap-2">
                            {% include icon.html name="fa-brands fa-github" class="w-3 h-3" %}Source
                        </div>
                    </a>
                    {%- endif -%}
                    {%- endif -%}
                </div>
                {%- endif -%}

                {%- if kind == 'post' or kind == 'posts' -%}
                <a href="{{ entry_href }}"
                    class="text-primary-600 dark:text-primary-400 hover:underline mt-3 no-external-icon"{{ entry_target }}{{ entry_rel }}>Keep
                    reading...</a>
                {%- elsif kind == 'project' or kind == 'projects' -%}

                {%- else -%}
                <a href="{{ entry_href }}"
                    class="text-primary-600 dark:text-primary-400 hover:underline mt-3 no-external-icon"{{ entry_target }}{{ entry_rel }}>Open</a>
                {%- endif -%}
            </div>
        </div>
    </div>
</li>