<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> Price: {% if purchase.converted_price %} {{ purchase.converted_price | floatformat }} {{ purchase.converted_currency }} {% else %} None {% endif %} ({{ purchase.price | floatformat }} {{ purchase.price_currency }}) </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>