{% load static %}
<div class="flex bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 h-[210px] relative border border-gray-200 dark:border-gray-700 transition-colors duration-300">
  <!-- 좌측: 사진 + 버튼 -->
  <div class="flex flex-col items-center mr-4 w-[150px]">
    <img 
      src="{% static person.사진 %}" 
      alt="{{ person.이름 }}" 
      class="w-[150px] h-[150px] object-cover rounded-lg border border-gray-300 dark:border-gray-600 mb-2 cursor-pointer transition-colors duration-300"
      onclick="openModal(this.src)"
    >
    <a 
        href="{% url 'vcard_download' person.이름 %}"
        class="inline-block bg-blue-600 dark:bg-blue-900 text-white text-xs px-3 py-1 rounded hover:bg-blue-700 dark:hover:bg-blue-800 text-center transition-colors duration-200"
        >
        📇연락처저장
    </a>
  </div>

  <!-- 우측: 텍스트 정보 -->
  <div class="flex flex-col justify-start w-full overflow-hidden">
    <div class="flex justify-between items-baseline">
      <div class="mb-4">
        <h2 class="text-lg font-semibold truncate leading-tight flex-1 text-gray-900 dark:text-gray-100">
          {{ person.이름 }}
          {% if person.생년월일 %}
            <span class="text-sm text-gray-500 dark:text-gray-400 ml-1">({{ person.생년월일 }})</span>
          {% endif %}
        </h2>
      </div>
      {% if person.TITLE %}
        {% if person.TITLE == '회장' or person.TITLE == '수석부회장' or person.TITLE == '선임상임부회장' or person.TITLE == '고문회장'%}
          <span class="text-xs text-blue-600 dark:text-blue-400 font-bold">
            {{ person.TITLE }}
          </span>
        {% elif "경조국" in person.TITLE or "기획사무국" in person.TITLE or "홍보국" in person.TITLE or "친교문화국" in person.TITLE or "재무국" in person.TITLE %}
          <span class="text-xs text-yellow-600 dark:text-yellow-500 font-semibold">
            {{ person.TITLE }}
          </span>
        {% else %}
          <span class="text-xs text-violet-600 dark:text-violet-400 font-semibold">
            {{ person.TITLE }}
          </span>
        {% endif %}
      {% endif %}
    </div>

    <div class="mt-1 text-xs leading-snug overflow-hidden max-h-[138px] flex flex-col gap-y-1">
      <div class="flex mb-1">
        <span class="w-[60px] text-gray-500 dark:text-gray-400">소속:</span>
        <span class="flex-1 truncate text-gray-800 dark:text-gray-200">{{ person.소속 }}</span>
      </div>
      <div class="flex mb-1">
        <span class="w-[60px] text-gray-500 dark:text-gray-400">직책:</span>
        <span class="flex-1 truncate text-gray-800 dark:text-gray-200">{{ person.직책 }}</span>
      </div>
      <div class="flex mb-1">
        <span class="w-[60px] text-gray-500 dark:text-gray-400">연락처:</span>
        <span class="flex-1 truncate text-gray-800 dark:text-gray-200">{{ person.연락처 }}</span>
      </div>
      <div class="flex">
        {% if person.이름 == '허남식' %}
          <span class="w-[60px] text-gray-500 dark:text-gray-400">이메일:</span>
        {% else %}
          <span class="w-[60px] text-gray-500 dark:text-gray-400">주소:</span>
        {% endif %}
        <span class="flex-1 text-gray-800 dark:text-gray-200">{{ person.주소 }}</span>
      </div>
    </div>
  </div>
</div>

<!-- 📸 모달 컴포넌트 -->
<div id="image-modal" class="fixed inset-0 bg-black bg-opacity-70 dark:bg-black dark:bg-opacity-80 z-50 flex items-center justify-center hidden transition-opacity duration-300" onclick="closeModal()">
  <div class="relative">
    <img id="modal-image" src="" class="max-w-[90vh] h-[60vh] w-auto rounded-lg border-4 border-white dark:border-gray-300 shadow-xl" alt="확대 이미지">
    <!-- 닫기 버튼 -->
    <button 
      onclick="closeModal()" 
      class="absolute top-2 right-2 bg-white dark:bg-gray-800 text-gray-800 dark:text-white rounded-full w-8 h-8 flex items-center justify-center hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200"
      aria-label="닫기"
    >
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
      </svg>
    </button>
  </div>
</div>

<script>
  function openModal(src) {
    const modal = document.getElementById('image-modal');
    const modalImg = document.getElementById('modal-image');
    modalImg.src = src;
    modal.classList.remove('hidden');
    // 스크롤 방지
    document.body.style.overflow = 'hidden';
  }

  function closeModal() {
    const modal = document.getElementById('image-modal');
    modal.classList.add('hidden');
    // 스크롤 복원
    document.body.style.overflow = 'auto';
  }

  // ESC 키로 모달 닫기
  document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape') {
      closeModal();
    }
  });
</script>