[% USE date %]
<div class="h-full flexrow flex-nowrap gap-3" id="[% id %]">
  <div class="w-60 border-r borderDefault overflow-hidden" [% IF profiles.size <= 1 %]style="display: none;"[% END %]>
    <nav class="inline-flex -space-x-px h-7">
      <a class="pager rounded-md flex items-center font-medium justify-center px-1.5 min-w-[2rem]" onclick="show_list(-1, '#[% id %] DIV.profiles', '#[% id %] DIV.js-prof-head');"><i class="uil uil-angle-left  contents text-lg"></i></a>
      <a class="pager rounded-md flex items-center font-medium justify-center px-1.5 min-w-[2rem]" onclick="show_list( 1, '#[% id %] DIV.profiles', '#[% id %] DIV.js-prof-head');"><i class="uil uil-angle-right contents text-lg"></i></a>
    </nav>
    <div class="actionbox max-h-full overflow-y-auto">
      [% FOREACH p = profiles %]
        <div class="js-prof-head [% IF loop.first %]active[% END %]">
          <a class="flex font-mono" href="#" onclick="show_list('#[% loop.index %]', '#[% id %] DIV.profiles', '#[% id %] DIV.js-prof-head'); return false;">
            <div class="relative w-24 h-5">
              [% IF p.defined("total_perc") %]
                <div style="width: [% sprintf("%.0f", p.total_perc) %]%;" class="WARNING opacity-50 absolute top-0 left-0 h-5"></div>
              [% END %]
              <span class="absolute top-0 left-0">[% date_format(c, p.time, "%H:%M:%S.%MILLI") %]</span>
            </div>
            <div class="ml-2 text-ellipsis overflow-hidden w-32" title="[% p.name | html %]">[% p.name | html %]</div>
          </a>
        </div>
      [% END %]
    </div>
  </div>
  <div class="grow min-w-[600px] min-h-[400px] overflow-y-auto w-[820px]">
    [% FOREACH p = profiles %]
      <div class="profiles w-[800px]"[% IF !loop.first %] style="display: none;"[% END %]>
        <div class="head p-0 mb-2" [% IF profiles.size <= 1 %]style="display: none;"[% END %]>
          <span class="tabs text-sm active">[% p.name | html %]</span>
        </div>
        [% IF p.defined("html") %]
          <div class="font-mono">[% p.html %]</div>
          [% IF p.defined("text") %]
            <div style="display: none;">[% p.text %]</div>
          [% END %]
        [% ELSIF p.defined("text") %]
          <div class="whitespace-pre font-mono">[% p.text %]</div>
        [% END %]
      </div>
    [% END %]
  </div>

  <script>
    jQuery(document).ready(function() {
      profilePageInit_[% id %]();
    });
    function profilePageInit_[% id %]() {
      // DIV requires absolute px height, but we just want 90% of the screen
      var height = jQuery(window).height() * 0.8;
      if(height <  600) { height =  600; }
      if(height > 1000) { height = 1000; }
      jQuery("#[% id %] DIV.profiles").css("height", height+"px");
      jQuery(document).on('keyup', function(evt) {
        if(evt.keyCode == 39) { // right
          if((jQuery("#[% id %]").hasClass("card") && jQuery("#[% id %]").css("display") != "none") || (jQuery("#[% id %]").parentsUntil('.card').css("display") != "none")) {
            show_list(1, '#[% id %] DIV.profiles', '#[% id %] DIV.js-prof-head');
          }
        }
        if(evt.keyCode == 37) { // left
          if(jQuery("#[% id %]").parents('.card').css("display") != "none") {
            show_list(-1, '#[% id %] DIV.profiles', '#[% id %] DIV.js-prof-head');
          }
        }
      });
      jQuery("#[% id %] TR.js-indent").on("mouseover", function(evt) {
        var row = evt.target;
        if(row.tagName != "TR") {
          row = jQuery(row).parents("TR")[0];
        }
        var indent = row.dataset["indent"];
        var next = row;
        while(1) {
          jQuery(next).addClass("active-hover");
          next = jQuery(next).next("TR");
          if(!next || !next[0] || !next[0].dataset) {
            break;
          }
          var rowIndent = next[0].dataset["indent"];
          if(!rowIndent || rowIndent <= indent) {
            break;
          }
        }

      });
      jQuery("#[% id %] TR.js-indent").on("mouseout", function(evt) {
        jQuery("#[% id %] TR.js-indent").removeClass("active-hover");
      });
    }
  </script>
  <style>
    TR.active-hover TD {
      background-color: var(--hover-bg);
    }
  </style>
</div>
