/**
 * template js
 * @since cms:1.4.3.2&1.4.3.3 web:1.0
 */
var TEMPLATE = {};

/** template load header */
TEMPLATE.loadHeader = function (elmentId) {
    COMMON.showLoading();
    $(elmentId).load('../common/html/header.html', function () {
        $('#iconHomeDashboard').removeClass('active');
        $('#iconHomeWorkList').removeClass('active');
        if (sessionStorage.activeHomePage == CONSTANT.PAGE_TAB.OPERATION_LIST) {
            $('#iconHomeWorkList').addClass('active');
        } else {
            $('#iconHomeDashboard').addClass('active');
        }
        I18N.initi18n();
        HEADER.init();
    });
};

/**
 * template load dashboard setting
 * @param {string} elmentId - element to load setting html
 * @param {*} changeCallback - callback when setting changed
 */
TEMPLATE.loadDashboardSetting = function (elmentId, changeCallback) {
    $(elmentId).load('dashboardSetting.html', function () {
        DashboardSetting.init(changeCallback);
        I18N.initi18n();
    });
};

/**
 * Template load confirm model
 * @param {*} elmentId
 */
TEMPLATE.loadConfirmModal = function (elmentId) {
    $(elmentId).load('../common/html/confirmModal.html', function () {
        HEADER.initLogout();
        I18N.initi18n();
    });
};

/**
 * Template load operation select
 * @param {*} elmentId
 * @param {*} selectCallback
 */
TEMPLATE.loadOperationSelect = function (elmentId, selectCallback) {
    $(elmentId).load('operationSelect.html', function () {
        OperationSelect.init(selectCallback);
        I18N.initi18n();
    });
};

/**
 * show confirm model
 */
TEMPLATE.showModalConfirm = function () {
    $('#showConfirm').click(function () {
        $('#confirm-modal').modal();
    });
};

/**
 * Template load notification content
 * @param {*} elmentId
 * @param {*} selectCallback
 */
TEMPLATE.loadNotificationSelect = function (elmentId, selectCallback) {
    $(elmentId).load('notificationContent.html', function () {
        NotificationSelect.init(selectCallback);
        I18N.initi18n();
    });
};

/**
 * load main navs title html to a element by id
 * @param {string} elmentId - elementId where contain main title html
 * @param {string} titleLang - lang of title
 * @param {Array} navs - array nav items (titleLang, href)
 */
TEMPLATE.loadMainNavsTitle = function (elmentId, titleLang, navs, completeCallback) {
    var titleHtmlPath = '../common/html/mainTitle.html';
    if (navs) {
        titleHtmlPath = '../common/html/mainNavTitle.html';
    }

    $(elmentId).load(titleHtmlPath, function (data) {
        $(elmentId).replaceWith(data);
        if (titleLang) {
            $('#mainTitleHeader').attr('lang', titleLang);
        }
        if (navs) {
            var olElm = $('#mainTitleNavs ol');
            for (var i = 0; i < navs.length; i++) {
                const nav = navs[i];
                var liElm = $('<li class="breadcrumb-item" />');
                if (nav.href) {
                    var aElm = $('<a class="text-decoration-none text-underline lang" />');
                    aElm.attr('href', nav.href);
                    if (nav.titleLang) {
                        aElm.attr('lang', nav.titleLang);
                    }
                    liElm.append(aElm);
                } else {
                    liElm.addClass('lang');
                    liElm.attr('aria-current', 'page');
                    liElm.append('<span></span>');
                    if (nav.titleLang) {
                        liElm.attr('lang', nav.titleLang);
                    }
                }
                olElm.append(liElm);
            }
        }
        I18N.initi18n();
        if (completeCallback) {
            completeCallback();
        }
    });
};
