<style>
    #${id}{
		width:${width!};
	}
</style>
<div id="${id}" class="hlsgridbox ${hlsClassName!}">
    <div class="panel-heading hlsgridbox-header">
        <div class="panel-heading-btn hlsgridbox-header-btn">
        <#if queryId??>
            <input id="${queryId!}" data-role="maskedtextbox" placeholder="${queryPlaceholder!}" type="text"
                   style="float:right;width:300px;margin-right:10px;height: 28px;display:none;margin-top:10px;border-radius: 5px;margin-left: 20px;"
                   class="k-textbox"/>
        </#if>
            <span id="${id}SearchPanel" style="display:none;float: right">
                <#if queryId0??>
                    <input id="${queryId0!}" data-role="maskedtextbox" placeholder="${placeHolder0!}" type="text"
                           style="float:right;width:300px;margin-right:10px;height: 28px;display:inline;margin-top:10px;border-radius: 5px;margin-left: 20px;"
                           class="k-textbox"/>
                </#if>
                <#if queryId1??>
                    <input id="${queryId1!}" data-role="maskedtextbox" placeholder="${placeHolder1!}" type="text"
                       style="float:right;width:300px;margin-right:10px;height: 28px;display:inline;margin-top:10px;border-radius: 5px;margin-left: 20px;"
                       class="k-textbox"/>
                </#if>
                <#if queryId2??>
                    <input id="${queryId2!}" data-role="maskedtextbox" placeholder="${placeHolder2!}" type="text"
                       style="float:right;width:300px;margin-right:10px;height: 28px;display:inline;margin-top:10px;border-radius: 5px;margin-left: 20px;"
                       class="k-textbox"/>
                </#if>
                <#if queryId3??>
                    <input id="${queryId3!}" data-role="maskedtextbox" placeholder="${placeHolder3!}" type="text"
                       style="float:right;width:300px;margin-right:10px;height: 28px;display:inline;margin-top:10px;border-radius: 5px;margin-left: 20px;"
                       class="k-textbox"/>
                    </#if>
            </span>
            <div class="hlsgridbox-btn-detail">
            <#if BTNUPLOAD??>
                <a class="hlsgridbox-btn-a hlsgridbox-btn-a-display">
                    <img src="${contextPath!}/resources/images/MAIN/hlsgridupload.png"
                         onclick="hlscomponent_gridupload('${hlsGridId!}')" class="hlsgridbox-btn-a-img"/>
                </a>
            </#if>
            <#if BTNPDF??>
                <a class="hlsgridbox-btn-a hlsgridbox-btn-a-display">
                    <img src="${contextPath!}/resources/images/MAIN/hlsgridpdf.png"
                         onclick="hlscomponent_gridpdf('${hlsGridId!}')" class="hlsgridbox-btn-a-img"/>
                </a>
            </#if>
            <#if BTNEXCEL??>
                <a class="hlsgridbox-btn-a hlsgridbox-btn-a-display">
                    <div id="${id}_excel" style="display: none"></div>
                    <img src="${contextPath!}/resources/images/MAIN/hlsgridexcel.png"
                         onclick="hlscomponent_gridexcel('${contextPath!}','${hlsGridId!}','${viewModel!}','${viewModelData!}','${controllerName!}','${fileName!}','${id}_excel','${dataSourceId!}','${_csrf_token!}')"
                         class="hlsgridbox-btn-a-img"/>
                </a>
            </#if>
            <#if (BTNEXCEL??||BTNPDF??||BTNUPLOAD??)&&(BTNADD??||BTNSAVE??)>
                <span class="hlsgridbox-btn-a-split"></span>
            </#if>
            <#if BTNADD??>
                <a class="hlsgridbox-btn-a hlsgridbox-btn-a-display">
                    <img src="${contextPath!}/resources/images/MAIN/hlsgridadd.png"
                         onclick="hlscomponent_gridadd('${hlsGridId!}')" class="hlsgridbox-btn-a-img"/>
                </a>
            </#if>
            <#if BTNSAVE??>
                <a class="hlsgridbox-btn-a hlsgridbox-btn-a-display">
                    <img src="${contextPath!}/resources/images/MAIN/hlsgridsave.png"
                         onclick="hlscomponent_gridsave('${hlsGridId!}')" class="hlsgridbox-btn-a-img"/>
                </a>
            </#if>
            <#if (BTNCUSTOM1??||BTNCUSTOM2??||BTNCUSTOM3??||BTNCUSTOM4??)>
                <span class="hlsgridbox-btn-a-split"></span>
            </#if>
            <#if BTNCUSTOM1??>
                <a class="hlsgridbox-btn-a hlsgridbox-btn-a-display">
                    <img title="${custom1Title!}" src="${contextPath!}${custom1Image!}"
                         onclick="hlscomponent_gridcustom1('${hlsGridId!}')" class="hlsgridbox-btn-a-img"/>
                </a>
            </#if>
            <#if BTNCUSTOM2??>
                <a class="hlsgridbox-btn-a hlsgridbox-btn-a-display">
                    <img title="${custom2Title!}" src="${contextPath!}${custom2Image!}"
                         onclick="hlscomponent_gridcustom2('${hlsGridId!}')" class="hlsgridbox-btn-a-img"/>
                </a>
            </#if>
            <#if BTNCUSTOM3??>
                <a class="hlsgridbox-btn-a hlsgridbox-btn-a-display">
                    <img title="${custom3Title!}" src="${contextPath!}${custom3Image!}"
                         onclick="hlscomponent_gridcustom3('${hlsGridId!}')" class="hlsgridbox-btn-a-img"/>
                </a>
            </#if>
            <#if BTNCUSTOM4??>
                <a class="hlsgridbox-btn-a hlsgridbox-btn-a-display">
                    <img title="${custom4Title!}" src="${contextPath!}${custom4Image!}"
                         onclick="hlscomponent_gridcustom4('${hlsGridId!}')" class="hlsgridbox-btn-a-img"/>
                </a>
            </#if>
            </div>
        <#if BTNQUERY??>
            <div class="hlsgridbox-btn-query">
                <a class="hlsgridbox-btn-a">
                    <#if queryId??>
                        <img src="${contextPath!}/resources/images/MAIN/hlsgridquery.png"
                             onclick="hlscomponent_gridquery('${hlsGridId!}','${queryId!}')"
                             style="width: 20px;height: 20px" class="hlsgridbox-btn-a-img"/>
                    </#if>
                    <#if queryId0??>
                        <img src="${contextPath!}/resources/images/MAIN/hlsgridquery.png" onclick="queryFunction()"
                             style="width: 20px;height: 20px" class="hlsgridbox-btn-a-img"/>
                    </#if>
                </a>
                <span class="hlsgridbox-btn-a-split"></span>
            </div>
        </#if>
        </div>

        <h4 class="panel-title hlsgridbox-header-title"><#if required??>
            <span id="${id}-prompt-required" class="hlsRequiredPromptImage">${promptImage!}</span>
        </#if>
        ${title!}</h4>
    </div>
    <div id="${id}_hlsgridbox_body" class="hlsgridbox-body">
    ${hlsgridboxbody!}
    </div>
</div>
<#if queryId0??>
<script>
    function queryFunction() {
        if ($("#${id}SearchPanel").css("display") == "none") {
            $("#${id}SearchPanel").show(500);
            $('.hlsgridbox-btn-detail').hide(500);
        } else {
            $("#${id}SearchPanel").hide(500);
            $('.hlsgridbox-btn-detail').show(500);
        }
    }

</script>
</#if>