{% extends "base.html" %}

{% block body %}
<main class="flex flex-col items-center">
    
    <h1 class="text-3xl text-white">{{ name }}'s SK TCG Trader</h1>
    <div class="bg-gray-900 py-10 rounded-2xl shadow-lg my-4">
      <h2 class="px-4 text-3xl font-bold leading-7 text-white sm:px-6 text-center lg:px-8">Latest Prices</h2>
      <table class="mt-6 w-full whitespace-nowrap text-left">
        <colgroup>
          <col class="w-full sm:w-4/12">
          <col class="lg:w-4/12">
          <col class="lg:w-2/12">
          <col class="lg:w-1/12">
          <col class="lg:w-1/12">
        </colgroup>
        <thead class="border-b border-white/10 text-sm leading-6 text-white">
          <tr>
            <th scope="col" class="py-2 pl-4 pr-8 text-center font-semibold sm:pl-6 lg:pl-8">Card Name</th>
            <th scope="col" class="hidden py-2 text-center pl-0 pr-8 font-semibold sm:table-cell">Card Count</th>
            <th scope="col" class="py-2 pl-0 pr-4 text-center font-semibold sm:pr-8 sm:text-left lg:pr-20">Card Value</th>
            <th scope="col" class="hidden py-2 pl-0 pr-8 font-semibold md:table-cell lg:pr-20">More Data</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-white/5">
          {% for card in cards %}
          <tr>
            <td class="py-4 pl-4 pr-8 sm:pl-6 lg:pl-8">
              <div class="flex items-center gap-x-4">
                <img src="https://api.dicebear.com/6.x/adventurer/svg?seed={{card.count}}-20-{{card.name|wordcount}}" class="h-7 w-7" alt="avatar" />
                <div class="truncate text-sm font-medium leading-6 text-white">{{ card.name|capitalize }}</div>
              </div>
            </td>
            <td class="hidden py-4 pl-0 pr-4 sm:table-cell sm:pr-8 text-center"> <!-- Added text-center class -->
              <div class="font-mono text-sm leading-6 text-gray-400">{{ card.count }}</div>
            </td>
            <td class="py-4 pl-0 pr-4 text-sm leading-6 sm:pr-8 lg:pr-20 text-center"> <!-- Added text-center class -->
              <div class="flex items-center justify-center gap-x-2 sm:justify-start"> <!-- Added justify-center class -->
                {% if card.usd_value > 5.00 %}
                <div class="flex-none rounded-full p-1 text-green-400 bg-green-400/10">
                  <div class="h-1.5 w-1.5 rounded-full bg-current"></div>
                </div>
                {% else if card.usd_value < 1.00 %}
                <div class="flex-none rounded-full p-1 text-red-400 bg-green-400/10">
                  <div class="h-1.5 w-1.5 rounded-full bg-current"></div>
                </div>
                {% else %}
                <div class="flex-none rounded-full p-1 text-yellow-400 bg-green-400/10">
                  <div class="h-1.5 w-1.5 rounded-full bg-current"></div>
                </div>
                {% endif %}
                <div class="text-white">${{ card.usd_value }}</div>
              </div>
            </td>
            
            <td class=" py-4 pl-0 pr-8 text-sm leading-6 text-gray-400 md:table-cell lg:pr-20 text-center flex justify-center"> <!-- Added text-center and flex justify-center classes -->
              <button class="p-2 rounded-xl bg-blue-600 text-lg text-gray-100 ring-1 ring-inset ring-gray-300">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-7 h-7">
                  <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 %}
        
        </tbody>
      </table>
        <nav class="flex items-center justify-between border-t bg-gray-900 border-white/10 px-4 py-3 sm:px-6" aria-label="Pagination">
          <div class="hidden sm:block">
            <p class="text-sm text-gray-50">
              Showing
              <span class="font-medium">{{ (current_page - 1) * 10 + 1 }}</span>
              to
              <span class="font-medium">{{ current_page * 10 }}</span>
              of
              <span class="font-medium">{{ total_cards }}</span>
              results
            </p>
          </div>
          <div class="flex flex-1 justify-between sm:justify-end">
            {% if current_page > 1 %}
            <a href="?page={{ current_page - 1 }}" class="relative inline-flex items-center bg-blue-600 rounded-md px-3 py-2 text-sm font-semibold text-gray-50 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-offset-0" hx-get="/cards?page={{ current_page - 1 }}" hx-target="#card_table" hx-swap="innerHTML">Previous</a>
            {% endif %}
            {% if current_page * 10 < total_cards %}
            <a href="?page={{ current_page + 1 }}" class="relative ml-3 inline-flex items-center bg-blue-600 rounded-md px-3 py-2 text-sm font-semibold text-gray-50 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-offset-0" hx-get="/cards?page={{ current_page + 1 }}" hx-target="#card_table" hx-swap="innerHTML">Next</a>
            {% endif %}
          </div>
        </nav>
      </div>
    </div>

    <button class="p-2 mb-4 rounded-xl bg-blue-600 text-xl font-bold text-gray-100 ring-1 ring-inset ring-gray-300" hx-get="/metrics" hx-trigger="click" hx-target="#card_table" hx-swap="innerHTML">
      Update Prices
    </button>
  </main>
{% endblock %}