{% 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="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-2">
                    <li class="breadcrumb-item">
                        <a href="{% url 'px_sources:source_list' %}">{% trans "PX Sources" %}</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="{% url 'px_sources:source_detail' source.pk %}">{{ source.name_en }}</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        {% if source_user %}{% trans "Edit Source User" %}{% else %}{% trans "Create Source User" %}{% endif %}
                    </li>
                </ol>
            </nav>
            <h2 class="mb-1">
                {% if source_user %}
                    <i class="bi bi-person-gear me-2"></i>{% trans "Edit Source User" %}
                {% else %}
                    <i class="bi bi-person-plus me-2"></i>{% trans "Create Source User" %}
                {% endif %}
            </h2>
            <p class="text-muted mb-0">
                {{ source.name_en }}
            </p>
        </div>
        <div>
            <a href="{% url 'px_sources:source_detail' source.pk %}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left me-1"></i> {% trans "Back to Source" %}
            </a>
        </div>
    </div>

    <!-- Form Card -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="bi bi-gear me-2"></i>{% trans "Source User Details" %}
                    </h5>
                </div>
                <div class="card-body">
                    <form method="POST" novalidate>
                        {% csrf_token %}
                        
                        {% if not source_user %}
                        <!-- User Selection (only for new source users) -->
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="id_user" class="form-label">{% trans "User" %} <span class="text-danger">*</span></label>
                                <select name="user" id="id_user" class="form-select" required>
                                    <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>
                                <div class="form-text">
                                    {% trans "Select a user to assign as source user. A user can only manage one source." %}
                                </div>
                            </div>
                        </div>
                        {% else %}
                        <!-- User Display (for editing) -->
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">{% trans "User" %}</label>
                                <input type="text" class="form-control" value="{{ source_user.user.email }} {% if source_user.user.get_full_name %}({{ source_user.user.get_full_name }}){% endif %}" readonly>
                            </div>
                        </div>
                        {% endif %}

                        <!-- Status -->
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">{% trans "Status" %}</label>
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" name="is_active" id="id_is_active" {% if source_user.is_active|default:True %}checked{% endif %}>
                                    <label class="form-check-label" for="id_is_active">
                                        {% trans "Active" %}
                                    </label>
                                </div>
                                <div class="form-text">
                                    {% trans "Inactive users will not be able to access their dashboard." %}
                                </div>
                            </div>
                        </div>

                        <hr>

                        <!-- Permissions -->
                        <h5 class="mb-3">{% trans "Permissions" %}</h5>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="can_create_complaints" id="id_can_create_complaints" {% if source_user.can_create_complaints|default:True %}checked{% endif %}>
                                    <label class="form-check-label" for="id_can_create_complaints">
                                        {% trans "Can create complaints" %}
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="can_create_inquiries" id="id_can_create_inquiries" {% if source_user.can_create_inquiries|default:True %}checked{% endif %}>
                                    <label class="form-check-label" for="id_can_create_inquiries">
                                        {% trans "Can create inquiries" %}
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="alert alert-info">
                            <i class="bi bi-info-circle me-2"></i>
                            {% trans "Permissions control what the source user can do in their dashboard. Uncheck to restrict access." %}
                        </div>

                        <!-- Submit Buttons -->
                        <hr>

                        <div class="d-flex gap-2">
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-check-lg me-1"></i> {% trans "Save" %}
                            </button>
                            <a href="{% url 'px_sources:source_detail' source.pk %}" class="btn btn-outline-secondary">
                                <i class="bi bi-x-lg me-1"></i> {% trans "Cancel" %}
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}