{% load static %}
<div class="flex bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 min-h-[210px] relative border border-gray-200 dark:border-gray-700 transition-colors duration-300">
  <!-- 좌측: 사진 + 버튼 -->
  <div class="flex flex-col mr-4 w-[150px]">
    <div class="flex flex-col items-center flex-grow">
      {% if person.사진 and person.사진.url and 'media/' in person.사진.url %}
        <img 
          src="{{ person.사진.url }}" 
          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="openProfileModal('{{ person.이름|escapejs }}', this.src, '{{ person.소개글|default:""|escapejs }}')"
        >
      {% else %}
        <img 
          src="{% static 'B_main/images/default_user.png' %}" 
          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="openProfileModal('{{ person.이름|escapejs }}', this.src, '{{ person.소개글|default:""|escapejs }}')"
        >
      {% endif %}
    </div>
    {% if person.이름 %}
    <div class="mt-auto">
      <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 w-full"
          >
          📇연락처저장
      </a>
    </div>
    {% endif %}
  </div>

  <!-- 우측: 텍스트 정보 -->
  <div class="flex flex-col 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 {% if person.user %}text-gray-900 dark:text-gray-100{% else %}text-blue-600 dark:text-blue-400{% endif %}">
          {{ person.이름 }}
          {% if person.생년월일 %}
            <span class="text-sm text-gray-500 dark:text-gray-400 ml-1">({{ person.생년월일|date:"Y년 m월 d일" }})</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="flex-grow flex flex-col">
      <div class="text-xs leading-tight flex flex-col gap-y-0.5">
        <div class="flex mb-0.5">
          <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-0.5">
          <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-0.5">
          <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>
      
      <!-- 소개글 박스 추가 (하단 정렬) -->
      {% if person.소개글 %}
      <div class="mt-auto pt-1">
        <div class="bg-gray-100 dark:bg-gray-700 rounded-md px-2 py-1">
          <div class="text-gray-700 dark:text-gray-300 text-xs leading-tight line-clamp-2">
            {{ person.소개글 }}
          </div>
        </div>
      </div>
      {% endif %}
    </div>
  </div>
</div>