
<!-- Поля ввода инвентория -->
<script type="text/x-just" data-just="filed_type_inventoriesAutocomplete">  
    
    <% if(item_id){ %>  
        <div class="form-group col-lg-4 col-xs-12 col-sm-6 col-md-6 boolean-select">
            <label class="control-label" >Inventory source</label>
            <select class="form-control select2" id="inventory-source" style="width:100%" onchange="$('.inventory-source-type').toggle(); if(<%- justCall(filed) %>.onchange) <%- justCall(filed) %>.onchange({value:$('.inventory-source-'+this.value+' .inventory-source-value').val()})" >  
                    <option value="file" <% if(/[^0-9]/mg.test(filed.getFiledValue.apply(pmObj, [item_id]))){ %>selected<% } %> >From file in project dir</option>
                    <option value="db" <% if(!/[^0-9]/mg.test(filed.getFiledValue.apply(pmObj, [item_id]))){ %>selected<% } %> >From database</option> 
            </select>
        </div> 

        <div class="form-group col-lg-4 col-xs-12 col-sm-6 col-md-6 inventory-source-file inventory-source-type" 
                    style="<% if(!/[^0-9]/mg.test(filed.getFiledValue.apply(pmObj, [item_id]))){ %>display:none;<% } %>">
            <label class="control-label" >Inventory file</label>
            <input type="text" onchange="if(<%- justCall(filed) %>.onchange) <%- justCall(filed) %>.onchange({value:this.value})"
                    class="form-control inventory-source-value"
                    id="inventories-file"
                    value="<% if(/[^0-9]/mg.test(filed.getFiledValue.apply(pmObj, [item_id]))){ %><%- filed.getFiledValue.apply(pmObj, [item_id]) %><% } %>">
        </div>

        <div class="form-group col-lg-4 col-xs-12 col-sm-6 col-md-6 inventory-source-db inventory-source-type"
            style="<% if(/[^0-9]/mg.test(filed.getFiledValue.apply(pmObj, [item_id]))){ %>display:none;<% } %>">
            <label class="control-label" >Inventory from project</label>
            <select class="form-control select2 inventory-source-value" id="inventories-autocomplete" data-placeholder="Select inventory" style="width:100%"  onchange="if(<%- justCall(filed) %>.onchange) <%- justCall(filed) %>.onchange({value:this.value})" >  
                
                <% if(!opt.project_id){ %>
                    <% for(var i in pmInventories.model.itemslist.results){ var val = pmInventories.model.itemslist.results[i] %>
                        <option
                            <% if(filed.getFiledValue.apply(pmObj, [item_id]) == val.id){ %>  selected  <% } %>
                            value="<%- val.id %>"
                            ><%- val.name %></option>
                    <% } %>
                <% }else{ %>
                    <% for(var i in pmProjects.model.items[opt.project_id].inventories){ var val = pmProjects.model.items[opt.project_id].inventories[i] %>
                        <option
                            <% if(filed.getFiledValue.apply(pmObj, [item_id]) == val.id){ %>  selected  <% } %>
                            value="<%- val.id %>"
                            ><%- val.name %></option>
                    <% } %>
                <% } %>
            </select> 
        </div> 
    <% }else{ %> 
        <div class="form-group col-lg-4 col-xs-12 col-sm-6 col-md-6 boolean-select">
            <label class="control-label" >Inventory source</label>
            <select class="form-control select2" id="inventory-source" style="width:100%"
                    onchange="$('.inventory-source-type').toggle(); if(<%- justCall(filed) %>.onchange) <%- justCall(filed) %>.onchange({value:$('.inventory-source-'+this.value+' .inventory-source-value').val()})" >  
                    <option value="file" >From file in project dir</option>
                    <option value="db" selected>From database</option> 
            </select>
        </div> 

        <div class="form-group col-lg-4 col-xs-12 col-sm-6 col-md-6 inventory-source-file inventory-source-type" 
                    style="display:none;">
            <label class="control-label" >Inventory file</label>
            <input type="text" onchange="if(<%- justCall(filed) %>.onchange) <%- justCall(filed) %>.onchange({value:this.value})"
                    class="form-control inventory-source-value"
                    id="inventories-file"
                    value="">
        </div>

        <div class="form-group col-lg-4 col-xs-12 col-sm-6 col-md-6 inventory-source-db inventory-source-type">
            <label class="control-label" >Inventory from project</label>
            <select class="form-control select2 inventory-source-value" id="inventories-autocomplete" data-placeholder="Select inventory" style="width:100%"  onchange="if(<%- justCall(filed) %>.onchange) <%- justCall(filed) %>.onchange({value:this.value})">  
                <% if(!opt.project_id){ %>
                    <% for(var i in pmInventories.model.itemslist.results){ var val = pmInventories.model.itemslist.results[i] %>
                        <option value="<%- val.id %>"
                            ><%- val.name %></option>
                    <% } %>
                <% }else{ %>
                    <% for(var i in pmProjects.model.items[opt.project_id].inventories){ var val = pmProjects.model.items[opt.project_id].inventories[i] %>
                        <option value="<%- val.id %>"
                            ><%- val.name %></option>
                    <% } %>
                <% } %>
            </select> 
        </div>
    <% } %> 
</script>


<script type="text/x-just" data-just="inventories_import_page">
    <section class="content-header">
        <h1>
            <a href="<%- polemarch.opt.host %>/?inventories"  onclick="return spajs.openURL(this.href);" class="btn btn-default" >
                <span class="glyphicon glyphicon-arrow-left"></span>
            </a>

            <span class="h1-header" >Import from file</span>

        </h1>
        <ol class="breadcrumb">
            <li><a href="<%- polemarch.opt.host %>"  onclick="return spajs.openURL(this.href);" ><i class="fa fa-dashboard"></i> Home</a></li>
            <li><a href="<%- polemarch.opt.host %>/?inventories"  onclick="return spajs.openURL(this.href);" >Inventories</a></li>
            <li class="active">Import from file</li>
        </ol>
    </section>

    <section class="content">

        <~ pmInventories.model.importedInventories>
            <% if(pmInventories.model.importedInventories && pmInventories.model.importedInventories.inventory){%> 
                <button type="button" onclick="spajs.showLoader(pmInventories.importInventoriesAndOpen()); return false;" class="btn btn-primary" >Import inventory</button>
                <span class="btn btn-default textfile" style="margin-left: 10px;" >
                    <input type="file" class="input-file"  onchange="spajs.showLoader(pmInventories.openImportPageAndImportFiles(event));"  >
                    <span class="glyphicon glyphicon-file"></span> Import from file
                </span>

            <% }else{ %>  
                <span class="btn btn-primary textfile" style="margin-left: 10px;" >
                    <input type="file" class="input-file"  onchange="spajs.showLoader(pmInventories.openImportPageAndImportFiles(event));"  >
                    <span class="glyphicon glyphicon-file"></span> Import from file
                </span>
            <% } %>
        <~>
        <br>
        <br>
        <div class="row">
            <~ pmInventories.model.importedInventoriesIsReady>
                <% if(pmInventories.model.importedInventoriesIsReady == true) { %>
                    <%= pmInventories.renderImportedInventory(pmInventories.model.importedInventories) %>
                <% } %>
            <~>
        </div> 
    </section>
</script>



<!-- шаблон страницы импотированного инвентория -->
<script type="text/x-just" data-just="inventories_imported_inventory">

<section class="col-lg-12">
    <div class="box box-info collapsed-box">
        <div class="box-header with-border collapsed-box">
            Imported file<br>
            <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i> </button>
            </div>
        </div>
        <div class="box-body">
            <div class="form-group col-lg-12 col-ml-12 col-sm-12">
                <pre><%- text %></pre>
            </div>
        </div>
    </div>
</section>

<div class="col-lg-12">
    <h1>Inventory</h1>
</div>
<section class="col-lg-12">
    <div class="box box-info">
        <div class="box-header with-border">
            Inventory<br>
            <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i> </button>
            </div>
        </div>
        <div class="box-body">
            <div class="form-group col-lg-4 col-xs-12 col-sm-6 col-md-6">
                <label class="control-label" >Name</label>
                <input type="text" id="inventory_name" value="<%- inventory.name %>"  class="form-control" maxlength="255" onchange="pmInventories.model.importedInventories.inventory.name=this.value;">
                <div class="help-block"></div>
            </div>
            <div class="form-group col-lg-12 col-xs-12 col-sm-12 col-md-12">
                <label class="control-label">Notes</label>
                <textarea class="form-control" style="resize:vertical; min-height:75px;"
                placeholder="Not required field, just for your notes" id="filed_notes"
                onchange="pmInventories.model.importedInventories.inventory.notes=this.value;"><%- inventory.notes %></textarea>
                <div class="help-block"></div>
            </div>
        </div>
    </div>
</section>
<%= jsonEditor.editor(inventory.vars, {block:'inventories', prefix:"inventory"}) %>

<% if(!((pmInventories.importedHostsIsEmpty(inventory.hosts) == true) && (isEmptyObject(inventory.groups) == true))) { %>
    <div class="col-lg-12">
        <h1>Subitems in inventory</h1>
    </div>
<% } %>

<% if(pmInventories.importedHostsIsEmpty(inventory.hosts) == false) { %>
    <section class="col-lg-12">
        <div class="box box-info" id="imported_hosts">
            <div class="box-header with-border">
                Hosts<br>
                <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i> </button>
                </div>
            </div>
            <div class="box-body">
                <table class="table table-bordered multiple-select imported-subitems-table" id="imported_hosts_table">
                    <tbody>
                        <tr>

                            <th style="width: 45px" onclick="$(this).parent().toggleClass('selected'); pmInventories.toggleSelectAllImportedSubItems($('#imported_hosts_table tr'), $(this).parent().hasClass('selected'), 'imported_hosts'); return false;">
                                <div class="ico-on fa fa-toggle-on"></div>
                                <div class="ico-off fa  fa-toggle-off"></div>
                            </th>

                            <th style="width: 120px;">Name</th>
                            <th style="width: 75px;" class="hidden-xs">Type</th>
                            <th style="width: 85px;" class="hidden-xs">Exists</th>
                            <th style="width: 85px;" class="hidden-xs">New item</th>

                            <th>Vars</th>
                            <th style="width: 100px;">Actions</th>
                        </tr>
                        <% for(var i in inventory.hosts){ var val = inventory.hosts[i] %>
                            <tr class="item-row item-<%- i %>  <% if(val.id!==undefined) { %> unselectable <% } %>"
                                            data-id="<%- i %>"
                                            data-name="<%- val.name %>">

                                <td class=""  <% if(val.id===undefined) { %> onclick="pmInventories.toggleSelectImportedSubItem(this, 'imported_hosts'); return false;" <% } %> >
                                    <div class="ico-on fa fa-toggle-on"></div>
                                    <div class="ico-off fa  fa-toggle-off"></div>
                                </td>

                                <td style="width: 120px;">
                                     <% if(val.id===undefined) { %>
                                        <%= val.name %>
                                    <% } else { %>
                                        <a href="/?host/<%= val.id %>" target="_blank">  <%= val.name %> </a>
                                    <% } %>
                                </td>

                                <td style="width: 75px;" class="hidden-xs"> <%= val.type %> </td>
                                <td style="width: 85px;" class="hidden-xs matches"> <% if(val.matches) { %> <i class="fa fa-check" style="font-size:20px;"></i>  <% } %></td>
                                <td style="width: 85px;" class="hidden-xs new_subitem"> <% if(val.id===undefined) { %> <i class="fa fa-check" style="font-size:20px;"></i>  <% } %></td>
                                <td id="hosts-<%= i %>-vars">
                                    <ul>
                                        <% for(var j in val.vars) { %>
                                            <% if(j == "ansible_ssh_private_key_file") { %>
                                                <li> <b> <%= j %>: </b> [~~ENCRYPTED~~] </li>
                                            <% } else { %>
                                                <li> <b> <%= j %>: </b> <%= val.vars[j] %> </li>
                                            <% } %>
                                        <% } %>
                                    </ul>
                                </td>
                                <td style="width: 100px;">
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-primary dropdown-toggle"  data-toggle="dropdown"  aria-haspopup="true" aria-expanded="false"
                                            <% if(val.id!==undefined && !pmInventories.checkAbilityToSelectMatching('hosts', i)) { %>
                                                disabled
                                            <% } %>
                                        >

                                            Actions
                                            <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-right">
                                            <li class="item-<%= i %>-hide-li">
                                                <a href="#" onclick="spajs.showLoader(pmInventories.openEditItemModal('hosts', <%= i %>)); return false;" class="">
                                                    Edit new host
                                                </a>
                                            </li>
                                            <li class="<% if(val.matches==false) { %> hide <% } %> ">
                                                <a href="#" onclick="spajs.showLoader(pmInventories.openChooseMatchingModal('hosts', <%= i %>)); return false;" class="">
                                                    Select matching
                                                </a>
                                            </li>
                                        </ul>
                                    </div>

                                </td>
                            </tr>
                        <% } %>
                    </tbody>
                </table>
            </div>
            <div class="box-footer clearfix">
                <div class="btn-group hide actions_button" role="group">
                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <~ pmInventories.model.selectedImportedSubItems>
                        Actions <%= pmInventories.model.selectedImportedSubItems %> on items
                        <~>
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="#"
                                onclick="spajs.showLoader(pmInventories.deleteSubItemsFromImportedInventory('imported_hosts', 'hosts')); return false;" >Delete from this inventory</a>
                        </li>
                    </ul>
                </div>
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Select
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="#" onclick="spajs.showLoader(pmInventories.toggleSelectAllImportedSubItems($('#imported_hosts_table tr'), true, 'imported_hosts'));return false;" >Select all</a>
                        </li>
                        <li class="hide unselect_all" >
                            <a href="#" onclick="spajs.showLoader(pmInventories.toggleSelectAllImportedSubItems($('#imported_hosts_table tr'), false, 'imported_hosts')); return false;" >Unselect all</a>
                        </li>
                    </ul>
                </div>
        </div>
        </div>
    </section>
<% } %>

<% if(isEmptyObject(inventory.groups) == false) { %>
    <section class="col-lg-12">
        <div class="box box-info" id="imported_groups">
            <div class="box-header with-border">
                Groups<br>
                <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i> </button>
                </div>
            </div>
            <div class="box-body">
                <table class="table table-bordered multiple-select imported-subitems-table" id="imported_groups_table">
                    <tbody>
                        <tr>

                            <th style="width: 45px" onclick="$(this).parent().toggleClass('selected'); pmInventories.toggleSelectAllImportedSubItems($('#imported_groups_table tr'), $(this).parent().hasClass('selected'), 'imported_groups'); return false;">
                                <div class="ico-on fa fa-toggle-on"></div>
                                <div class="ico-off fa  fa-toggle-off"></div>
                            </th>
                            <th style="width: 120px;">Name</th>
                            <th class="hidden-xs" style="width:75px;">Children</th>
                            <th style="width: 85px;" class="hidden-xs">Exists</th>
                            <th style="width: 85px;" class="hidden-xs">New item</th>
                            <th>Vars</th>
                            <th>Subitems</th>
                            <th style="width: 100px;">Actions</th>
                        </tr>
                        <% for(var i in inventory.groups){ var val = inventory.groups[i] %>
                            <tr class="item-row item-<%- i %> <% if(val.id!==undefined) { %> unselectable <% } %>"
                                            data-id="<%- i %>" >

                                <td class="" <% if(val.id===undefined) { %> onclick="pmInventories.toggleSelectImportedSubItem(this, 'imported_groups'); return false;" <% } %> >
                                    <div class="ico-on fa fa-toggle-on"></div>
                                    <div class="ico-off fa  fa-toggle-off"></div>
                                </td>

                                <td style="width: 120px;">
                                    <% if(val.id===undefined) { %>
                                        <%= i %>
                                    <% } else { %>
                                        <a href="/?group/<%= val.id %>" target="_blank">  <%= i %> </a>
                                    <% } %>
                                </td>
                                <td class="group-children hidden-xs" style="width:75px;">
                                    <% if (val.children!==undefined && val.children==true) { %>
                                        <i class="fa fa-check" style="font-size:20px;"></i>
                                     <% } %>
                                </td>
                                <td style="width: 85px;" class="hidden-xs matches"> <% if(val.matches) { %> <i class="fa fa-check" style="font-size:20px;"></i>  <% } %></td>
                                <td style="width: 85px;" class="hidden-xs new_subitem"> <% if(val.id===undefined) { %> <i class="fa fa-check" style="font-size:20px;"></i>  <% } %></td>
                                <td id="groups-<%= i %>-vars">
                                    <ul>
                                        <% for(var j in val.vars) { %>
                                            <% if(j == "ansible_ssh_private_key_file") { %>
                                                <li> <b> <%= j %>: </b> [~~ENCRYPTED~~] </li>
                                            <% } else { %>
                                                <li> <b> <%= j %>: </b> <%= val.vars[j] %> </li>
                                            <% } %>
                                        <% } %>
                                    </ul>
                                </td>
                                <td>
                                    <ul>
                                        <% if (val.children!==undefined && val.children==true) { %>
                                          <% for(var j in val.groups) { %>
                                            <% if(val.groups[j].id===undefined) { %>
                                                <li> <b>Group:</b>  <%= val.groups[j] %> </li>
                                            <% } else { %>
                                                <li> <b>Group:</b> <a href="/?group/<%= val.groups[j].id %>" target="_blank">  <%= val.groups[j].name %> </a></li>
                                             <% } %>
                                          <% } %>
                                        <% } else { %>
                                            <% for(var j in val.hosts) { %>
                                                <% if(val.hosts[j].id===undefined) { %>
                                                    <li> <b>Host:</b> <%= val.hosts[j].name %> </li>
                                                <% } else { %>
                                                    <li> <b>Host:</b> <a href="/?host/<%= val.hosts[j].id %>" target="_blank"> <%= val.hosts[j].name %></a></li>
                                                <% } %>
                                            <% } %>
                                        <% } %>
                                    </ul>
                                </td>
                                <td style="width: 100px;">
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                                            <% if(val.id!==undefined && !pmInventories.checkAbilityToSelectMatching('groups', i )) { %>
                                                disabled
                                            <% } %>
                                        >
                                            Actions
                                            <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-right">
                                            <li class="item-<%= i %>-hide-li">
                                                <a href="#" onclick="spajs.showLoader(pmInventories.openEditItemModal('groups', '<%= i %>')); return false;" class="">
                                                    Edit new group
                                                </a>
                                            </li>
                                            <li class="<% if(val.matches==false) { %> hide <% } %>">
                                                <a href="#" onclick="spajs.showLoader(pmInventories.openChooseMatchingModal('groups', '<%= i %>')); return false;" class="">
                                                    Select matching
                                                </a>
                                            </li>
                                        </ul>
                                    </div>

                                </td>
                            </tr>
                        <% } %>
                    </tbody>
                </table>
            </div>
            <div class="box-footer clearfix">
                <div class="btn-group hide actions_button" role="group">
                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <~ pmInventories.model.selectedImportedSubItems>
                        Actions <%= pmInventories.model.selectedImportedSubItems %> on items
                        <~>
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="#"
                                onclick="spajs.showLoader(pmInventories.deleteSubItemsFromImportedInventory('imported_groups', 'groups')); return false;" >Delete from this inventory</a>
                        </li>
                    </ul>
                </div>
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Select
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="#" onclick="spajs.showLoader(pmInventories.toggleSelectAllImportedSubItems($('#imported_groups_table tr'), true, 'imported_groups'));return false;" >Select all</a>
                        </li>
                        <li class="hide unselect_all" >
                            <a href="#" onclick="spajs.showLoader(pmInventories.toggleSelectAllImportedSubItems($('#imported_groups_table tr'), false, 'imported_groups')); return false;" >Unselect all</a>
                        </li>
                    </ul>
                </div>
        </div>
        </div>
    </section>
<% } %>
</script>

<!-- шаблон модального окна для редактирования нового subitem -->
<script type="text/x-just" data-just="edit_imported_subitem">
    <div class="modal-dialog" >
    <div class="modal-content" >
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">Inventory subitem options</h4>
      </div>
      <!-- Основное содержимое модального окна -->
      <div class="modal-body" style="background-color:#ecf0f5; overflow:hidden;">
      <% if(subItemType=="hosts") { %>
            <div class="col-lg-12">
                <h1>Host: <%- val.name %></h1>
            </div>
            <section class="col-lg-12">
                <div class="box box-info">
                    <div class="box-header with-border">
                        Host: <%- val.name %><br>
                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i> </button>
                        </div>
                    </div>
                    <div class="box-body">
                        <div class="form-group col-xs-12 col-sm-6 col-md-6">
                            <label class="control-label" >Name</label>
                            <input type="text" disabled value="<%- val.name %>"  class="form-control" maxlength="255">
                            <div class="help-block"></div>
                        </div>
                        <div class="form-group col-xs-12 col-sm-6 col-md-6">
                            <label class="control-label" >Type</label>
                            <input type="text" disabled value="<%- val.type %>"  class="form-control" maxlength="255">
                            <div class="help-block"></div>
                        </div>
                        <div class="form-group col-lg-12 col-xs-12 col-sm-12 col-md-12">
                            <label class="control-label">Notes</label>
                            <textarea class="form-control" style="resize:vertical; min-height:75px;"
                            placeholder="Not required field, just for your notes" id="hosts_notes"><%- val.notes %></textarea>
                            <div class="help-block"></div>
                        </div>
                    </div>
                </div>
            </section>
            <%= jsonEditor.editor(val.vars, {block:'hosts', prefix:'host'+val.name}) %>
          </div>
          <% } else { %>
        <div class="col-lg-12">
            <h1>Group: <%- index %></h1>
        </div>
        <section class="col-lg-12">
                <div class="box box-info">
                    <div class="box-header with-border">
                        Group: <%- index %><br>
                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i> </button>
                        </div>
                    </div>
                    <div class="box-body">
                        <div class="form-group  col-xs-12 col-sm-6 col-md-6">
                            <label class="control-label" >Name</label>
                            <input type="text" disabled value="<%- index %>"  class="form-control" maxlength="255">
                            <div class="help-block"></div>
                        </div>
                        <div class="form-group  col-xs-12 col-sm-6 col-md-6 boolean-select">
                            <label class="control-label">Children</label>
                            <div class="form-control <% if (val.children!==undefined && val.children==true) { %> selected <% } %>" style="background-color:#ffffff;" disabled>
                                <div class="ico-on fa fa-toggle-on" style="background-color:#ffffff; cursor: not-allowed;"></div>
                                <div class="ico-off fa  fa-toggle-off" style="background-color:#ffffff; cursor: not-allowed;"></div>
                                <div class="boolean-title" style="background-color:#ffffff; cursor: not-allowed;">Boolean value</div>
                            </div>
                            <div class="help-block">If turn, then allow adding sub groups to group</div>
                        </div>
                        <div class="form-group col-lg-12 col-xs-12 col-sm-12 col-md-12">
                            <label class="control-label">Notes</label>
                            <textarea class="form-control" style="resize:vertical; min-height:75px;"
                            placeholder="Not required field, just for your notes" id="groups_notes"><%- val.notes %></textarea>
                            <div class="help-block"></div>
                        </div>
                    </div>
                </div>
            </section>
        <%= jsonEditor.editor(val.vars, {block:'groups', prefix: 'group'+index}) %>
         </div>
    <% } %>
          <!-- Футер модального окна -->
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            <button type="button" class="btn btn-primary" onclick="spajs.showLoader(pmInventories.saveChangesFromEditItemModal('<%= subItemType %>', '<%= index %>'));  return false;">Save</button>
          </div>
        </div>
  </div>
</script>

<!-- шаблон модального окна для выбора: какой из subitems с одинаковым именем использовать в данном инвентории -->
<script type="text/x-just" data-just="choose_matching_modal">
    <div class="modal-dialog" >
        <div class="modal-content" >
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 class="modal-title">Select matching <%= subItemType %> </h3> <br>
            <p>
                Imported inventory includes <% var str=subItemType; str=str.slice(0,-1); %> <%= str %> <b> <% if(subItemType=="hosts") { %> <%= val.name %>  <% } else { %> <%= index %> <% } %> </b>.  <br>
                <% var len=val.match_arr.length; %>
                <% if (len > 1) { %>
                    There are  <%= len %> <%= subItemType %> with the same name in system already. <br>
                <% } else { %>
                    There is a  <%= str %> with the same name in system already. <br>
                <% } %>

                Please, select which of them you want to use in this inventory: new one or existing one.
            </p>
          </div>
          <!-- Основное содержимое модального окна -->
          <div class="modal-body" style="background-color:#ecf0f5; overflow:hidden;">
            <section class="col-lg-12">
                <div class="box box-info">
                    <div class="box-header with-border">
                       <% if(subItemType=="hosts") { %> Host: <%= val.name %>  <% } else { %> Group: <%= index %> <% } %> for new inventory<br>
                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i> </button>
                        </div>
                    </div>
                    <div class="box-body">
                        <table class="table table-bordered multiple-select imported-subitems-table">
                            <tbody>
                                 <% if(subItemType=="hosts") { %>
                                    <tr>
                                        <th style="width: 45px" onclick="">
                                            <div class="ico-on fa fa-toggle-on"></div>
                                            <div class="ico-off fa  fa-toggle-off"></div>
                                        </th>
                                        <th style="width: 120px;">Name</th>
                                        <th style="width: 75px;">Type</th>
                                        <th>Vars</th>
                                        <th style="width: 50px">New</th>
                                    </tr>
                                    <tr class="match-subitem <% if(val.id===undefined) { %> selected <% } %>" subitem-id="new">
                                        <td onclick="pmInventories.toggleSelectMatchSubItem(this); return false;">
                                            <div class="ico-on fa fa-toggle-on"></div>
                                            <div class="ico-off fa  fa-toggle-off"></div>
                                        </td>
                                        <td> <%= pmInventories.model.importedInventoriesCopy.inventory[subItemType][index].name %> </td>
                                        <td> <%= pmInventories.model.importedInventoriesCopy.inventory[subItemType][index].type %> </td>
                                        <td>
                                            <ul>
                                                <% for(var j in pmInventories.model.importedInventoriesCopy.inventory[subItemType][index].vars) { %>
                                                    <li> <b> <%= j %>: </b> <%= pmInventories.model.importedInventoriesCopy.inventory[subItemType][index].vars[j] %> </li>
                                                <% } %>
                                            </ul>
                                        </td>
                                        <td class="new_subitem" style="width: 50px"> <i class="fa fa-check" style="font-size:20px;"></i> </td>
                                    </tr>
                                    <% for(var i in val.match_arr){ var val1 = val.match_arr[i] %>
                                        <tr class="match-subitem <% if(val.id!==undefined && val.id==val1.id) { %> selected <% } %>" subitem-id="<%= val1.id %>">
                                            <td onclick="pmInventories.toggleSelectMatchSubItem(this); return false;">
                                                <div class="ico-on fa fa-toggle-on"></div>
                                                <div class="ico-off fa  fa-toggle-off"></div>
                                            </td>
                                            <td style="width: 120px;"> <a href="/?host/<%= val1.id %>" target="_blank"><%= val1.name %></a> </td>
                                            <td style="width: 75px;"> <%= val1.type %> </td>
                                            <td>
                                                <ul>
                                                    <% for(var j in val1.vars) { %>
                                                        <li> <b> <%= j %>: </b> <%= val1.vars[j] %> </li>
                                                    <% } %>
                                                </ul>
                                            </td>
                                            <td style="width: 50px"></td>
                                        </tr>
                                    <% } %>
                                <% } else { %>
                                    <tr>
                                        <th style="width: 45px" onclick="">
                                            <div class="ico-on fa fa-toggle-on"></div>
                                            <div class="ico-off fa  fa-toggle-off"></div>
                                        </th>
                                        <th style="width: 120px;">Name</th>
                                        <th style="width: 75px;">Children</th>
                                        <th>Vars</th>
                                        <th>Subitems</th>
                                        <th style="width: 50px">New</th>
                                    </tr>
                                    <tr class="match-subitem <% if(val.id===undefined) { %> selected <% } %>" subitem-id="new">
                                        <td onclick="pmInventories.toggleSelectMatchSubItem(this); return false;">
                                            <div class="ico-on fa fa-toggle-on"></div>
                                            <div class="ico-off fa  fa-toggle-off"></div>
                                        </td>
                                        <td> <%= index %> </td>
                                        <td class="group-children" style="width:75px;"> <% if(pmInventories.model.importedInventoriesCopy.inventory[subItemType][index].children) { %> <i class="fa fa-check" style="font-size:20px;"></i> <% } %> </td>
                                        <td>
                                            <ul>
                                                <% for(var j in pmInventories.model.importedInventoriesCopy.inventory[subItemType][index].vars) { %>
                                                    <li> <b> <%= j %>: </b> <%= pmInventories.model.importedInventoriesCopy.inventory[subItemType][index].vars[j] %> </li>
                                                <% } %>
                                            </ul>
                                        </td>
                                        <td>
                                            <ul>
                                                <% if(pmInventories.model.importedInventoriesCopy.inventory[subItemType][index].children) { %>
                                                    <% for(var j in pmInventories.model.importedInventoriesCopy.inventory[subItemType][index].groups) { %>
                                                        <li> <b> Group: </b> <%= pmInventories.model.importedInventoriesCopy.inventory[subItemType][index].groups[j] %> </li>
                                                    <% } %>
                                                <% } else { %>
                                                    <% for(var j in pmInventories.model.importedInventoriesCopy.inventory[subItemType][index].hosts) { %>
                                                        <li> <b> Host: </b> <%= pmInventories.model.importedInventoriesCopy.inventory[subItemType][index].hosts[j].name %> </li>
                                                    <% } %>
                                                <% } %>
                                            </ul>
                                        </td>
                                        <td class="new_subitem" style="width: 50px"> <i class="fa fa-check" style="font-size:20px;"></i> </td>
                                    </tr>
                                     <% for(var i in val.match_arr){ var val1 = val.match_arr[i] %>
                                        <tr class="match-subitem <% if(val.id!==undefined && val.id==val1.id) { %> selected <% } %>" subitem-id="<%= val1.id %>">
                                            <td onclick="pmInventories.toggleSelectMatchSubItem(this); return false;">
                                                <div class="ico-on fa fa-toggle-on"></div>
                                                <div class="ico-off fa  fa-toggle-off"></div>
                                            </td>
                                            <td style="width: 120px;"> <a href="/?group/<%= val1.id %>" target="_blank"><%= index %></a></td>
                                            <td class="group-children" style="width:75px;"> <% if(val1.children) { %> <i class="fa fa-check" style="font-size:20px;"></i> <% } %> </td>
                                            <td>
                                                <ul>
                                                    <% for(var j in val1.vars) { %>
                                                        <li> <b> <%= j %>: </b> <%= val1.vars[j] %> </li>
                                                    <% } %>
                                                </ul>
                                            </td>
                                            <td>
                                                <ul>
                                                <% if(val1.children) { %>
                                                    <% for(var j in val1.groups) { %>
                                                        <li> <b> Group: </b>  <a href="/?group/<%= val1.groups[j].id %>" target="_blank"> <%= val1.groups[j].name %> </a> </li>
                                                    <% } %>
                                                <% } else { %>
                                                    <% for(var j in val1.hosts) { %>
                                                        <li> <b> Host: </b> <a href="/?host/<%= val1.hosts[j].id %>" target="_blank">  <%= val1.hosts[j].name %> </a> </li>
                                                    <% } %>
                                                <% } %>
                                            </ul>
                                            </td>
                                            <td style="width: 50px"></td>
                                        </tr>
                                    <% } %>
                                <% } %>
                            </tbody>
                        </table>
                    </div>
                </div>
            </section>

          </div>
          <!-- Футер модального окна -->
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            <button type="button" class="btn btn-primary" onclick="spajs.showLoader(pmInventories.saveSelectedMatchSubItem('<%= subItemType %>', '<%= index %>'));  return false;">Save</button>
          </div>
        </div>
  </div>
</script>

<script type="text/x-just" data-just="change_imported_subitem_vars">
    <% if(!$.isEmptyObject(vars)) { %>
        <ul>
            <% for(var i in vars) { %>
                <li> <b> <%= i %>: </b> <%= vars[i] %> </li>
            <% } %>
        </ul>
    <% } %>
</script>


<script type="text/x-just" data-just="inventories_btn_openImportPageAndImportFiles">
<span class="btn btn-default textfile" style="margin-left: 10px;" >
    <input type="file" class="input-file"  onchange="spajs.showLoader(pmInventories.openImportPageAndImportFiles(event));"  >
    <span class="glyphicon glyphicon-file"></span> Import from file
</span>
</script>

