<section class="flex flex-col gap-4 p-4" id="message-packages-list" hx-target="this" hx-swap="outerHTML">
    {% for package in messagepackage_list %}
    <section id="{{ package.pk }}" class="flex gap-2 items-center border p-4 rounded bg-gray-100 dark:bg-gray-700">
        <div class="flex gap-2 items-center">
            <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 11.25v8.25a1.5 1.5 0 0 1-1.5 1.5H5.25a1.5 1.5 0 0 1-1.5-1.5v-8.25M12 4.875A2.625 2.625 0 1 0 9.375 7.5H12m0-2.625V7.5m0-2.625A2.625 2.625 0 1 1 14.625 7.5H12m0 0V21m-8.625-9.75h18c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125h-18c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z" />
            </svg>
        </div>
        <div class="w-full flex items-center gap-2">
            <meter
                id="executions-meter"
                class="w-full"
                min="0"
                max="{{ package.max }}"
                value="{{ package.count }}"
            ></meter>
            <label for="executions-meter">{{ package.count }}/{{ package.max }}</label>
        </div>
    </section>
    {% empty %}
    <p>You don't have any message packages yet.</p>
    {% endfor %}
    <button type="button" class="flex w-full cursor-pointer items-center justify-center gap-2 rounded border border-terminus-red-900 bg-terminus-red-800 p-2 text-center text-white transition-colors duration-300 ease-in-out hover:bg-terminus-red-400" hx-get="{% url 'terminusgps_notifications:create packages' %}">New Package</button>
</section>
