{% load static %}
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>신라대학교 AMP 제8기</title>
  <script src="https://unpkg.com/htmx.org@1.9.5"></script>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-900 text-gray-100 min-h-screen">
  <div class="max-w-5xl mx-auto px-4 py-8">
    <h1 class="text-3xl font-bold text-center mb-6">신라대학교 AMP 제8기</h1>

    <!-- 검색창 -->
    <div class="mb-6">
      <input 
        id="search-input"
        type="text" 
        name="search"
        placeholder="검색..." 
        class="w-full px-4 py-2 rounded-lg bg-gray-800 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
        hx-get="/search/"
        hx-trigger="keyup changed delay:200ms"
        hx-target="#card-container"
        hx-include="#search-input"
        autocomplete="off"
      >
    </div>

    <!-- 카드 목록 -->
    <div id="card-container" class="grid grid-cols-1 sm:grid-cols-2 gap-4">
      {% for person in people %}
        {% include 'B_main/partials/card.htm' %}
      {% endfor %}
    </div>
  </div>
</body>
</html>
