timetracker/games/templates/view_purchase.html

<c-layouts.base>
    <div class="dark:text-white max-w-sm sm:max-w-xl lg:max-w-3xl mx-auto">
    
    <div class="flex flex-col gap-5 mb-3">
    <span class="text-balance max-w-[30rem] text-4xl">
        <span class="font-bold font-serif">{% if purchase.name %}{{ purchase.name }}{% else %}Unnamed purchase{% endif %}</span> <span class="text-slate-500 text-2xl">({{ purchase.games.count }} games)</span>
    </span>
    <div class="inline-flex rounded-md shadow-sm mb-3" role="group">
        <a href="{% url 'edit_purchase' purchase.id %}">
            <button type="button"
                    class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-s-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white">
                Edit
            </button>
        </a>
        <a href="{% url 'delete_purchase' purchase.id %}">
            <button type="button"
                    class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-e-lg hover:bg-red-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-red-700 dark:focus:ring-blue-500 dark:focus:text-white">
                Delete
            </button>
        </a>
    </div>
    <div>
        <p>
            Price:
            <c-price-converted>{{ purchase.standardized_price }}</c-price-converted>
             ({{ purchase.price | floatformat:2 }} {{ purchase.price_currency }})
        </p>
        <p>Price per game: <c-price-converted>{{ purchase.price_per_game | floatformat:0 }} {{ purchase.converted_currency }}</c-price-converted> </p>
    </div>
    <div>
        <h2 class="text-base">Items:</h2>
        <ul class="list-disc list-inside">
        {% for game in purchase.games.all %}
        <li><c-gamelink :game_id=game.id :name=game.name /></li>
        {% endfor %}
        </ul>
    </div>
    </div>
</div>

</c-layouts.base>