{% extends 'template/template.j2.html' %}
{% block title %}
  {{ $t('sidebar.mongo') }}
{% endblock %}

{% block content %}
<div class="space-y-6">
  <!-- Page Header -->
  <div class="flex items-center gap-3">
    <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-green-500 to-green-600 text-white shadow-lg">
      <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20">
        <path d="M10 2c-1.716 0-3.408.106-5.07.31C3.806 2.45 3 3.414 3 4.517V17.25c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0017 17.25V4.517c0-1.103-.806-2.068-1.93-2.207A41.403 41.403 0 0010 2z"></path>
      </svg>
    </div>
    <div>
      <h1 class="text-2xl font-bold text-gray-800">{{ $t('database.test.title') }}</h1>
      <p class="text-sm text-gray-600">{{ $t('MongoDB example with CRUD operations') }}</p>
    </div>
  </div>

  <!-- Table Card -->
  <div class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-lg">
    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-gray-200 text-sm">
        <thead class="bg-gradient-to-r from-gray-50 to-white">
          <tr class="text-left">
            <th class="px-6 py-4 text-xs font-bold uppercase tracking-wider text-gray-700">{{ $t('database.table.header.title') }}</th>
            <th class="px-6 py-4 text-xs font-bold uppercase tracking-wider text-gray-700">{{ $t('database.table.header.slug') }}</th>
            <th class="px-6 py-4 text-center text-xs font-bold uppercase tracking-wider text-gray-700">{{ $t('database.table.header.action') }}</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-100 bg-white">
          {% for record in allRecords %}
          <tr class="group transition-colors duration-150 hover:bg-blue-50">
            <td class="px-6 py-4 align-top">
              <div class="flex items-center gap-2">
                <div class="h-2 w-2 rounded-full bg-blue-600"></div>
                <span class="font-semibold text-gray-800">{{ record.title }}</span>
              </div>
            </td>
            <td class="px-6 py-4 align-top">
              <code class="rounded-md bg-gray-100 px-2 py-1 text-xs text-gray-700">{{ record.slug }}</code>
            </td>
            <td class="px-6 py-4 text-center">
              <a
                href="/example/database?page={{ data.page if data.page else 1 }}&action=delete&id={{ record.id }}"
                class="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-rose-200 text-rose-600 transition-all duration-150 hover:bg-rose-50 hover:border-rose-300 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-rose-500/30"
                title="{{ $t('database.table.header.action') }}"
              >
                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                </svg>
              </a>
            </td>
          </tr>
          {% endfor %}
          {% if not allRecords ?? allRecords|length == 0 %}
          <tr>
            <td colspan="3" class="px-6 py-12 text-center">
              <div class="flex flex-col items-center gap-3">
                <div class="flex h-16 w-16 items-center justify-center rounded-full bg-gray-100">
                  <svg class="h-8 w-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
                  </svg>
                </div>
                <p class="text-sm font-medium text-gray-500">{{ $t('database.table.empty') if $t('database.table.empty') else $t('No records found') }}</p>
              </div>
            </td>
          </tr>
          {% endif %}
        </tbody>
      </table>
    </div>
    
    <!-- Footer with Add Form and Pagination -->
    <div class="border-t border-gray-200 bg-gradient-to-r from-gray-50 to-white p-6 space-y-4">
      <form method="post" class="flex flex-col gap-3 sm:flex-row sm:items-center">
        <input type="hidden" name="action" value="add" />
        <div class="flex-1">
          <div class="relative">
            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
              <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"></path>
              </svg>
            </div>
            <input
              type="text"
              name="title"
              placeholder="{{ $t('database.table.input.placeholder.title') }}"
              class="block h-11 w-full rounded-lg border border-gray-300 bg-white pl-10 pr-3 text-sm shadow-sm transition-all duration-200 focus:border-blue-500 focus:ring-4 focus:ring-blue-500/20"
            />
          </div>
        </div>
        <button
          type="submit"
          class="wave group inline-flex shrink-0 items-center justify-center gap-2 rounded-lg bg-gradient-to-r from-blue-600 to-blue-700 px-5 py-2.5 text-sm font-semibold text-white shadow-md transition-all duration-200 hover:from-blue-700 hover:to-blue-800 hover:shadow-lg focus:outline-none focus:ring-4 focus:ring-blue-500/30"
        >
          <svg class="h-5 w-5 transition-transform duration-200 group-hover:scale-110" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
          </svg>
          <span>{{ $t('database.table.button.add') }}</span>
        </button>
      </form>
      
      {% if pagination %}
      <div class="flex items-center justify-center border-t border-gray-200 pt-4">
        <div class="pagination-wrapper text-sm text-gray-600">
          {{ pagination }}
        </div>
      </div>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}