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

{% block title %}{% if action == 'edit' %}Edit Role{% else %}Tambah Role{% endif %}{% endblock %}

{% block content %}
<div class="p-6">
    <!-- Header -->
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">
                {% if action == 'edit' %}
                    <i class="fas fa-edit text-green-600 mr-2"></i>Edit Role
                {% else %}
                    <i class="fas fa-plus text-green-600 mr-2"></i>Tambah Role Baru
                {% endif %}
            </h1>
            <p class="text-gray-600 mt-1">
                {% if action == 'edit' %}
                    Perbarui informasi role
                {% else %}
                    Tambahkan role baru untuk sistem
                {% endif %}
            </p>
        </div>
        <a href="{% url 'admin_panel:role_admin:role_list' %}" 
           class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-4 py-2 rounded-lg flex items-center">
            <i class="fas fa-arrow-left mr-2"></i>Kembali
        </a>
    </div>

    <!-- Form -->
    <div class="bg-white rounded-xl shadow-lg p-6">
        <form method="post" class="space-y-6">
            {% csrf_token %}
            
            <!-- Name -->
            <div>
                <label for="{{ form.name.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                    Nama Role <span class="text-red-500">*</span>
                </label>
                <div class="relative">
                    {{ form.name }}
                    {% if form.name.errors %}
                        <div class="mt-1 text-sm text-red-600">{{ form.name.errors.0 }}</div>
                    {% endif %}
                </div>
            </div>

            <!-- Role Type -->
            <div>
                <label for="{{ form.role_type.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                    Tipe Role <span class="text-red-500">*</span>
                </label>
                <div class="relative">
                    {{ form.role_type }}
                    <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                        <i class="fas fa-chevron-down text-gray-400"></i>
                    </div>
                    {% if form.role_type.errors %}
                        <div class="mt-1 text-sm text-red-600">{{ form.role_type.errors.0 }}</div>
                    {% endif %}
                </div>
            </div>

            <!-- Description -->
            <div>
                <label for="{{ form.description.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                    Deskripsi
                </label>
                <div class="relative">
                    {{ form.description }}
                    {% if form.description.errors %}
                        <div class="mt-1 text-sm text-red-600">{{ form.description.errors.0 }}</div>
                    {% endif %}
                </div>
            </div>

            <!-- Permissions -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">
                    Permissions
                </label>
                <div class="border border-gray-300 rounded-lg p-4 max-h-64 overflow-y-auto">
                    {% if form.permissions %}
                        {{ form.permissions }}
                    {% else %}
                        <p class="text-sm text-gray-500">Tidak ada permission tersedia. <a href="{% url 'admin_panel:role_admin:permission_create' %}" class="text-green-600 hover:text-green-800">Buat permission baru</a></p>
                    {% endif %}
                </div>
                {% if form.permissions.errors %}
                    <div class="mt-1 text-sm text-red-600">{{ form.permissions.errors.0 }}</div>
                {% endif %}
            </div>

            <!-- Is Active -->
            <div class="flex items-center">
                {{ form.is_active }}
                <label for="{{ form.is_active.id_for_label }}" class="ml-2 text-sm font-medium text-gray-700">
                    Aktif
                </label>
                {% if form.is_active.errors %}
                    <div class="ml-2 text-sm text-red-600">{{ form.is_active.errors.0 }}</div>
                {% endif %}
            </div>

            <!-- Form Actions -->
            <div class="flex items-center justify-end space-x-3 pt-4 border-t border-gray-200">
                <a href="{% url 'admin_panel:role_admin:role_list' %}" 
                   class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-6 py-2 rounded-lg">
                    Batal
                </a>
                <button type="submit" 
                        class="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-lg">
                    <i class="fas fa-save mr-2"></i>Simpan
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}