<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 }}">
        <h3>{{ package.count }}/{{ package.max }}</h3>
        <p>${{ package.price }}</p>
    </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>
