[% PROCESS _header.tt css="plugins/${plugin_name}/bp-${fileversion}.css"
                      js=["plugins/${plugin_name}/bp-${fileversion}.js",
                          "vendor/dagre-1.0.4/dagre.min.js"
                         ]
%]
[% PROCESS _message.tt %]

[% PROCESS _blocks.tt loop={index => 0} %]

[% UNLESS no_menu %]
  [% PROCESS _bp_context_menu.tt %]
[% END %]

<div class="flexrow flex-nowrap w-full h-full [% IF minimal %]minimal[% END %]">
  <div class="card flexcol flex-nowrap gap-0 w-full h-full">
    [% IF !iframed %]
    <div class="head justify-between">
      [% IF !minimal %]
        <div class="w-32">
          <a href="bp.cgi" class="button header-button rounded w-[70px]" title="Go back to business process list"><i class="uil uil-angle-double-left"></i>Back</a>
        </div>
      [% END %]
      <h3 id="subtitle">
        [% subtitle | html %]
        [% IF editmode %]
          <span class="textHINT">(Edit-Mode)</span>
        [% ELSIF testmode %]
          <span class="textHINT">(Business-Impact-Analysis-Mode)</span>
        [% END %]
      </h3>

      <div class="w-32">
      [% IF editmode %]
        [% PROCESS _button btn = {
          form   => { action => 'bp.cgi', },
          data   => { action => 'commit', bp => bp.id, CSRFtoken => get_user_token(c), },
          button => { html => '<i class="uil uil-save"></i>save changes', onclick => 'setBtnSpinner(this); return true;' },
        }%]
      [% END %]
      </div>
    </div>
    [% END %]
    <div id='bp[% bp.id %]' class="flex grow relative bp_zoom_container[% IF iframed %] mt-1[% END %]">
      [% PROCESS _bp_graph.tt %]
    </div>
  </div>

  [% UNLESS minimal %]
  <div class="w-80">
    <div class="card w-full overflow-visible">
      <div class="head">
        <h3>Information</h3>
      </div>
      <table class="body cellspacing table-fixed">
        <tr>
          <th class="w-28">Label</th>
          <td class="whitespace-normal">
            <div class="flexrow flex-nowrap gap-1 justify-between">
              <div id="bp_status_label"></div>
              <div class="bp_status_extinfo_link"></div>
            </div>
          </td>
        </tr>
        <tr>
          <th>Status</th>
          <td>
            <div class="flexrow flex-nowrap gap-0 justify-between">
              <div id="bp_status_status"></div>
              <div class="bp_status_status_icons">
                <i id="bp_status_icon_downtime" class="fa-solid fa-moon" title="This Business Process is currently in a period of scheduled downtime" style="display: none;"></i>
                <i id="bp_status_icon_ack" class="fa-solid fa-person-digging" title="This problem has been acknowledged" style="display: none;"></i>
              </div>
            </div>
          </td>
        </tr>
        <tr class='clickable' onclick="toggleElement('bp_status_plugin_output_expanded', undefined, true); return false;">
          <th>Plugin Output<div id="bp_status_plugin_output_expand" class="w-full text-center font-bold h-4">...</div></th>
          <td class="align-top relative">
            <div class="absolute w-0 h-0 right-0 top-0">
              <div id="bp_status_plugin_output_expanded" class="card shadow-float fixed z-50 p-2 -translate-x-full" style="display: none;"></div>
            </div>
            <div id="bp_status_plugin_output" class="truncate max-w-full overflow-hidden"></div>
          </td>
        </tr>
        <tr>
          <th>Last Check</th>
          <td>
            <div class="flexrow gap-0 justify-between">
              <div id="bp_status_last_check"></div>
              <div id="bp_status_waiting" class="spinner" style="display: none;" title="This business process is currently updating"></div>
            </div>
          </td>
        </tr>
        <tr>
          <th>Duration</th>
          <td id="bp_status_duration"></td>
        </tr>
        <tr>
          <th>Function</th>
          <td>
            <div class="flexrow flex-nowrap gap-1 justify-between">
              <div id="bp_status_function" class="truncate"></div>
              <div class="bp_ref_link"></div>
            </div>
          </td>
        </tr>
      </table>
    </div>

    <div class="card mt-5 w-full overflow-hidden">
      <div class="head">
        <h3>Actions</h3>
      </div>
      <div class="actionbox">
        <div>
          <a href='bp.cgi'><i class="fa-solid fa-backward-step"></i>List All Business Processes</a>
        </div>
        <div>
          <a href='#' onclick="current_node='node1'; bp_refresh('[% bp.id %]', current_node); return false;"><i class="fa-solid fa-arrows-rotate"></i>Refresh Status</a>
        </div>
        <div>
          <a href='bp.cgi?action=details&amp;bp=[% bp.id %]&amp;minimal=1&amp;nav=0'><i class="fa-solid fa-maximize"></i>Enable Fullscreen Mode</a>
        </div>
        [% IF bp_backend %]
          <div>
            <a href="status.cgi?host=[% bp.name | uri %]&amp;backend=[% bp_backend | uri %]"><i class="fa-solid fa-bars"></i>Show Status</a>
            <a class="ml-1" href='bp.cgi?action=list_objects&amp;bp=[% bp.id %]'>(including all referenced objects)</a>
          </div>
          <div>
            <a href="trends.cgi?service=[% bp.name | uri %]&host=[% bp.name | uri %]&timeperiod=last7days&amp;backend=[% bp_backend | uri %]"><i class="fa-solid fa-chart-simple"></i>Show Trends</a>
          </div>
          <div>
            <a href="avail.cgi?show_log_entries=&service=[% bp.name | uri %]&host=[% bp.name | uri %]&timeperiod=last7days&amp;backend=[% bp_backend | uri %]"><i class="fa-solid fa-align-center"></i>View Availability Report</a>
          </div>
          <div>
            <a href="notifications.cgi?service=[% bp.name | uri %]&host=[% bp.name | uri %]&timeperiod=last7days&amp;backend=[% bp_backend | uri %]"><i class="fa-solid fa-bell"></i>View Notifications</a>
          </div>
          <div>
            <a href="showlog.cgi?host=[% bp.name | uri %]&amp;service=[% bp.name | uri %]&amp;backend=[% bp_backend | uri %]"><i class="fa-solid fa-rectangle-list"></i>Show Logfiles</a>
          </div>
        [% END %]
        [% IF !testmode %]
        <div>
          <a href='bp.cgi?action=details&amp;bp=[% bp.id %]&amp;testmode=1'><i class="fa-solid fa-clipboard-question"></i>Business Impact Analysis</a>
        </div>
        [% END %]
        [% IF allowed_for_edit && ! editmode %]
        <div>
          <a href='bp.cgi?action=details&amp;bp=[% bp.id %]&amp;edit=1'><i class="fa-solid fa-pencil"></i>Enable Edit Mode</a>
        </div>
        [% END %]
        [% IF allowed_for_edit && editmode %]
        <div>
          <a href='[% IF bp_backend %]bp.cgi?action=details&amp;bp=[% bp.id %][% ELSE %]bp.cgi[% END %]'><i class="fa-solid fa-circle-xmark"></i>Cancel Edit Mode</a>
        </div>
        [% END %]
      </div>
    </div>

    [% IF editmode %]
      <div class="card mt-5 w-full overflow-hidden">
        <div class="head">
          <h3>Edit Actions</h3>
        </div>
        <div class="actionbox">
          <div>
            <a href='bp.cgi?action=clone&amp;bp=[% bp.id %]'><i class="fa-solid fa-copy"></i>Clone this Business Process</a>
          </div>
          <div>
            <form action='bp.cgi' method='POST' style="display: inline;">
              <input type='hidden' name='action' value='remove'>
              <input type="hidden" name="bp" value="[% bp.id %]">
              <input type="hidden" name="CSRFtoken" value="[% get_user_token(c) %]">
              <a class="hover-red-text" href='bp.cgi' onClick="confirm('A removed business process cannot be restored. Really remove?') && jQuery(this).closest('FORM').submit(); return false;"><i class="fa-solid fa-trash"></i>Delete this Business Process</a>
            </form>
          </div>
          <div>
            <form action='bp.cgi' method='POST' style="display: inline;">
              <input type='hidden' name='action' value='revert'>
              <input type="hidden" name="bp" value="[% bp.id %]">
              <input type="hidden" name="CSRFtoken" value="[% get_user_token(c) %]">
              <a href='bp.cgi' onClick="confirm('Really discard all changes?') && jQuery(this).closest('FORM').submit(); return false;"><i class="fa-solid fa-square-caret-left"></i>Discard Changes</a>
            </form>
          </div>
          <div>
            <form action='bp.cgi' method='POST' style="display: inline;">
              <input type='hidden' name='action' value='commit'>
              <input type="hidden" name="bp" value="[% bp.id %]">
              <input type="hidden" name="CSRFtoken" value="[% get_user_token(c) %]">
              <a href='bp.cgi' onClick="jQuery(this).closest('FORM').submit(); return false;"><i class="fa-solid fa-save"></i>Save Changes</a>
            </form>
          </div>
        </div>
      </div>
    [% END %]

    [% IF outgoing_refs.size > 0 || incoming_refs.size > 0 %]
      <div class="card mt-5 w-full">
        <div class="head">
          <h3>Navigation</h3>
        </div>
        <div class="actionbox">
          [% FOREACH r = incoming_refs %]
            <div>
              <a href="bp.cgi?action=details&amp;bp=[% r.fullid %]"><i class="fa-solid fa-arrow-left"></i><span class="truncate max-w-full">[% r.name | html %]</span></a>
            </div>
          [% END %]
          [% IF incoming_refs.size > 0 && outgoing_refs.size > 0 %]
            <div class="px-0 not-hoverable"><hr></div>
          [% END %]
          [% FOREACH r = outgoing_refs %]
            <div>
              <a href="bp.cgi?action=details&amp;bp=[% r.fullid %]"><i class="fa-solid fa-arrow-right"></i><span class="truncate max-w-full">[% r.name | html %]</span></a>
            </div>
          [% END %]
        </div>
      </div>
    [% END %]

  </div>
  [% END %]

</div>

<script>
<!--
  var bp_backend        = '[% bp_backend | uri %]';
  var bp_affected_peers = [% IF bp.defined("affected_peers") %][% json_encode(bp.affected_peers) %][% ELSE %]["ALL"][% END %];
  jQuery(document).ready(function() {
    bp_render('container[% bp.id %]', nodes, edges);
  });
-->
</script>

[% PROCESS _footer.tt %]
