{% extends "admin/base.html" %}

{% block title %}{% if is_edit %}Edit{% else %}Tambah{% endif %} Visi & Misi HMI{% endblock %}

{% block content %}
<div class="min-h-screen bg-gray-50 p-4 sm:p-6 lg:p-8">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6">
        <div class="mb-4 sm:mb-0">
            <h1 class="text-2xl sm:text-3xl font-bold text-gray-900">
                {% if is_edit %}Edit{% else %}Tambah{% endif %} Visi & Misi HMI
            </h1>
            <p class="text-gray-600 mt-1">
                {% if is_edit %}Perbarui visi/misi{% else %}Tambahkan visi/misi baru{% endif %}
            </p>
        </div>
        <div>
            <a href="{% url 'admin_panel:tentang_hmi:visi_misi' %}" class="inline-flex items-center px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors">
                <i class="fas fa-arrow-left mr-2"></i>Kembali
            </a>
        </div>
    </div>

    <!-- Form -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="lg:col-span-2">
            <div class="bg-white rounded-lg shadow-sm">
                <div class="px-4 sm:px-6 py-4 border-b border-gray-200">
                    <h6 class="text-lg font-semibold text-gray-900">Informasi Visi & Misi</h6>
                </div>
                <div class="p-4 sm:p-6">
                    <form method="post">
                        {% csrf_token %}
                        
                        <div class="mb-4">
                            <label for="tipe" class="block text-sm font-medium text-gray-700 mb-2">Tipe <span class="text-red-500">*</span></label>
                            <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                                    id="tipe" name="tipe" required>
                                {% for value, label in tipe_choices %}
                                <option value="{{ value }}" {% if visi_misi and visi_misi.tipe == value %}selected{% endif %}>{{ label }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <div class="mb-4">
                            <label for="konten" class="block text-sm font-medium text-gray-700 mb-2">Konten <span class="text-red-500">*</span></label>
                            <textarea class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                                      id="konten" name="konten" rows="6" required>{% if visi_misi %}{{ visi_misi.konten }}{% endif %}</textarea>
                            <p class="text-sm text-gray-500 mt-1">
                                Tulis visi, misi, atau tujuan dengan jelas dan mudah dipahami
                            </p>
                        </div>

                        <div class="mb-6">
                            <div class="flex items-center">
                                <input class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" type="checkbox" id="aktif" name="aktif" 
                                       {% if not visi_misi or visi_misi.aktif %}checked{% endif %}>
                                <label class="ml-2 text-sm text-gray-700" for="aktif">Aktif</label>
                            </div>
                        </div>

                        <div class="flex flex-col sm:flex-row gap-3">
                            <button type="submit" class="inline-flex items-center justify-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                                <i class="fas fa-save mr-2"></i>
                                {% if is_edit %}Perbarui{% else %}Simpan{% endif %}
                            </button>
                            <a href="{% url 'admin_panel:tentang_hmi:visi_misi' %}" class="inline-flex items-center justify-center px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors">
                                <i class="fas fa-times mr-2"></i>Batal
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="space-y-6">
            <div class="bg-white rounded-lg shadow-sm">
                <div class="px-4 sm:px-6 py-4 border-b border-gray-200">
                    <h6 class="text-lg font-semibold text-gray-900">Panduan Penulisan</h6>
                </div>
                <div class="p-4 sm:p-6">
                    <div class="mb-6">
                        <h6 class="text-blue-600 font-medium mb-2">Visi</h6>
                        <p class="text-sm text-gray-600">
                            Pernyataan tentang tujuan jangka panjang yang ingin dicapai HMI. 
                            Harus inspiratif, jelas, dan dapat diukur.
                        </p>
                    </div>
                    
                    <div class="mb-6">
                        <h6 class="text-blue-500 font-medium mb-2">Misi</h6>
                        <p class="text-sm text-gray-600">
                            Pernyataan tentang cara-cara yang akan dilakukan untuk mencapai visi. 
                            Berisi langkah-langkah konkret dan dapat dijalankan.
                        </p>
                    </div>
                    
                    <div class="mb-0">
                        <h6 class="text-green-600 font-medium mb-2">Tujuan</h6>
                        <p class="text-sm text-gray-600">
                            Sasaran-sasaran spesifik yang ingin dicapai dalam periode tertentu. 
                            Lebih detail dan terukur dibanding visi.
                        </p>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-lg shadow-sm">
                <div class="px-4 sm:px-6 py-4 border-b border-gray-200">
                    <h6 class="text-lg font-semibold text-gray-900">Tips</h6>
                </div>
                <div class="p-4 sm:p-6">
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mr-3 mt-1"></i>
                            <span class="text-sm text-gray-700">Gunakan bahasa yang mudah dipahami</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mr-3 mt-1"></i>
                            <span class="text-sm text-gray-700">Hindari kalimat yang terlalu panjang</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mr-3 mt-1"></i>
                            <span class="text-sm text-gray-700">Sesuaikan dengan nilai-nilai Islam</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mr-3 mt-1"></i>
                            <span class="text-sm text-gray-700">Pastikan dapat diimplementasikan</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mr-3 mt-1"></i>
                            <span class="text-sm text-gray-700">Review dan update secara berkala</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}