<!-- context menu -->
<div id="bp_menu" style="display: none;" class="context_menu w-[160px]">
  <ul class="w-full">
    <li><a href="#" onclick="bp_refresh('[% bp.id %]', current_node); hideElement('bp_menu')"><i class="fa-solid fa-arrows-rotate text-xs"></i>Refresh Status</a></li>
    <li><hr></li>
    <li><a href="#" onclick="bp_zoom_rel( 0.05)"><i class="fa-solid fa-magnifying-glass-plus text-xs"></i>Zoom In</a></li>
    <li><a href="#" onclick="bp_zoom_rel(-0.05)"><i class="fa-solid fa-magnifying-glass-minus text-xs"></i>Zoom Out</a></li>
    <li><a href="#" onclick="bp_zoom_reset(); hideElement('bp_menu')"><i class="fa-solid fa-expand text-xs"></i>Reset Zoom</a></li>
    <li><hr></li>
    [% IF editmode %]
    <li><a href="#" onclick="bp_add_new_node()"><i class="fa-solid fa-plus text-xs"></i>Add New Node</a></li>
    <li id="bp_menu_clone_node" class="disabled"><a href="#" onclick="bp_clone_node()"><i class="fa-solid fa-copy text-xs"></i>Clone This Node</a></li>
    <li><hr></li>
    <li id='bp_menu_remove_node'><a class="hover-red" href="#" onclick="bp_show_remove()"><i class="fa-solid fa-trash text-xs"></i>Remove Node</a></li>
    <li id='bp_menu_rename_node'><a href="#" onclick="bp_show_rename(event)"><i class="fa-solid fa-tag text-xs"></i>Rename Node</a></li>
    <li><a href="#" onclick="bp_show_edit_node('current')"><i class="fa-solid fa-pencil text-xs"></i>Edit Node</a></li>
    [% ELSE %]
      <li[% UNLESS allowed_for_edit %] class="disabled"[% END %]><a href="bp.cgi?action=details&amp;edit=1&amp;bp=[% bp.id %]"><i class="fa-solid fa-pencil text-xs"></i>Enable Edit Mode</a></li>
    [% END %]
    [% IF editmode || testmode %]
      <li class="relative">
        <a href="#"><i class="fa-solid fa-thumbtack text-xs"></i>Test Mode<span class="expandable"><i class="uil uil-angle-right"></i></span></a>
        <ul class="submenu autoopen absolute bottom-0 left-[160px]">
          <li><a href="bp.cgi?action=details&amp;bp=[% bp.id %][% IF editmode %]&amp;edit=1[% END %]">Disable Test Mode</a></li>
          <li><hr></li>
          <li><a href="#" onclick="bp_test_mode_node(-1)">Normal</a></li>
          <li><a href="#" onclick="bp_test_mode_node( 0)">Ok</a></li>
          <li><a href="#" onclick="bp_test_mode_node( 1)">Warning</a></li>
          <li><a href="#" onclick="bp_test_mode_node( 2)">Critical</a></li>
          <li><a href="#" onclick="bp_test_mode_node( 3)">Unknown</a></li>
          <li><a href="#" onclick="bp_test_mode_node( 4)">Pending</a></li>
        </ul>
      </li>
    [% ELSE %]
      <li><a href="bp.cgi?action=details&amp;bp=[% bp.id %][% IF editmode %]&amp;edit=1[% END %]&amp;testmode=1"><i class="fa-solid fa-thumbtack text-xs"></i>Enable Test Mode</a></li>
    [% END %]
  </ul>
</div>

<!-- main edit node dialog -->
<div id="bp_add_new_node" style="display: none;">
  <div class="card shadow-float">
    <div class="head justify-between">
      <h3>Create New Node</h3>
      <button class="iconOnly medium hoverable" onClick="closeModalWindow(); return false;"><i class="uil uil-times"></i></button>
    </div>
[% BLOCK _bp_node_type %]
    <table class="body my-2">
      <tr>
        <th class="text-center">Status</th>
        <th class="text-center">Aggregation Functions</th>
        <th class="text-center">Custom</th>
      </tr>
      <tr>
        <td class="align-top">
          <div class="flexcol flex-nowrap gap-px">
            <input type="button" class="w-20 h-20 p-0 whitespace-normal js-type-select js-type-select-status"       value="Host / Service"         onclick="bp_select_type('status')"       title="Node will use the status of given host or service.">
            <input type="button" class="w-20 h-20 p-0 whitespace-normal js-type-select js-type-select-groupstatus"  value="Host- / Service- group" onclick="bp_select_type('groupstatus')"  title="Node will use the status of given host- or servicegroup.">
            <input type="button" class="w-20 h-20 p-0 whitespace-normal js-type-select js-type-select-statusfilter" value="Any Filter"             onclick="bp_select_type('statusfilter')" title="Node will use the status of a status query.">
          </div>
        </td>
        <td class="align-top pl-2">
          <div class="flexcol flex-nowrap gap-px">
            <div class="flexrow flex-nowrap gap-px">
              <input type="button" class="w-20 h-20 p-0 js-type-select js-type-select-best"     value="Best"  onclick="bp_select_type('best')"     title="Node will have the best status from all child nodes.">
              <input type="button" class="w-20 h-20 p-0 js-type-select js-type-select-at_least" value="&gt;=" onclick="bp_select_type('at_least')" title="Node will be ok if a minumum number of child nodes are ok.">
              <input type="button" class="w-20 h-20 p-0 js-type-select js-type-select-equals"   value="="     onclick="bp_select_type('equals')"   title="Node will be ok if an exact number of child nodes are ok.">
            </div>
            <div class="flexrow flex-nowrap gap-px">
              <input type="button" class="w-20 h-20 p-0 js-type-select js-type-select-worst" value="Worst"     onclick="bp_select_type('worst')"    title="Node will have the worst status from all child nodes.">
              <input type="button" class="w-20 h-20 p-0 js-type-select js-type-select-not_more" value="&lt;="  onclick="bp_select_type('not_more')" title="Node will be ok if a maximum number of child nodes are ok.">
              <input type="button" class="w-20 h-20 p-0 js-type-select js-type-select-fixed" value="Dummy"     onclick="bp_select_type('fixed')"    title="Node will have a static selectable status.">
            </div>
          </div>
        </td>
        <td class="align-top pl-2">
          <div class="flexcol flex-nowrap gap-px">
            <input type="button" class="w-20 h-20 p-0 js-type-select js-type-select-custom" value="Custom" onclick="bp_select_type('custom')" title="Node status will be set from a custom function.">
            [% IF fav_custom_fun.size > 0 %]<input type="button" class="w-20 h-20 p-0 js-type-select js-type-select-fav1" value="[% fav_custom_fun.0 | html %]" onclick="bp_select_type('custom', {'bp_arg1_custom':'[% escape_js(fav_custom_fun.0) %]'})">[% END %]
            [% IF fav_custom_fun.size > 1 %]<input type="button" class="w-20 h-20 p-0 js-type-select js-type-select-fav2" value="[% fav_custom_fun.1 | html %]" onclick="bp_select_type('custom', {'bp_arg1_custom':'[% escape_js(fav_custom_fun.1) %]'})">[% END %]
          </div>
        </td>
      </tr>
    </table>
[% END %]
[% PROCESS _bp_node_type %]
  </div>
</div>


<div id="edit_dialog_[% bp.id %]" style="display: none;">
  <form action="bp.cgi" id="bp_edit_node_form" onsubmit="bp_edit_node_submit('bp_edit_node_form'); return false;">
    <input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>
    <input type="hidden" name="bp_node_id" id="bp_node_id" value="">
    <div class="card shadow-float flexcol gap-0 w-[600px] h-[450px] overflow-hidden">
      <div class="head p-0 h-10 justify-between">
        <div class="flexrow flex-nowrap gap-0">
          <span class="tabs clickable" id="tabs-1_[% bp.id %]_head" onclick="setTab('tabs-1_[% bp.id %]')">Type</span>
          <span class="tabs clickable" id="tabs-2_[% bp.id %]_head" onclick="setTab('tabs-2_[% bp.id %]')">Details</span>
          <span class="tabs clickable" id="tabs-3_[% bp.id %]_head" onclick="setTab('tabs-3_[% bp.id %]')">Filter</span>
          <span class="tabs clickable" id="tabs-4_[% bp.id %]_head" onclick="setTab('tabs-4_[% bp.id %]')">Children</span>
          <span class="tabs clickable" id="tabs-5_[% bp.id %]_head" onclick="setTab('tabs-5_[% bp.id %]')">Link</span>
          <span class="tabs clickable" id="tabs-6_[% bp.id %]_head" onclick="setTab('tabs-6_[% bp.id %]')">General</span>
        </div>
        <button class="iconOnly medium hoverable mr-2" onClick="closeModalWindow(); return false;"><i class="uil uil-times"></i></button>
      </div>

<!-- TAB 1: TYPE -->
      <div id="tabs-1_[% bp.id %]" class="js-tabs h-full w-min self-center">
        <input type="hidden" name="bp_function" id="bp_function" value="">
        [% PROCESS _bp_node_type %]
      </div>

<!-- TAB 2: DETAILS -->
      <div id="tabs-2_[% bp.id %]" class="js-tabs grow h-full overflow-auto">


    <!-- host/service status type select -->
    [% WRAPPER _bp_context_menu_frame.tt
        div_id='bp_select_status'
        function='status'
        div_help='Uses status from the selected host or service.<br>'
              _ 'The hoststatus will be used if the service is left empty.<br>'
              _ 'Regular expressions in service descriptions are possible, ex.:<br>'
              _ 'Service: <span class="textHINT">w:^db_.*</span> (worst state of all db_* services),<br>'
              _ 'Service: <span class="textHINT">b:^(db_|web_).*</span> (best state from all db_*  and web_* services)'
    %]
    <tr>
      <th class="text-right">Host</th>
      <td><input type="text" class="w-80" value="" id="bp_arg1_status" name="bp_arg1_status" placeholder="hostname" onfocus="this.click()" onclick="ajax_search.init(this, 'host', { url: 'status.cgi?format=search&amp;type=hosts', autosubmit:false })"></td>
    </tr>
    <tr>
      <th class="text-right">Service</th>
      <td>
        <div class="flexrow flex-nowrap gap-1 w-80">
          <select name="bp_arg3_status" id="bp_arg3_status" class="filter_op_select w-fit">
            <option value="~">~</option>
            <option value="!~">!~</option>
            <option value="=">=</option>
            <option value="!=">!=</option>
          </select>
          <input type="text" class="w-full" value="" id="bp_arg2_status" name="bp_arg2_status" placeholder="optional service description" onfocus="this.click()" onclick="ajax_search.init(this, 'service', { url: 'status.cgi?format=search&amp;type=services&amp;host=', autosubmit:false, regex_matching:true, search_for_cb:bp_remove_search_prefix, append_value_of: 'bp_arg1_status' })">
        </div>
      </td>
    </tr>
    [% END %]


    <!-- hostgroup/servicegroup status type select -->
    [% WRAPPER _bp_context_menu_frame.tt
        div_id='bp_select_groupstatus'
        function='groupstatus'
        div_help='Uses status from the selected host- or servicegroup.<br>'
               _ 'Thresholds are calculated against the number of failed objects.<br>'
               _ 'Not using thresholds will display the worst host/servicestate.'
    %]
    <tr>
      <th class="text-right">Type</th>
      <td>
        <div class="bp_groupstatus_radio radiogroup">
          <input type="radio" value="hostgroup"    id="bp_groupstatus_hostgroup"    name="bp_arg1_groupstatus" onChange="bp_groupstatus_check_changed()" /><label for="bp_groupstatus_hostgroup">Hostgroup</label>
          <input type="radio" value="servicegroup" id="bp_groupstatus_servicegroup" name="bp_arg1_groupstatus" onChange="bp_groupstatus_check_changed()" /><label for="bp_groupstatus_servicegroup">Servicegroup</label>
        </div>
      </td>
    </tr>
    <tr>
      <th class="text-right">Group</th>
      <td><input type="text" class="w-80" value="" id="bp_arg2_groupstatus" name="bp_arg2_groupstatus" placeholder="hostgroup" onfocus="this.click()" onclick="ajax_search.init(this, bp_get_type_from_groupstatus, { url: 'status.cgi?format=search&amp;', autosubmit:false })"></td>
    </tr>
    <tr>
      <th class="text-right">Hosts Warning</th>
      <td><input type="text" class="w-80" value="" id="bp_arg3_groupstatus" name="bp_arg3_groupstatus" placeholder="opt. hosts warn. threshold, ex: 5 or 10%"></td>
    </tr>
    <tr>
      <th class="text-right">Hosts Critical</th>
      <td><input type="text" class="w-80" value="" id="bp_arg4_groupstatus" name="bp_arg4_groupstatus" placeholder="opt. hosts crit. threshold, ex: 5 or 10%"></td>
    </tr>
    <tr>
      <th class="text-right">Services Warn.</th>
      <td><input type="text" class="w-80" value="" id="bp_arg5_groupstatus" name="bp_arg5_groupstatus" placeholder="opt. services warn. threshold, ex: 5 or 10%"></td>
    </tr>
    <tr>
      <th class="text-right">Services Crit.</th>
      <td><input type="text" class="w-80" value="" id="bp_arg6_groupstatus" name="bp_arg6_groupstatus" placeholder="opt. services crit. threshold, ex: 5 or 10%"></td>
    </tr>
    [% END %]


    <!-- hostgroup/servicegroup status type select -->
    [% WRAPPER _bp_context_menu_frame.tt
        div_id='bp_select_statusfilter'
        function='statusfilter'
        div_help='Uses status from the filtered hosts- or services.'
    %]
    <tr>
      <th class="text-right">Aggregation</th>
      <td>
        <div class="bp_statusfilter_radio radiogroup w-64">
          <input type="radio" value="worst" id="bp_statusfilter_worst" name="bp_arg1_statusfilter" onchange="bp_statusfilter_changed()" checked="checked" /><label for="bp_statusfilter_worst">Worst</label>
          <input type="radio" value="best" id="bp_statusfilter_best" name="bp_arg1_statusfilter" onchange="bp_statusfilter_changed()" /><label for="bp_statusfilter_best">Best</label>
          <input type="radio" value="threshold" id="bp_statusfilter_threshold" name="bp_arg1_statusfilter" onchange="bp_statusfilter_changed()" /><label for="bp_statusfilter_threshold">Threshold</label>
        </div>
      </td>
    </tr>
    <tr>
      <th class="text-right">Type</th>
      <td>
        <div class="bp_statusfilter_radio radiogroup w-64">
          <input type="radio" value="both" id="bp_statusfilter_both" name="bp_arg2_statusfilter" checked="checked" onchange="bp_statusfilter_changed()" /><label for="bp_statusfilter_both">Both</label>
          <input type="radio" value="hosts" id="bp_statusfilter_hosts" name="bp_arg2_statusfilter" onchange="bp_statusfilter_changed()" /><label for="bp_statusfilter_hosts">Hosts</label>
          <input type="radio" value="services" id="bp_statusfilter_services" name="bp_arg2_statusfilter" onchange="bp_statusfilter_changed()" /><label for="bp_statusfilter_services">Services</label>
        </div>
      </td>
    </tr>
    <tr>
      <th class="text-right align-top">Filter</th>
      <td>
        [% PROCESS _status_filter_single.tt paneprefix="dfl_" prefix="s0" onchange="" %]
      </td>
    </tr>
    <tr class="statusfilter_host_thresholds">
      <th class="text-right">Hosts Warning</th>
      <td><input type="text" class="w-80" value="" id="bp_arg4_statusfilter" name="bp_arg4_statusfilter" placeholder="opt. hosts warn. threshold, ex: 5 or 10%"></td>
    </tr>
    <tr class="statusfilter_host_thresholds">
      <th class="text-right">Hosts Critical</th>
      <td><input type="text" class="w-80" value="" id="bp_arg5_statusfilter" name="bp_arg5_statusfilter" placeholder="opt. hosts crit. threshold, ex: 5 or 10%"></td>
    </tr>
    <tr class="statusfilter_service_thresholds">
      <th class="text-right" nowrap>Services Warn.</th>
      <td><input type="text" class="w-80" value="" id="bp_arg6_statusfilter" name="bp_arg6_statusfilter" placeholder="opt. services warn. threshold, ex: 5 or 10%"></td>
    </tr>
    <tr class="statusfilter_service_thresholds">
      <th class="text-right">Services Crit.</th>
      <td><input type="text" class="w-80" value="" id="bp_arg7_statusfilter" name="bp_arg7_statusfilter" placeholder="opt. services crit. threshold, ex: 5 or 10%"></td>
    </tr>
    [% END %]


    <!-- dummy/fixed type select -->
    [% WRAPPER _bp_context_menu_frame.tt
        div_id='bp_select_fixed'
        function='fixed'
        div_help='Shows the same fixed state all the time.'
    %]
    <tr>
      <th class="text-right">Status</th>
      <td>
        <div class="bp_fixed_radio radiogroup">
          <input type="radio" value="OK" id="bp_fixed_ok" name="bp_arg1_fixed" checked="checked" /><label for="bp_fixed_ok">Ok</label>
          <input type="radio" value="WARNING" id="bp_fixed_warning" name="bp_arg1_fixed" /><label for="bp_fixed_warning">Warning</label>
          <input type="radio" value="CRITICAL" id="bp_fixed_critical" name="bp_arg1_fixed" /><label for="bp_fixed_critical">Critical</label>
          <input type="radio" value="UNKNOWN" id="bp_fixed_unknown" name="bp_arg1_fixed" /><label for="bp_fixed_unknown">Unknown</label>
        </div>
      </td>
    </tr>
    <tr>
      <th class="text-right">Plugin Output</th>
      <td><input type="text" class="w-80" value="" name="bp_arg2_fixed" placeholder="dummy plugin output"></td>
    </tr>
    [% END %]

    <!-- best type select -->
    [% WRAPPER _bp_context_menu_frame.tt
        div_id='bp_select_best'
        function='best'
        div_help='Shows the best state of all nodes.'
    %]
      <tr>
        <td class="text-center" colspan=2>this aggregation function does not have any arguments.</td>
      </tr>
    [% END %]

    <!-- worst type select -->
    [% WRAPPER _bp_context_menu_frame.tt
        div_id='bp_select_worst'
        function='worst'
        div_help='Shows the worst state of all nodes.'
    %]
      <tr>
        <td class="text-center" colspan=2>this aggregation function does not have any arguments.</td>
      </tr>
    [% END %]

    <!-- exactly/equal type select -->
    [% WRAPPER _bp_context_menu_frame.tt
        div_id='bp_select_equals'
        function='equals'
        div_help='Ok if the number of good nodes equals this number.'
    %]
    <tr>
      <th class="text-right">Number</th>
      <td><input type="text" class="w-80" value="" name="bp_arg1_equals" placeholder="threshold, ex.: 2 or 30%"></td>
    </tr>
    [% END %]

    <!-- not_more type select -->
    [% WRAPPER _bp_context_menu_frame.tt
        div_id='bp_select_not_more'
        function='not_more'
        div_help='Ok if the number of good nodes is lower than the threshold.<br>'
              _ 'There must be <b>not more</b> than this number of nodes ok.'
    %]
    <tr>
      <th class="text-right">Warning</th>
      <td><input type="text" class="w-80" value="" name="bp_arg1_not_more" placeholder="threshold, ex.: 2 or 30%"></td>
    </tr>
    <tr>
      <th class="text-right">Critical</th>
      <td><input type="text" class="w-80" value="" name="bp_arg2_not_more" placeholder="threshold, ex.: 3 or 50%"></td>
    </tr>
    [% END %]

    <!-- at_least type select -->
    [% WRAPPER _bp_context_menu_frame.tt
        div_id='bp_select_at_least'
        function='at_least'
        div_help='Ok if the number of good nodes is higher than the threshold.<br>'
              _ 'There must be <b>at least</b> this number of nodes ok.'
    %]
    <tr>
      <th class="text-right">Warning</th>
      <td><input type="text" class="w-80" value="" name="bp_arg1_at_least" placeholder="threshold, ex.: 3 or 50%"></td>
    </tr>
    <tr>
      <th class="text-right">Critical</th>
      <td><input type="text" class="w-80" value="" name="bp_arg2_at_least" placeholder="threshold, ex.: 2 or 30%"></td>
    </tr>
    [% END %]

    <!-- custom type select -->
    [% WRAPPER _bp_context_menu_frame.tt
        div_id='bp_select_custom'
        function='custom'
        div_help='Custom Aggregation Functions.<br><a class="link" href="http://thruk.org/documentation/business-process.html#custom-functions" target="_blank">See online documentation for details<i class="uil uil-external-link-alt text-sm"></i></a>'
    %]
    <tr>
      <th class="text-right">Custom Function</th>
      <td>
        <select name="bp_arg1_custom" class="w-80" id="bp_arg1_custom" onchange="bp_update_cust_attributes(this)">
        </select>
      </td>
    </tr>
    [% END %]

      </div>

<!-- TAB 3: FILTER -->
      <div id="tabs-3_[% bp.id %]" class="js-tabs grow h-full">
        <div class="p-2 flexcol">
          <div class="grow-0 text-center">Add input/output filter for this node only or globally for all nodes.</div>
          <div class="grow">
            <table>
              <thead>
                <tr>
                  <th></th>
                  <th>Off</th>
                  <th>On</th>
                  <th>Global</th>
                </tr>
              </thead>
              <tbody>
              [% FOREACH f = bp_custom_filter %]
              <tr>
                <th title="[% f.help | html %]" onmouseover="jQuery('#filter_help').html(this.title)" onmouseout="jQuery('#filter_help').html('')">[% f.name %]</th>
                <td><input type="radio" name="bp_filter_[% f.function | html %]" class="node_filter" value="off" checked></td>
                <td><input type="radio" name="bp_filter_[% f.function | html %]" class="node_filter" value="on"></td>
                <td><input type="radio" name="bp_filter_[% f.function | html %]" class="node_filter" value="global"></td>
              </tr>
              [% END %]
              </tbody>
            </table>
          </div>
          <div id="filter_help"></div>
        </div>
      </div>

<!-- TAB 4: CHILDREN -->
      <div id="tabs-4_[% bp.id %]" class="js-tabs grow h-full">
        <div class="p-2 flexcol h-full">
          <div class="grow-0 text-center">Change relationships for this node.</div>
          <table class="h-full">
            <tr>
              <th>Available</th>
              <th></th>
              <th>Selected</th>
            </tr>
            <tr>
              <td class="align-top w-1/2 h-full">
                <div class="flexcol gap-0 h-full">
                  <input type="text" class="w-full rounded-b-none border-b-0 node_filter_available" onkeyup="data_filter_select('bp_[% bp.id %]_available_nodes', this.value)">
                  <select class="w-full h-full rounded-none overflow-y-scroll" multiple id="bp_[% bp.id %]_available_nodes" name="bp_[% bp.id %]_available_nodes" ondblclick="data_select_move('bp_[% bp.id %]_available_nodes', 'bp_[% bp.id %]_selected_nodes', true)">
                      <option disabled>loading...</option>
                  </select>
                </div>
              </td>
              <td class="w-auto h-full">
                <button class="m-2 p-0 px-1" id="bp_[% bp.id %]_add" onclick="data_select_move('bp_[% bp.id %]_available_nodes', 'bp_[% bp.id %]_selected_nodes', true); return false;">&gt;&gt;</button>
                <button class="m-2 p-0 px-1" id="bp_[% bp.id %]_remove" onclick="data_select_move('bp_[% bp.id %]_selected_nodes', 'bp_[% bp.id %]_available_nodes'); return false;">&lt;&lt;</button>
              </td>
              <td class="align-top w-1/2 h-full">
                <div class="flexcol gap-0 h-full">
                  <input type="text" class="w-full rounded-b-none border-b-0 node_filter_selected" onkeyup="data_filter_select('bp_[% bp.id %]_selected_nodes', this.value)">
                  <select class="w-full h-full rounded-none overflow-y-scroll" multiple id="bp_[% bp.id %]_selected_nodes" name="bp_[% bp.id %]_selected_nodes" ondblclick="data_select_move('bp_[% bp.id %]_selected_nodes', 'bp_[% bp.id %]_available_nodes')">
                      <option disabled>loading...</option>
                  </select>
                </div>
              </td>
            </tr>
          </table>
        </div>
      </div>

<!-- TAB 5: LINKS -->
      <div id="tabs-5_[% bp.id %]" class="js-tabs grow h-full overflow-auto">
        <div class="p-2">
          <div>
            Create a service for this node. The business process itself will be exported as host object.<br>
            All selected nodes will be exported as services. The node label will be used as object name.<br>
          </div>
          [% IF objects_save_file && objects_templates_file %]
            <table class="cellspacing mt-2">
              <tr>
                <th class="align-top text-right">Create Link</th>
                <td>
                  <input type="checkbox" name="bp_create_link" id="bp_create_link" value="1" onclick="bp_update_obj_create()">
                  <span class="ml-5">(The first/main node will always be linked automatically.)</span>
                  <span class='create_obj_nok textALERT'>Cannot create link, link with same label already exists.</span>
                </td>
              </tr>
              <tr>
                <th class="align-top text-right">Host Template</th>
                <td>
                  <input type="text" class="w-80 bp_create" value="" id="bp_host_template" name="bp_host_template" placeholder="host template" onfocus="this.click()" onclick="ajax_search.init(this, 'host template', { url: 'bp.cgi?action=templates', autosubmit:false })">
                </td>
              </tr>
              <tr>
                <th class="align-top text-right">Service Template</th>
                <td>
                  <input type="text" class="w-80 bp_create" value="" id="bp_template" name="bp_template" placeholder="service template" onfocus="this.click()" onclick="ajax_search.init(this, 'service template', { url: 'bp.cgi?action=templates', autosubmit:false })">
                  [% IF objects_save_format == "nagios" && use_feature_configtool %]
                    <br>
                    <div class="pt-2">
                      <a href="conf.cgi?sub=objects&amp;action=editor&amp;file=[% objects_templates_file | uri %]" target="_blank" class="link">
                        <i class="fa-solid fa-pencil text-sm"></i>
                        Edit Templates
                      </a>
                    </div>
                  [% END %]
                </td>
              </tr>
              [% IF objects_save_format == "nagios" %]
                <tr>
                  <th class="align-top text-right">Contact Groups</th>
                  <td>
                    <div class="flexrow flex-nowrap gap-1">
                      <input type="text" class="w-80 bp_create" id="bp_contactgroups" name="bp_contactgroups" placeholder="contactgroup, ..." value="" onfocus="this.click()" onclick="ajax_search.init(this, 'contactgroup', { url: 'status.cgi?format=search&amp;type=contactgroup', autosubmit:false, list: '\\s*,\\s*' })">
                      <button class="iconOnly px-1 hoverable" onclick="bpRemoveAttribute('contactgroups'); return false;" title="remove this attribute"><i class="uil uil-times"></i></button>
                    </div>
                  </td>
                </tr>
                <tr>
                  <th class="align-top text-right">Contacts</th>
                  <td>
                    <div class="flexrow flex-nowrap gap-1">
                      <input type="text" class="w-80 bp_create" id="bp_contacts" name="bp_contacts" placeholder="contact, ..." value="" onfocus="this.click()" onclick="ajax_search.init(this, 'contact', { url: 'status.cgi?format=search&amp;type=contact', autosubmit:false, list: '\\s*,\\s*', striped: false })">
                      <button class="iconOnly px-1 hoverable" onclick="bpRemoveAttribute('contacts'); return false;" title="remove this attribute"><i class="uil uil-times"></i></button>
                    </div>
                  </td>
                </tr>
                <tr>
                  <th class="align-top text-right">Eventhandler</th>
                  <td>
                    <div class="flexrow flex-nowrap gap-1">
                      <input type="text" class="w-80 bp_create" id="bp_event_handler" name="bp_event_handler" placeholder="eventhandler command" value="" onfocus="this.click()" onclick="ajax_search.init(this, 'command', { url: 'status.cgi?format=search&amp;type=command', autosubmit:false })">
                      <button class="iconOnly px-1 hoverable" onclick="bpRemoveAttribute('event_handler'); return false;" title="remove this attribute"><i class="uil uil-times"></i></button>
                    </div>
                  </td>
                </tr>
                <tr>
                  <th class="align-top text-right">Notification Period</th>
                  <td>
                    <div class="flexrow flex-nowrap gap-1">
                      <input type="text" class="w-80 bp_create" id="bp_notification_period" name="bp_notification_period" placeholder="notification period" value="" onfocus="this.click()" onclick="ajax_search.init(this, 'timeperiod', { url: 'status.cgi?format=search&amp;type=timeperiod', autosubmit:false })">
                      <button class="iconOnly px-1 hoverable" onclick="bpRemoveAttribute('notification_period'); return false;" title="remove this attribute"><i class="uil uil-times"></i></button>
                    </div>
                  </td>
                </tr>
                <tr>
                  <th class="align-top text-right">Max Check Attempts</th>
                  <td>
                    <div class="flexrow flex-nowrap gap-1">
                      <input type="text" class="w-80 bp_create" id="bp_max_check_attempts" name="bp_max_check_attempts" placeholder="max check attempts" value="">
                      <button class="iconOnly px-1 hoverable" onclick="bpRemoveAttribute('max_check_attempts'); return false;" title="remove this attribute"><i class="uil uil-times"></i></button>
                    </div>
                  </td>
                </tr>
                <tr>
                  <th class="align-top text-right">Add Extra Options</th>
                  <td>
                    <form>
                      <select onchange="bpAddAttribute(this.value)" class="w-80">
                        <option>--- add extra option ---</option>
                        <option value="contactgroups">Contact Groups</option>
                        <option value="contacts">Contacts</option>
                        <option value="event_handler">Eventhandler</option>
                        <option value="notification_period">Notification Period</option>
                        <option value="max_check_attempts">Max Check Attempts</option>
                      </select>
                    </form>
                  </td>
                </tr>
              [% END %]
            </table>
          [% ELSE %]
            <div class="mt-5 w-fit mx-auto">
              <span class="textHINT font-bold">The export is currently disabled.</span><br>
              In order to enable linking, you need to set:
              <ul class="list-disc ml-5">
                <li>objects_templates_file</li>
                <li>objects_save_file</li>
              </ul>
              in your configuration.
              <div class="pt-5">
                <a class="link" href="http://thruk.org/documentation.html#_component_thruk_plugin_bp" target="_blank">Open online documentation<i class="uil uil-external-link-alt text-sm"></i></a>
              </div>
            </div>
          [% END %]
        </div>
      </div>

<!-- TAB 6: GLOBAL OPTIONS -->
      <div id="tabs-6_[% bp.id %]" class="js-tabs grow h-full overflow-scroll">
        <table class="cellspacing-y">
          <tr>
            <th colspan=2 class="align-top px-2 border-b borderDefault"><h4>Data Processing Options</h4></th>
          </tr>
          <tr>
            <th class="text-right pr-2 align-top w-20">Sites</th>
            <td class="pr-5">
              [% IF backends.size > 10 %]
                [% PROCESS _backends_select_multi.tt param_name='bp_backends' selected_backends=bp.backends can_edit=1 %]
              [% ELSIF backends.size > 1 %]
                [% backends_selected=0 %]
                [% IF bp.backends.size > 0 %][% backends_selected=1 %][% END %]
                <div class="align-center flexrow gap-1">
                  <input type="checkbox" id="backends_toggle" name="backends_toggle"[% IF backends_selected %] checked[% END %] onclick="toggleElement('bp_backends');">
                  <span onclick="toggleCheckBox('backends_toggle'); toggleElement('bp_backends');" class="clickable"> Select specific backends:</span>
                </div>
                <select id="bp_backends" name="bp_backends" multiple class="mt-1 w-56" style="min-width: 180px;[% IF !backends_selected %] display: none;[% END %]">
                  [% FOREACH b = backends %]
                  <option value="[% b | html %]"[% FOREACH rb = bp.backends %][% IF backends_selected && rb == b %] selected[% END %][% END %]>[% backend_detail.$b.name %]</option>
                  [% END %]
                </select>
              [% ELSE %]
                <span class="textHINTsoft">Cannot specify backends, only one backend available.</span>
              [% END %]
            </td>
          </tr>
          <tr>
            <th class="text-right pr-2">State Type</th>
            <td>
              <select name="bp_state_type">
                <option value="both"[% IF bp.state_type == 'both' %] selected[% END %]>Use Hard and Soft States</option>
                <option value="hard"[% IF bp.state_type == 'hard' %] selected[% END %]>Use Hard States Only</option>
              </select>
            </td>
          </tr>
          <tr>
            <td colspan=2 class="text-center">
              <b>Note:</b> Hostgroup and Servicegroup aggregations will always use Hard and Soft states.<br>
              This is a limitation of the livestatus broker.
            </td>
          </tr>
          <tr>
            <th colspan=2 class="align-top pt-2 border-b borderDefault"><h4>Graph Options</h4></th>
          </tr>
          <tr>
            <th class="text-right pr-2">Direction</th>
            <td>
              <select onchange="bp_redraw_changed('bp_rankDir', this.value)" name="bp_rankDir">
                <option value="TB"[% IF bp.rankDir == 'TB' %] selected[% END %]>Top-Bottom</option>
                <option value="LR"[% IF bp.rankDir == 'LR' %] selected[% END %]>Left Right</option>
              </select>
            </td>
          </tr>
        </table>
      </div>

      <div class="footer h-min py-2 flexrow justify-evenly items-end">
        <button class="w-16" onclick="closeModalWindow()">Cancel</button>
        <button class="green w-16">Accept</button>
      </div>
    </div>
  </form>
</div>
