<div id="environments">
    <button hx-get="/environments" hx-target="#environments" hx-swap="outerHTML" class="flex items-center rounded-lg bg-blue-500 hover:bg-blue-700 px-4 py-2 text-white">
    Refresh
    </button>

    <div class="flex flex-col">
        <div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
            <div class="inline-block min-w-full py-2 sm:px-6 lg:px-8">
                <div class="overflow-hidden">
                    <table class="min-w-full text-left text-sm font-light">
                        <tbody hx-target="closest tr" hx-swap="outerHTML">
                            {% for env in environments %}
                            <tr
                                class="border-b transition duration-300 ease-in-out hover:bg-neutral-100 dark:border-neutral-500 dark:hover:bg-neutral-600">
                                {% include 'environment.html' %}
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div id="create-environment">
    {% include 'create_environment.html' %}
    </div>
</div>
