{% extends "layouts/base.html" %}
{% load i18n %}

{% block title %}{% if source_user %}{% trans "Edit Source User" %}{% else %}{% trans "Create Source User" %}{% endif %} - {{ source.name_en }}{% endblock %}

{% block content %}
<div class="p-6">
    <!-- Breadcrumb -->
    <nav class="mb-4">
        <ol class="flex items-center gap-2 text-sm text-slate">
            <li><a href="{% url 'px_sources:source_list' %}" class="text-blue hover:text-navy">{% trans "PX Sources" %}</a></li>
            <li><i data-lucide="chevron-right" class="w-4 h-4"></i></li>
            <li><a href="{% url 'px_sources:source_detail' source.pk %}" class="text-blue hover:text-navy">{{ source.name_en }}</a></li>
            <li><i data-lucide="chevron-right" class="w-4 h-4"></i></li>
            <li class="text-navy font-semibold">
                {% if source_user %}{% trans "Edit Source User" %}{% else %}{% trans "Create Source User" %}{% endif %}
            </li>
        </ol>
    </nav>

    <!-- Page Header -->
    <div class="flex flex-wrap justify-between items-center gap-4 mb-6">
        <div>
            <h1 class="text-2xl font-bold text-navy flex items-center gap-3">
                {% if source_user %}
                    <i data-lucide="user-cog" class="w-8 h-8 text-blue"></i>{% trans "Edit Source User" %}
                {% else %}
                    <i data-lucide="user-plus" class="w-8 h-8 text-blue"></i>{% trans "Create Source User" %}
                {% endif %}
            </h1>
            <p class="text-slate mt-1">{{ source.name_en }}</p>
        </div>
        <div>
            <a href="{% url 'px_sources:source_detail' source.pk %}" 
               class="inline-flex items-center gap-2 px-4 py-2 border border-slate-200 text-slate-700 rounded-lg hover:bg-slate-50 transition">
                <i data-lucide="arrow-left" class="w-4 h-4"></i> {% trans "Back to Source" %}
            </a>
        </div>
    </div>

    <!-- Form Card -->
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 max-w-3xl">
        <div class="p-4 border-b border-slate-200 bg-slate-50/50 rounded-t-xl">
            <h2 class="text-lg font-semibold text-navy flex items-center gap-2">
                <i data-lucide="settings" class="w-5 h-5 text-slate"></i>
                {% trans "Source User Details" %}
            </h2>
        </div>
        <div class="p-6">
            <form method="POST" novalidate>
                {% csrf_token %}
                
                {% if not source_user %}
                <!-- User Selection (only for new source users) -->
                <div class="mb-4">
                    <label for="id_user" class="block text-sm font-semibold text-navy mb-2">
                        {% trans "User" %} <span class="text-red-500">*</span>
                    </label>
                    <select name="user" id="id_user" required
                            class="w-full px-4 py-2 border border-slate-200 rounded-lg focus:outline-none focus:border-blue focus:ring-2 focus:ring-blue/20 bg-white">
                        <option value="">{% trans "Select a user" %}</option>
                        {% for user in available_users %}
                            <option value="{{ user.id }}" {% if form.user.value == user.id %}selected{% endif %}>
                                {{ user.email }} {% if user.get_full_name %}({{ user.get_full_name }}){% endif %}
                            </option>
                        {% endfor %}
                    </select>
                    <p class="text-slate text-sm mt-1">
                        {% trans "Select a user to assign as source user. A user can only manage one source." %}
                    </p>
                </div>
                {% else %}
                <!-- User Display (for editing) -->
                <div class="mb-4">
                    <label class="block text-sm font-semibold text-navy mb-2">{% trans "User" %}</label>
                    <input type="text" 
                           value="{{ source_user.user.email }} {% if source_user.user.get_full_name %}({{ source_user.user.get_full_name }}){% endif %}" 
                           readonly
                           class="w-full px-4 py-2 border border-slate-200 rounded-lg bg-slate-100 text-slate-600 cursor-not-allowed">
                </div>
                {% endif %}

                <!-- Status -->
                <div class="mb-6">
                    <label class="block text-sm font-semibold text-navy mb-2">{% trans "Status" %}</label>
                    <label class="flex items-center gap-3 cursor-pointer">
                        <input type="checkbox" name="is_active" id="id_is_active" 
                               {% if source_user.is_active|default:True %}checked{% endif %}
                               class="w-5 h-5 text-navy border-slate-300 rounded focus:ring-blue">
                        <span class="text-navy font-medium">{% trans "Active" %}</span>
                    </label>
                    <p class="text-slate text-sm mt-1">
                        {% trans "Inactive users will not be able to access their dashboard." %}
                    </p>
                </div>

                <div class="border-t border-slate-200 my-6"></div>

                <!-- Permissions -->
                <h5 class="text-lg font-semibold text-navy mb-4">{% trans "Permissions" %}</h5>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                    <div>
                        <label class="flex items-center gap-3 cursor-pointer">
                            <input type="checkbox" name="can_create_complaints" id="id_can_create_complaints" 
                                   {% if source_user.can_create_complaints|default:True %}checked{% endif %}
                                   class="w-5 h-5 text-navy border-slate-300 rounded focus:ring-blue">
                            <span class="text-navy">{% trans "Can create complaints" %}</span>
                        </label>
                    </div>
                    <div>
                        <label class="flex items-center gap-3 cursor-pointer">
                            <input type="checkbox" name="can_create_inquiries" id="id_can_create_inquiries" 
                                   {% if source_user.can_create_inquiries|default:True %}checked{% endif %}
                                   class="w-5 h-5 text-navy border-slate-300 rounded focus:ring-blue">
                            <span class="text-navy">{% trans "Can create inquiries" %}</span>
                        </label>
                    </div>
                </div>

                <!-- Info Alert -->
                <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
                    <div class="flex items-center gap-3">
                        <i data-lucide="info" class="w-5 h-5 text-blue-600"></i>
                        <span class="text-blue-700 text-sm">{% trans "Permissions control what the source user can do in their dashboard. Uncheck to restrict access." %}</span>
                    </div>
                </div>

                <!-- Submit Buttons -->
                <div class="border-t border-slate-200 pt-4 flex gap-3">
                    <button type="submit" 
                            class="inline-flex items-center gap-2 px-6 py-2 bg-navy text-white rounded-lg hover:bg-blue transition shadow-lg shadow-navy/20">
                        <i data-lucide="check" class="w-4 h-4"></i> {% trans "Save" %}
                    </button>
                    <a href="{% url 'px_sources:source_detail' source.pk %}" 
                       class="inline-flex items-center gap-2 px-6 py-2 border border-slate-200 text-slate-700 rounded-lg hover:bg-slate-50 transition">
                        <i data-lucide="x" class="w-4 h-4"></i> {% trans "Cancel" %}
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    lucide.createIcons();
});
</script>
{% endblock %}