{% extends "layout.html" %}
{% load static %}
{% load widget_tweaks %}

{% block layout_script %}
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const form = document.getElementById("formusers");

        if (form) {
            form.addEventListener("submit", function (event) {
                // 1. Bersihkan error lama jika ada
                const oldError = document.getElementById("pwd-error-msg");
                if (oldError) oldError.remove();

                // 2. Tentukan field mana yang mau divalidasi panjang karakternya
                // Pada mode create maupun update, yang diperiksa adalah input password baru (pwd_new)
                const pwdInput = document.querySelector('input[name="pwd_new"]');

                // 3. Jalankan validasi jika field ditemukan dan tidak kosong
                if (pwdInput && pwdInput.value !== "") {
                    if (pwdInput.value.length < 4) {
                        event.preventDefault(); // Batalkan submit

                        // Buat pesan error bergaya Bootstrap
                        const errorDiv = document.createElement("div");
                        errorDiv.id = "pwd-error-msg";
                        errorDiv.className = "text-danger small mt-1 font-weight-bold";
                        
                        // Pesan dinamis menyesuaikan status form
                        {% if is_update %}
                        errorDiv.innerText = "Password baru minimal harus 4 karakter!";
                        {% else %}
                        errorDiv.innerText = "Password minimal harus 4 karakter!";
                        {% endif %}

                        // Selipkan tepat di bawah input
                        pwdInput.parentNode.appendChild(errorDiv);
                        pwdInput.focus();
                    }
                }
            });
        }
    });
</script>
{% endblock %}

{% block layout_content %}
<div class="card mt-3" style="box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;">
    <form method="post" autocomplete="off" id="formusers" class="card-body">
        {% csrf_token %}

        <h5 class="card-title mt-0 clearfix">
            <span>Form Pengguna</span>
        </h5>

        {# Komponen alert 'extra/base_form_errors.html' telah dihapus dari sini agar halaman bersih #}

        <div class="row">
            <div class="col col-md-6">
                <div class="form-group">
                    {% render_field form.usr placeholder=form.usr.label title=form.usr.label class="form-control" %}
                </div>

                <div class="form-group">
                    {% render_field form.pk_roles class="form-control" %}
                </div>

                {% if is_update %}
                <div class="form-group">
                    {% render_field form.pwd placeholder=form.pwd.label title=form.pwd.label class="form-control" %}

                    {% if form.pwd.errors %}
                        <div class="text-danger small mt-1 font-weight-bold">
                            {{ form.pwd.errors.0 }}
                        </div>
                    {% endif %}
                </div>
                {% endif %}

                {# Field ini hanya diisi/tampil saat ganti password (mode update) #}
                <div class="form-group">
                    {% render_field form.pwd_old placeholder=form.pwd_old.label title=form.pwd_old.label class="form-control" %}

                    {% for error in form.pwd_old.errors %}
                        <div class="text-danger small mt-1 font-weight-bold">{{ error }}</div>
                    {% endfor %}
                </div>

                {# Field utama untuk membuat password baru / mengganti password lama #}
                <div class="form-group">
                    {% render_field form.pwd_new placeholder=form.pwd_new.label autocomplete="off" title=form.pwd_new.label class="form-control" %}

                    {% for error in form.pwd_new.errors %}
                        <div class="text-danger small mt-1 font-weight-bold">{{ error }}</div>
                    {% endfor %}
                </div>
            </div>
        </div>
        
        <a href="{% url 'users_list' %}" class="btn btn-secondary px-lg-4 shadow text-uppercase">Kembali</a>
        <button type="submit" data-save class="btn btn-info px-lg-4 shadow text-uppercase ml-1">Simpan</button>
        
        <div id="upload_exec" class="float-right">
            {% if pk %}
            {% endif %}
        </div>
    </form>
</div>
{% endblock %}