{% set can_update = user.can('system_account_update') or (user.getAccount()['id'] == record['id']) %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center mb-4 mt-2">
    <h3 class="text-primary text-uppercase" style="padding-right:10px"><i class="bi bi-person-lines-fill"></i> {{ record['first_name'] ~ ' ' ~ record['last_name'] }}</h3>
    <div class="btn-toolbar mb-2 mb-md-0">
        <div class="btn-group me-2">
            {% if can_update %}
            <button class="submit btn btn-primary shadow-sm ">
                <i class="bi bi-check"></i> {{ 'submit'|text }}
            </button>
            {% endif %}
            <button class="btn btn-outline-dark shadow-sm" onclick="window.history.go(-1);return false;">{{ 'back'|text }}</button>
        </div>
    </div>
</div>
<ul class="nav nav-tabs mb-4" role="tablist">
    <li class="nav-item"><a class="nav-link active show" data-bs-toggle="tab" href="#tab-personal">{{ 'personal-info'|text }}</a></li>
    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-picture">{{ 'image'|text }}</a></li>
    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-options">{{ 'options'|text }}</a></li>
</ul>
<form class="needs-validation" novalidate id="account_update" action="{{ 'account-update'|link({'id': record['id']}) }}" method="PUT" enctype="multipart/form-data">
    <div class="tab-content mb-5">
        <div class="tab-pane active show" id="tab-personal" role="tabpanel">
            <div class="mb-3">
                <label class="form-label">{{ 'login'|text }}</label>
                <input class="form-control" required name="username" value="{{ record['username']|e }}" maxlength="128" placeholder="" type="text" autocomplete="off">
                <div class="invalid-feedback">{{ 'field-is-required'|text }}</div>
            </div>
            {% if user.is('system_coder') %}
            <div class="mb-3">
                <label class="form-label">{{ 'password'|text }}</label>
                <input class="form-control" name="password" value="" maxlength="256" placeholder="" type="password" autocomplete="off">
            </div>
            {% endif %}
            <div class="mb-3">
                <label class="form-label">{{ 'firstname'|text }}</label>
                <input class="form-control" required name="first_name" value="{{ record['first_name']|e }}" maxlength="128" autocomplete="off">
                <div class="invalid-feedback">{{ 'field-is-required'|text }}</div>
            </div>
            <div class="mb-3">
                <label class="form-label">{{ 'lastname'|text }}</label>
                <input class="form-control" required name="last_name" value="{{ record['last_name']|e }}" maxlength="128" placeholder="" type="text" autocomplete="off">
                <div class="invalid-feedback">{{ 'field-is-required'|text }}</div>
            </div>
            <div class="mb-3">
                <label class="form-label">{{ 'telephone'|text }}</label>
                <input class="form-control" required name="phone" value="{{ record['phone']|e }}" maxlength="128" placeholder="" type="text" autocomplete="off">
                <div class="invalid-feedback">{{ 'field-is-required'|text }}</div>
            </div>
            <div class="mb-3">
                <label class="form-label">{{ 'email'|text }}</label>
                <div class="input-group">
                    <div class="input-group-prepend"><span class="input-group-text">@</span></div>
                    <input class="form-control" required name="email" value="{{ record['email']|e }}" maxlength="128" placeholder="" type="email" autocomplete="off">
                    <div class="invalid-feedback">{{ 'enter-valid-email'|text }}</div>
                </div>
            </div>
            {% if user.is('system_coder') %}
            <div class="mb-3">
                <label class="form-label">{{ 'status'|text }}</label>
                <div class="form-check form-switch">
                  <input class="form-check-input" name="status" type="checkbox" role="switch" {{ record['status'] == 1 ? 'checked ' : '' }}aria-describedby="activeHelpBlock" onclick="warnStatus(this.checked);">
                </div>
                <div class="form-text" id="activeHelpBlock">{{ 'active-account-can-login'|text }}</div>
            </div>
            {% endif %}
        </div>
        <div class="tab-pane" id="tab-picture" role="tabpanel">
            <div class="mb-3">
                <input type="file" name="photo">
            </div>
        </div>
        <div class="tab-pane" id="tab-options" role="tabpanel">
            <div class="mb-3">
                <label class="form-label">{{ 'organization'|text }}</label>
                <select class="form-control" multiple name="organizations[]" id="organizations" aria-describedby="organzationHelpBlock">
                    {% for organization in organizations %}
                        <option value="{{ organization['id'] }}">{{ organization['name'] }}</option>
                    {% endfor %}
                </select>
                <div class="form-text" id="organzationHelpBlock">хэрэглэгчийн харъяалагдах байгууллагыг сонгон тохируулна уу</div>
            </div>
            <hr>
            <div class="mb-3">
                <label>{{ 'role2'|text }}</label>
                {% if user.can('system_rbac') %}
                <select class="form-control" multiple name="roles[]" id="roles" aria-describedby="roleHelpBlock">
                    {% for key,data in roles %}
                    <optgroup label="{{ rbacs[key] }}" alias="{{ key }}">
                        {% for value,name in data %}
                        <option value="{{ value }}" data-description="{{ name[1] }}">{{ name[0]|e }}</option>
                        {% endfor %}
                    </optgroup>
                    {% endfor %}
                </select>
                {% endif %}
                <div class="form-text" id="roleHelpBlock">хэрэглэгчийн дүрийг сонгон тохируулна уу</div>
            </div>
        </div>
    </div>
</form>
<div class="btn-toolbar mb-4">
{% if can_update %}
    <button class="submit btn btn-lg btn-primary shadow-sm"><i class="bi bi-check"></i> {{ 'submit'|text }}</button>
{% endif %}
    <button class="btn btn-lg  btn-secondary shadow-sm mx-2" onclick="window.history.go(-1);return false;">{{ 'cancel'|text }}</button>
</div>
<script defer src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
<script defer src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script type="text/javascript">
function warnStatus(checked) {
    if (checked) {
        return;
    }
    
    Swal.fire({
        position: 'top-end',
        icon: 'warning',
        html: "{{ 'active-account-can-login'|text }}",
        showConfirmButton: false,
        timer: 1500
    });
}

document.addEventListener('DOMContentLoaded', function() {
    Dashboard.activateLink("{{ 'accounts'|link }}");
    
    document.getElementsByName('photo')[0].imageInput("{{ record['photo']|e }}", "{{ 'select-image'|text }}", "{{ 'choose'|text }}", "{{ 'change'|text }}", "{{ 'remove'|text }}");
    
    FormSubmitHandler('.submit', 'form#account_update');
    
    (function($) {
        $.fn.Select2Organizations = function() {
            if (jQuery().select2) {
                this.select2({
                    width: '100%',
                    escapeMarkup: function(m) { return m; }
                });
            };

            return this;
        };
        
        $.fn.Select2Roles = function() {            
            let formatSelection = function(state) {
                if (!state.id) {
                    return state.text;
                }
                
                let option = $(state.element);
                let group = option.closest('optgroup');
                if (group) {
                    return group.attr('alias') + '_' + state.text;
                } else {
                    return state.text;
                }
            };

            let formatMenu = function(state) {
                if (!state.id) {
                    return state.text;
                }

                return state.text + ' &nbsp;<span class="text-muted float-right">' + $(state.element).data('description') + '</span>';
            };

            if (jQuery().select2) {
                this.select2({
                    width: '100%',
                    templateResult: formatMenu,
                    templateSelection: formatSelection,
                    escapeMarkup: function(m) { return m; }
                });
            };

            return this;
        };
    } (jQuery));
    
    $('#organizations').Select2Organizations();
    {% if current_organizations is defined and current_organizations is not empty %}
    $('#organizations').val([{{ current_organizations }}]);
    $('#organizations').trigger('change');
    {% endif %}
        

    
    $('#roles').Select2Roles();
    {% if current_role is defined and current_role is not empty %}
    $('#roles').val([{{ current_role }}]);
    $('#roles').trigger('change');
    {% endif %}
});
</script>