{% extends "portfolio/layout.html" %}
{% load portfolio_display %}
{% block content %}
<div class="mx-auto flex max-w-screen-sm flex-col items-center gap-4 pt-20 lg:max-w-screen-lg">
    <div class="flex flex-col gap-4">
        <div class="inline-flex gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-8">
                  <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
            </svg>
            <h2 class="text-2xl text-gray-900 dark:text-gray-300">Looking for something?</h2>
        </div>
    </div>
    <form hx-swap="outerHTML" hx-post="{% url 'portfolio search' %}" hx-target="#search-results" hx-indicator=".htmx-indicator">
        {% csrf_token %}
        {{ form.title }}
        <span class="sr-only">Start typing to search...</span>
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="htmx-indicator mx-auto size-6 animate-spin">
            <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
        </svg>
    </form>
    {% include "portfolio/search_results.html" with search_results=search_results %}
</div>
{% endblock content %}
