<!-- Form which triggers search results table swap -->
<div>
    <form
        class="mt-5 sm:flex sm:items-center"
        hx-post="{% url 'search' %}"
        hx-trigger="submit, load"
        hx-target="#search_results"
        hx-swap="outerHTML"
    >
        {% csrf_token %}
    <div class="w-full sm:max-w-xs">
        <label for="query" class="sr-only">Query</label>
        <input
            type="text"
            name="query"
            id="query"
            class="shadow-sm
            focus:ring-indigo-500
            focus:border-indigo-500
            block
            w-full
            sm:text-sm
            border-gray-300
            rounded-md"
            placeholder="Python"
        >
    </div>
    <button
        type="submit" class="mt-3 w-full inline-flex items-center justify-center px-4 py-2 border border-transparent shadow-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">Search</button>
    </form>
</div>


<!-- this gets swapped out completely upon form submission -->
<div id="search_results" >

    {{ jobs|json_script:"job_list" | safe }}

    {% if jobs %}
        <div x- class="px-4 sm:px-6 lg:px-8" x-data="{jobs: JSON.parse(document.getElementById('job_list').textContent)}">
            <template x-for="job in jobs">
            </template>
        </div>
    {% endif %}


    <!-- Desired behaviour: Only show this once the swap has finished and the jobs list is empty-->
    <!-- Problem: Right now this temporarily flashes up when the page loads, or the search results is loading -->
    {% if not jobs %}
        No results Found!
    {%  endif %}

</div>