{% extends "base.html" %} {% block content %}
<div class="flex items-start gap-4">
  <aside class="w-64 bg-gray-800 p-4 border-gray-700 shrink-0 rounded">
    <h2 class="text-lg font-semibold mb-4">Available Tables</h2>
    <div class="space-y-2">
      {% for table in tables %}
      <div
        class="table-item p-3 rounded-lg bg-gray-700 hover:bg-gray-600 cursor-pointer transition-colors flex justify-between items-center"
        data-index="{{loop.index0}}"
        onclick="selectTable(this, event)"
      >
        <div>
          <div class="text-sm font-medium">{{table.name}}</div>
          <div class="text-xs text-gray-400">{{table.module}}</div>
        </div>
        <button 
          class="add-record-btn hidden p-2 text-xs flex bg-green-600 text-white rounded-full hover:bg-green-700 transition-colors duration-200"
          onclick="goToCreatePage(event)"
          title="Create new record"
        >
       Add
          <svg
            class="w-4 h-4"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M12 6v6m0 0v6m0-6h6m-6 0H6"
            ></path>
          </svg>
        </button>
      </div>
      {% endfor %}
    </div>
    
  </aside>

  <div>
    <table class="w-full bg-gray-800 rounded overflow-hidden">
      <thead class="bg-gray-700" id="tableHead"></thead>
      <tbody id="tableBody">
        {% for record in records %}
        <tr class="record-row border-t border-gray-700 hover:bg-gray-750">
          <td class="record-data hidden">{{record}}</td>
        </tr>
        {% endfor %}
      </tbody>
      <tfoot
        id="paginationControls"
        class="my-4 flex-grow flex mx-[100%] gap-4 justify-center w-full min-w-80"
      ></tfoot>
    </table>
  </div>
</div>
<style>
  details[open] summary svg {
    transform: rotate(180deg);
  }

  details summary::-webkit-details-marker {
    display: none;
  }
</style>
<script>
  {% include "table.js" %}
</script>

{% endblock %}
