{% extends 'public/base.html' %} 
{% load static %} 

{% block content %}
<style>
  .hero-section {
    min-height: 60vh;
    position: relative;
  }

  .hero-background {
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .hero-overlay {
    background: linear-gradient(
      135deg,
      rgba(34, 197, 94, 0.7) 0%,
      rgba(21, 128, 61, 0.7) 100%
    );
  }

  @media (max-width: 768px) {
    .hero-background {
      background-attachment: scroll;
    }
  }
</style>

<!-- Bagian Profil Desa (Hero Section) -->
<section class="hero-section relative py-8 sm:py-12 lg:py-16 overflow-hidden">
  <!-- Latar Belakang Gambar atau Gradien -->
  {% if village_profile.profile_image %}
  <div
    class="hero-background absolute inset-0"
    style="background-image: url('{{ village_profile.profile_image.url }}');"
  ></div>
  <div class="hero-overlay absolute inset-0"></div>
  {% else %}
  <div
    class="absolute inset-0 bg-gradient-to-br from-green-600 to-green-700"
  ></div>
  {% endif %}

  <!-- Konten Profil -->
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
    <div class="text-center text-white">
      <!-- Logo Desa -->
      {% if village_profile.logo %}
      <img
        src="{{ village_profile.logo.url }}"
        alt="Logo Desa"
        class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-full object-cover border-4 border-white/30 mx-auto mb-4 sm:mb-6 shadow-lg"
        loading="eager"
      />
      {% else %}
      <div
        class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-full bg-white/20 flex items-center justify-center mx-auto mb-4 sm:mb-6 shadow-lg"
      >
        <i class="fas fa-mountain text-2xl sm:text-3xl"></i>
      </div>
      {% endif %}

      <!-- Nama dan Lokasi Desa -->
      <h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold mb-2">
        {{ village_profile.name|default:"Desa Pulosarok" }}
      </h1>
      <p class="text-sm sm:text-base lg:text-lg opacity-90 mb-4">
        {{ village_profile.district|default:"Singkil" }}, {{ village_profile.regency|default:"Kabupaten Aceh Singkil" }}, {{ village_profile.province|default:"Aceh" }}
      </p>

      <!-- Deskripsi Singkat -->
      <div
        class="text-xs sm:text-sm lg:text-base opacity-90 max-w-3xl mx-auto leading-relaxed"
      >
        {{ village_profile.description|default:"Desa Pulosarok adalah desa yang terletak di Kecamatan Singkil, Kabupaten Aceh Singkil, Aceh."|safe }}
      </div>
    </div>
  </div>
</section>
<!-- Akhir Bagian Profil Desa -->

<!-- Bagian Visi & Misi -->
{% if village_profile.vision or village_profile.mission %}
<section class="py-6 sm:py-8 bg-gray-50">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div
      class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 sm:p-6"
    >
      {% if village_profile.vision %}
      <div class="mb-6">
        <h3
          class="text-lg sm:text-xl font-bold text-blue-600 mb-3 flex items-center"
        >
          <i class="fas fa-bullseye mr-2 text-sm"></i>Visi Desa
        </h3>
        <div class="text-sm sm:text-base text-gray-700 leading-relaxed italic">
          "{{ village_profile.vision|safe }}"
        </div>
      </div>
      {% endif %} {% if village_profile.mission %}
      <div>
        <h3
          class="text-lg sm:text-xl font-bold text-blue-600 mb-3 flex items-center"
        >
          <i class="fas fa-target mr-2 text-sm"></i>Misi Desa
        </h3>
        <ul class="space-y-2">
          {% for mission in village_profile.mission_list %}
          <li class="flex items-start text-sm sm:text-base text-gray-700">
            <span class="text-blue-600 font-bold mr-2 mt-0.5">✓</span>
            <span>{{ mission }}</span>
          </li>
          {% endfor %}
        </ul>
      </div>
      {% endif %}
    </div>
  </div>
</section>
{% endif %}
<!-- Akhir Bagian Visi & Misi -->

<!-- Bagian Perangkat Desa -->
{% if officials_data %}
<section class="py-6 sm:py-8 bg-white">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2
      class="text-xl sm:text-2xl lg:text-3xl font-bold text-center text-gray-900 mb-6 sm:mb-8"
    >
      Perangkat Desa
    </h2>
    <div
      class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3 sm:gap-4"
    >
      {% for official in officials_data %}
      <div
        class="bg-white rounded-lg shadow-sm border border-gray-200 p-2 sm:p-4 text-center hover:shadow-md transition-shadow duration-200"
      >
        <!-- Foto Pejabat -->
        {% if official.photo %}
        <img
          src="{{ official.photo.url }}"
          alt="{{ official.name }}"
          class="w-12 h-12 sm:w-16 sm:h-16 rounded-full object-cover border-2 border-blue-500 mx-auto mb-2 sm:mb-3"
        />
        {% else %}
        <div
          class="w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-blue-500 flex items-center justify-center text-white mx-auto mb-2 sm:mb-3"
        >
          <i class="fas fa-user text-sm sm:text-lg"></i>
        </div>
        {% endif %}

        <!-- Detail Pejabat -->
        <h4 class="text-xs sm:text-sm font-semibold text-gray-900 mb-1">
          {{ official.name }}
        </h4>
        <p class="text-xs text-blue-600 mb-1">
          {{ official.position_display }}
        </p>

        {% if official.education %}
        <p class="text-xs text-gray-500 mb-1">
          <i class="fas fa-graduation-cap mr-1"></i>{{ official.education }}
        </p>
        {% endif %} {% if official.phone %}
        <p class="text-xs text-gray-500">
          <i class="fas fa-phone mr-1"></i>{{ official.phone }}
        </p>
        {% endif %}
      </div>
      {% endfor %}
    </div>
  </div>
</section>
{% endif %}
<!-- Akhir Bagian Perangkat Desa -->

<!-- Bagian Fasilitas Desa -->
{% if facilities %}
<section class="py-6 sm:py-8 bg-gray-50">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2
      class="text-xl sm:text-2xl lg:text-3xl font-bold text-center text-gray-900 mb-6 sm:mb-8"
    >
      Fasilitas Desa
    </h2>
    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-4">
      {% for facility in facilities %}
      <div
        class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow duration-200"
      >
        <!-- Gambar Fasilitas -->
        {% if facility.image %}
        <img
          src="{{ facility.image.url }}"
          alt="{{ facility.name }}"
          class="w-full h-32 sm:h-40 object-cover"
        />
        {% else %}
        <div
          class="w-full h-32 sm:h-40 bg-blue-500 flex items-center justify-center text-white"
        >
          <i class="fas fa-building text-2xl sm:text-3xl"></i>
        </div>
        {% endif %}

        <!-- Detail Fasilitas -->
        <div class="p-2 sm:p-3">
          <h4 class="text-xs sm:text-sm font-semibold text-gray-900 mb-1">
            {{ facility.name }}
          </h4>
          <p class="text-xs text-blue-600 mb-1">
            {{ facility.get_type_display }}
          </p>
          <p class="text-xs text-gray-600 mb-2 line-clamp-2">
            {{ facility.description|truncatewords:10 }}
          </p>
          <div class="flex justify-between items-center">
            <span
              class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium {% if facility.condition == 'BAIK' %}bg-green-100 text-green-800 {% elif facility.condition == 'CUKUP' %}bg-yellow-100 text-yellow-800 {% else %}bg-red-100 text-red-800 {% endif %}"
            >
              {{ facility.get_condition_display }}
            </span>
            <small class="text-xs text-gray-500">{{ facility.location }}</small>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</section>
{% endif %}
<!-- Akhir Bagian Fasilitas Desa -->

<!-- Bagian Galeri Foto -->
{% if gallery_photos %}
<section class="py-6 sm:py-8 bg-white">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2
      class="text-xl sm:text-2xl lg:text-3xl font-bold text-center text-gray-900 mb-6 sm:mb-8"
    >
      Galeri Foto
    </h2>
    <div
      class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3 sm:gap-4"
    >
      {% for photo in gallery_photos %}
      <div
        class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow duration-200"
      >
        <!-- Gambar Galeri -->
        {% if photo.image %}
        <img
          src="{{ photo.image.url }}"
          alt="{{ photo.title }}"
          class="w-full h-32 sm:h-40 object-cover"
        />
        {% else %}
        <div
          class="w-full h-32 sm:h-40 bg-blue-500 flex items-center justify-center text-white"
        >
          <i class="fas fa-camera text-2xl sm:text-3xl"></i>
        </div>
        {% endif %}

        <!-- Detail Galeri -->
        <div class="p-2 sm:p-3">
          <h4
            class="text-xs sm:text-sm font-semibold text-gray-900 mb-1 line-clamp-2"
          >
            {{ photo.title }}
          </h4>
          <p class="text-xs text-gray-600 mb-2 line-clamp-2">
            {{ photo.description|truncatewords:8 }}
          </p>
          <div class="flex flex-wrap gap-1 mb-2">
            <span
              class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800"
            >
              {{ photo.get_photo_type_display }}
            </span>
            {% if photo.is_featured %}
            <span
              class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800"
            >
              Unggulan
            </span>
            {% endif %}
          </div>

          {% if photo.photographer %}
          <p class="text-xs text-gray-500 mb-1">
            <i class="fas fa-user mr-1"></i>{{ photo.photographer }}
          </p>
          {% endif %} {% if photo.location %}
          <p class="text-xs text-gray-500">
            <i class="fas fa-map-marker-alt mr-1"></i>{{ photo.location }}
          </p>
          {% endif %}
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</section>
{% endif %}
<!-- Akhir Bagian Galeri Foto -->

<!-- Bagian Informasi Tambahan -->
<section class="py-6 sm:py-8 bg-gray-50">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 sm:gap-8">
      <!-- Lokasi dan Kontak -->
      <div
        class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 sm:p-6"
      >
        <h3
          class="text-lg sm:text-xl font-bold text-gray-900 mb-4 flex items-center"
        >
          <i class="fas fa-map-marker-alt mr-2 text-blue-600"></i>Lokasi Desa
        </h3>
        <p class="text-sm sm:text-base text-gray-600 mb-3">
          {{ village_profile.district|default:"Singkil" }}, {{ village_profile.regency|default:"Kabupaten Aceh Singkil" }}, {{ village_profile.province|default:"Aceh" }}
        </p>

        {% if village_profile.phone %}
        <p class="text-sm text-gray-600 mb-2">
          <i class="fas fa-phone mr-2 text-green-600"></i>{{ village_profile.phone }}
        </p>
        {% endif %} {% if village_profile.email %}
        <p class="text-sm text-gray-600">
          <i class="fas fa-envelope mr-2 text-blue-600"></i>{{ village_profile.email }}
        </p>
        {% endif %}
      </div>

      <!-- Detail Informasi Desa -->
      <div
        class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 sm:p-6"
      >
        <h3
          class="text-lg sm:text-xl font-bold text-gray-900 mb-4 flex items-center"
        >
          <i class="fas fa-info-circle mr-2 text-blue-600"></i>Informasi Desa
        </h3>
        <div class="space-y-2">
          <p class="text-sm sm:text-base text-gray-600">
            <span class="font-medium">Kepala Desa:</span> {{ village_profile.village_head|default:"-" }}
          </p>
          <p class="text-sm sm:text-base text-gray-600">
            <span class="font-medium">Luas Wilayah:</span> {{ village_profile.area|default:"10.5" }} km²
          </p>
          <p class="text-sm sm:text-base text-gray-600">
            <span class="font-medium">Kode Pos:</span> {{ village_profile.postal_code|default:"92700" }}
          </p>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- Akhir Bagian Informasi Tambahan -->


{% endblock content %}