{% if is_error %}
<div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-4" role="alert">
    <p>{{ msg }}</p>
</div>
{% elif is_done %}
<div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 mb-4" role="alert">
    <p>{{ msg }}</p>
</div>
<!-- Tell HTMX to fetch the final results and swap out the results container -->
<div class="hidden" hx-get="/status" hx-swap="innerHTML" hx-target="#scan-results" hx-trigger="load"></div>
{% else %}
<!-- Transition State -->
<div class="bg-blue-50 border-l-4 border-blue-400 p-4 mb-4 flex items-center shadow-sm">
    <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-blue-500" fill="none" viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg">
        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
        <path class="opacity-75" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
              fill="currentColor">
        </path>
    </svg>
    <div class="text-blue-700 font-medium w-full" hx-get="/status" hx-swap="outerHTML" hx-trigger="load delay:1s">
        {{ msg }}
    </div>
</div>
{% endif %}