[% USE date %]
<div class="absolute top-1 right-2 flexcol gap-px p-0 z-20 bp_container_zoom">
  [% IF minimal %]
  <div class="h-5">
    <div class="bp_status_extinfo_link" style="display: none;"></div>
  </div>
  [% END %]
  <a class="button text-xs font-normal p-px m-0" href="#" onclick="bp_zoom_rel(0.05)">+</a>
  <a class="button text-xs font-normal p-px m-0" href="#" onclick="bp_zoom_reset()" id='zoom_val_[% bp.id %]'>=</a>
  <a class="button text-xs font-normal p-px m-0" href="#" onclick="bp_zoom_rel(-0.05)">-</a>
</div>
<div class="bp_back_link z-20 absolute top-1 left-2" style="display: none;">
  <a href="" class="button iconOnly m-0" onclick="return(bp_details_link_clicked(event, this))"><i class="fa-solid fa-house leading-none"></i></a>
</div>
<div class="relative w-full h-full z-10 overflow-auto">
  <div id='zoom[% bp.id %]'>
    <div id='container[% bp.id %]' class="bp_container" style="height: 100%; width: 100%; visibility: hidden;">
      <div id='inner_container[% bp.id %]'>
        [% FOREACH n IN bp.nodes %]
        [% statusClass = 'UNKNOWN' %]
        [% short_desc  = "" %]
        [% IF    n.status == 0 %][% statusClass = 'OK' %]
        [% ELSIF n.status == 1 %][% statusClass = 'WARNING' %]
        [% ELSIF n.status == 2 %][% statusClass = 'CRITICAL' %]
        [% ELSIF n.status == 3 %][% statusClass = 'UNKNOWN' %]
        [% ELSIF n.status == 4 %][% statusClass = 'PENDING' %][% short_desc = "status not yet calculated" %]
        [% END %]
        [% IF n.defined('short_desc') %][% short_desc = n.short_desc %][% END %]
        [% IF n.testmode %][% short_desc = 'testmode' %][% END %]
        [% has_details_link = 0 %]
        [% IF no_menu && (n.create_obj || n.defined('bp_ref') || n.host || n.hostgroup || n.servicegroup) %]
          [% has_details_link = 1 %]
        [% END %]
        <div id='[% n.id %]'
            class='bp_node rounded borderDark border w-[120px] h-[40px] absolute text-center z-10 overflow-visible [% IF !no_menu || has_details_link %]clickable [% END %] [% statusClass %][% IF n.testmode %] testmode[% END %][% IF highlight_node == n.id %] bp_node_active[% END %]'
            [% UNLESS no_menu %]oncontextmenu="bp_context_menu_open(event, this)"[% END %]
            onmouseover="bp_mouse_over_node(event, this);"
            onmouseout="bp_mouse_out_node(event, this);"
            [% IF editmode %] ondblclick="bp_show_edit_node('current');return false;"[% END %]
            [% IF has_details_link %]
            onclick="return(bp_details_link_click(event, this))"
            data-href=""
            data-target=""
            [% END %]
        >
            <div class="bp_label" [% IF n.label.length > 20 %]style="font-size: 9px; line-height: 8px;"[% END %]><span class="bp_label">[% n.label | html %]</span></div>
            <div class="bp_sublabel" title="[% nl2br(escape_html(short_desc)).replace('<br>', '&#013;') %]">[% short_desc | html %]</div>
            [% UNLESS no_menu %]
            <a href="#" onclick="return bp_context_menu_open(event, {id:'[% n.id %]'})" class="bp_node_edit_icon hoverable rounded"><i class="fa-solid fa-pencil text-xs textBody js-edit-icon"></i></a>
            [% END %]
            <a href="#" class="bp_node_bp_ref_icon hoverable rounded" style="visibility: hidden;"><i class="fa-solid fa-shuffle text-xs textBody"></i></a>
            <a href="#" class="bp_node_link_icon hoverable rounded" style="visibility: hidden;"><i class="fa-solid fa-arrow-right text-xs textBody"></i></a>
            <div class="absolute top-0 left-0 flexrow gap-px">
              [% IF n.testmode %]
                <i class="fa-solid fa-lock text-xs textBody" title="Status has been locked by testmode"></i>
              [% END %]
              [% IF n.scheduled_downtime_depth > 0 %]
                <i class="fa-solid fa-moon text-xs textBody" title="This Business Process is currently in a period of scheduled downtime"></i>
              [% END %]
              [% IF n.acknowledged > 0 %]
                <i class="fa-solid fa-person-digging text-xs textBody" title="This problem has been acknowledged"></i>
              [% END %]
            </div>
            [% IF editmode && n.create_obj %]
            <div class="absolute bottom-0 left-1">
              <i class="uil uil-link-h textBody" title="This node is linked to a host or service object"></i>
            </div>
            [% END %]
            [% IF editmode  %]
            <div class="bp_node_add_icon clickable hoverable rounded relative left-10 bottom-1 w-fit hidden" onclick="bp_add_new_node()">
              <i class="uil uil-plus-circle textBody" title="add new node"></i>
            </div>
            [% END %]
        </div>
        [%+ END %]
      </div>
    </div>
  </div>
</div>
<script>
    var node_width  = 120,
        node_height =  40;
    var nodes = [% bp.get_json_nodes(c) %];
    [% edges = [];
      FOREACH n IN bp.nodes;
        FOREACH d IN n.depends(bp);
          edges.push([n.id, d.id]);
        END;
    END %]
    var edges = [
      [% FOREACH e IN edges %]
      { sourceId: "[% e.0 %]", targetId: "[% e.1 %]" }[% UNLESS loop.last %],[% END +%]
      [%+ END %]
    ];

    var bp_id       = [% bp.id %];
    var bp_name     = "[% escape_js(bp.name) %]";
    var bp_template = '[% bp.template %]';
    var editmode    = [% editmode %];
    var testmode    = [% testmode %];
    var bp_no_menu  = [% no_menu %];
    var bp_iframed  = [% iframed %];
    var htmlCls     = "[% extrahtmlclass | html %]";
    var bp_backend  = '[% bp_backend %]';
    var testmodes   = [% json_encode(testmodes) %];
    var cust_func   = [% json_encode(bp_custom_functions) %];
    var bp_filter   = [% json_encode(bp.filter) %];
    var bp_status   = [% json_encode([bp.status_text]) %][0];

    var bp_graph_options = {
        'bp_rankDir': '[% bp.rankDir %]',
        'bp_nodeSep': 20,
        'bp_edgeSep': 10,
        'bp_rankSep': 30
    };

    jQuery(document).ready(function() {
      bp_loaded();
    })
</script>
