{% extends "base.html" %}

{% block content %}
<div class="space-y-6">
  <div class="flex items-center justify-between">
    <h1 class="text-2xl font-semibold">Flexible Imports</h1>
    <div class="flex items-center gap-2">
      <button id="exportCsvBtn" class="px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white rounded-lg transition-colors">
        <i class="fa-solid fa-file-csv mr-2"></i> Export CSV
      </button>
    </div>
  </div>

  <div class="bg-white dark:bg-neutral-800 rounded-xl border border-neutral-200 dark:border-neutral-700 p-4">
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
      <div>
        <label class="block text-sm font-medium mb-1">File Type</label>
        <select id="filterFileType" class="w-full rounded-lg border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-900 p-2">
          <option value="">All</option>
        </select>
      </div>
      <div>
        <label class="block text-sm font-medium mb-1">Target Table</label>
        <select id="filterTargetTable" class="w-full rounded-lg border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-900 p-2">
          <option value="">All</option>
        </select>
      </div>
      <div>
        <label class="block text-sm font-medium mb-1">Quick Search</label>
        <input id="quickSearch" type="text" placeholder="Search file type, target table, keys and values" class="w-full rounded-lg border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-900 p-2" />
      </div>
      <div class="flex items-end">
        <button id="applyFiltersBtn" class="w-full md:w-auto px-4 py-2 bg-neutral-100 dark:bg-neutral-700 hover:bg-neutral-200 dark:hover:bg-neutral-600 rounded-lg border border-neutral-200 dark:border-neutral-600">Apply</button>
      </div>
    </div>
    <!-- Key filter chips -->
    <div id="keyChipsContainer" class="mt-3 hidden">
      <div class="flex items-center gap-2 flex-wrap">
        <span class="text-xs text-neutral-500">Filters:</span>
        <div id="keyChips" class="flex items-center gap-2 flex-wrap"></div>
        <button id="clearKeyChips" class="ml-auto text-xs text-neutral-600 hover:text-neutral-800 dark:text-neutral-300 dark:hover:text-white">Clear</button>
      </div>
    </div>
  </div>

  <div class="bg-white dark:bg-neutral-800 rounded-xl border border-neutral-200 dark:border-neutral-700 overflow-hidden">
    <div class="overflow-x-auto">
      <table class="w-full text-sm">
        <thead>
          <tr class="bg-neutral-100 dark:bg-neutral-700 text-left">
            <th class="px-3 py-2">ID</th>
            <th class="px-3 py-2">File Type</th>
            <th class="px-3 py-2">Target Table</th>
            <th class="px-3 py-2">PK</th>
            <th class="px-3 py-2">Unmapped Preview</th>
            <th class="px-3 py-2 text-right">Actions</th>
          </tr>
        </thead>
        <tbody id="flexibleRows" class="divide-y divide-neutral-200 dark:divide-neutral-700">
        </tbody>
      </table>
    </div>
    <div class="flex items-center justify-between p-3 border-t border-neutral-200 dark:border-neutral-700">
      <div class="text-xs text-neutral-500" id="rowsMeta">Loading...</div>
      <div class="flex items-center gap-2">
        <button id="prevPageBtn" class="px-3 py-1.5 bg-neutral-100 dark:bg-neutral-700 disabled:opacity-50 rounded-lg">Prev</button>
        <button id="nextPageBtn" class="px-3 py-1.5 bg-neutral-100 dark:bg-neutral-700 disabled:opacity-50 rounded-lg">Next</button>
      </div>
    </div>
  </div>

  <!-- Row detail modal -->
  <div id="flexibleDetailModal" class="hidden fixed inset-0 bg-black/60 z-50 overflow-y-auto" aria-hidden="true">
    <div class="flex min-h-full items-center justify-center p-4">
      <div class="bg-white dark:bg-neutral-800 rounded-xl shadow-xl max-w-4xl w-full max-h-[85vh] overflow-hidden">
        <div class="flex items-center justify-between px-6 py-4 border-b border-neutral-200 dark:border-neutral-700">
          <h2 class="text-lg font-semibold">Flexible Row <span id="detailRowId"></span></h2>
          <div class="flex items-center gap-2">
            <button id="detailExportBtn" class="px-3 py-1.5 bg-primary-600 hover:bg-primary-700 text-white rounded-lg text-sm">
              <i class="fa-solid fa-file-csv mr-1"></i> Export CSV
            </button>
            <button onclick="closeModal('flexibleDetailModal')" class="text-neutral-500 hover:text-neutral-700">
              <i class="fa-solid fa-xmark text-xl"></i>
            </button>
          </div>
        </div>
        <div class="p-4">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-3 mb-3 text-xs text-neutral-600 dark:text-neutral-300">
            <div>File Type: <span id="detailFileType" class="font-mono"></span></div>
            <div>Target Table: <span id="detailTargetTable" class="font-mono"></span></div>
            <div>PK Field: <span id="detailPkField" class="font-mono"></span></div>
            <div>PK Value: <span id="detailPkValue" class="font-mono"></span></div>
          </div>
          <div class="border border-neutral-200 dark:border-neutral-700 rounded-lg overflow-hidden">
            <pre id="detailJson" class="p-4 text-xs bg-neutral-50 dark:bg-neutral-900 overflow-auto max-h-[60vh]"></pre>
          </div>
        </div>
        <div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-800/50">
          <button onclick="closeModal('flexibleDetailModal')" class="px-4 py-2 bg-neutral-100 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-600 rounded-lg transition-colors duration-200">
            Close
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script src="/static/js/flexible.js"></script>
{% endblock %}