[% PROCESS _header.tt
    js           => [ "vendor/flot-d7c58b5/jquery.flot.js",
                      "vendor/flot-d7c58b5/jquery.flot.time.js",
                      "vendor/flot-d7c58b5/jquery.flot.selection.js",
                      "vendor/flot-d7c58b5/jquery.flot.stack.js",
                      "vendor/flot-d7c58b5/jquery.flot.crosshair.js",
                      "plugins/${plugin}/omd_top-${fileversion}.js",
                    ],
    css          => [ "plugins/${plugin}/omd_top-${fileversion}.css", ],
%]
[% PROCESS _message.tt %]
[% USE date %]

<div id='tooltip' class="card absolute opacity-90 p-1 z-50" style="display: none;"></div>
<div class="flexrow justify-between mb-5">
  <div class="w-[300px]"></div>
  <div>
    <h1>Top Reporting Overview</h1>
  </div>
  <div class="w-[300px]">
    [% IF folders.size > 1 %]
      <form method="GET" action="omd.cgi">
        <div class="card">
          <div class="body flexrow flex-nowrap gap-x-1">
            <div class="content-center"><h3>Folder</h3></div>
            <div>
              <select name='folder'>
                [% FOREACH f = folders %]
                  <option value="[% f.dir | html %]"[% IF f.dir == folder %] selected[% END %]>[% f.display %]</option>
                [% END %]
              </select>
            </div>
            <div>
              <input type='submit' value='Change'>
            </div>
          </div>
        </div>
      </form>
    [% END %]
  </div>
</div>


[% IF folders.size == 0 %]
  <div class="card orange alert w-[600px] relative mx-auto">
    <div class="head"><h3>No Input Folders</h3></div>
    <div class="body">
      Make sure you have some input folders defined and at least one of them contains data.<br>
      If you just enabled this plugin, wait one minute till...<br>
      <a class="link" href="https://thruk.org/documentation/plugins/omd/" target="_blank"><i class="uil uil-external-link-alt"></i>Read plugin documentation.</a>
    </div>
  </div>
[% ELSE %]
  <div class="card w-full max-w-7xl">
    <div class="head justify-between">
      <h3>Overview Graph</h3>
      <div class="textHINTsoft">select a range to display details</div>
    </div>
    <div class="body">
      <div id="load_graph" class="h-96 w-full min-w-[400px]"></div>
    </div>
  </div>

<script type="text/javascript">
jQuery().ready(function() {
    standard_xaxis = { mode: "time",
                  timezone: "browser",
                  labelHeight: 0,
                  labelWidth: 0,
                  tickFormatter: function() { return(""); }
    };
    var standard_grid = {
        hoverable: true,
        backgroundColor: _backgroundColor()
    };

    /* load graph */
    var load_options = {
        xaxis: { mode: "time",
             timezone: "browser"
        },
        yaxes: [{
                   min: 0,
                   tickFormatter: function(val, axis) { return(val < axis.max ? _trim_number(val) : "Load"); }
        }],
        crosshair: standard_crosshair,
        grid:      standard_grid,
        selection: standard_selection,
        legend:    standard_legend
    };
    var load_series = [% encode_json_obj(load_series) %];
    var load_plot   = jQuery.plot('#load_graph', load_series, load_options);
    load_plot.draw();

    /* add zooming and hover */
    jQuery('#load_graph').bind("plothover", function (event, pos, item) {
        if (item) {
            var date    = _dateString(item.datapoint[0]);
            var tooltip = _getTooltipFromSeries(date, load_plot, item.dataIndex);
            // place next to mouse position
            var pos = mouseRelativePosition();
            jQuery("#tooltip").html(tooltip)
                              .css({left: pos[0] + 10, top: pos[1]})
                              .fadeIn(200);
        } else {
            jQuery("#tooltip").stop(true).hide();
        }
    });

    /* enable zooming */
    jQuery('#load_graph').bind("plotselected", function (event, ranges) {
        if(ranges == null) { return; }
        window.location = 'omd.cgi?action=top_details&t1='+Math.floor(ranges.xaxis.from/1000)+'&t2='+Math.ceil(ranges.xaxis.to/1000)+'&folder=[% folder %]';
    });
});

</script>
[% END %]

[% PROCESS _footer.tt %]
