{% import "website/macros/chip.html" as chip %}
{% extends "website/base.html" %} {% block content %}
<div
    class="flex flex-col items-center justify-center w-full gap-4 p-4 mt-16 prose text-white lg:prose-lg xl:prose-xl dark:prose-invert">
    <h1>{{ project.name }}</h1>
    <span class="mt-8"></span>
    <section class="mx-auto prose lg:prose-lg xl:prose-xl dark:prose-invert">
        {{ project.description| markdown | safe }}
    </section>
    <span class="mt-8"></span>
    <section class="flex flex-col items-center justify-center w-full mx-auto">
        <h1>Technologies</h1>
        <div class="flex flex-wrap gap-2">
            {% for technology in project.technologies %}
            {{ chip::chip(text=technology) }}
            {% endfor %}
        </div>
    </section>
    <span class="mt-8"></span>
    {% if project.thumbnails|length > 0 %}
    <section class="flex flex-col items-center justify-center w-full mx-auto">
        <h1>Gallery</h1>
        <div class="flex flex-col gap-4">
            {% for thumbnail in project.thumbnails %}
            <img src="{{ thumbnail }}" alt="project thumbnail" class="mx-auto">
            {% endfor %}
        </div>
    </section>
    {% endif %}
    <span class="mt-8"></span>
    <section class="flex flex-col items-center justify-center w-full mx-auto">
        {% if project.github_url == "" and project.visit_url == "" and project.download_url == "" %}
        {% else %}
        <h1>Links</h1>
        <div class="flex flex-wrap gap-2">
            {% 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 border border-yellow-400 jus rounded-xl hover:bg-yellow-400">
                <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 border border-yellow-400 jus rounded-xl hover:bg-yellow-400">
                <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 border border-yellow-400 jus rounded-xl hover:bg-yellow-400">
                <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>
        {% endif %}
    </section>
</div>
{% endblock content %}