{% extends "base.html" %}

{% block body %}
<main class="flex flex-col items-center">
    
    <h1 class="text-2xl text-white">{{ name }}'s SK TCG Trader</h1>
    
    <table id="card_table" class="my-4 border-collapse text-center">
      <tr class="text-gray-100 bg-blue-500 font-bold text-xl">
        <th class="p-2 border-2 border-gray-950">Card Name</th>
        <th class="p-2 border-2 border-gray-950">Card Value</th>
        <th class="p-2 border-2 border-gray-950">Card Count</th>
        <th class="p-2 border-2 border-gray-950">More Data</th>
      </tr>
      <!-- TODO: Add for loop for cards in data -->
      {% for card in cards %}
        <tr class="text-gray-900 bg-blue-400 text-lg">
          <td class="p-2 border-2 border-gray-950">{{ card.name|capitalize }}</td>
          {% if card.usd_value > 5.00 %}
            <td class="p-2 border-2 bg-green-400 border-gray-950">{{ card.usd_value }}</td>
          {% else if card.usd_value < 1.00 %}
            <td class="p-2 border-2 bg-red-400 border-gray-950">{{ card.usd_value }}</td>
          {% else %}
            <td class="p-2 border-2 bg-yellow-400 border-gray-950">{{ card.usd_value }}</td>
          {% endif %}
            <td class="p-2 border-2 border-gray-950">{{ card.count }}</td>
          <td class="p-2 border-2 border-gray-950">
            <button class="p-2 rounded-xl bg-purple-500 text-lg text-gray-100">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8">
                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25M9 16.5v.75m3-3v3M15 12v5.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
              </svg>
            </button>
          </td>
        </tr>
      {% endfor %}
      
    </table>
    <button class="p-2 rounded-xl bg-purple-500 text-xl font-bold text-gray-100" hx-get="/metrics" hx-trigger="click" hx-target="#card_table" hx-swap="innerHTML">
      Update Prices
    </button>
  </main>
{% endblock %}