<img ng-show="loading && !noprofile" class="center-block loading" src="/static/vmprof/images/loader.gif" />

<div detail-top></div>

 <!-- this is used just as the the container of tooltips, so that I can style
      them selectively in main.css -->
<div id="wide-popovers"></div>

<div id="item" ng-show="noprofile" class="well">
    <h2 class="text-center">There is no profile data</h2>
</div>

<div id="item" ng-show="!loading" ng-hide="noprofile">

    <ol class="breadcrumb">
        <li>
            <a ng-href="#/{{ log_uuid }}/?view={{ visualization }}">{{ log.data.argv }}</a>
            <span ng-if="name">: {{ name }}</span>
        </li>
        <li ng-repeat="path in paths">
            <a ng-href="#/{{ log_uuid }}/?view={{ visualization }}&id={{ path.path }}">
                {{ path.name }} {{ "(" + (path.percentage * 100).toFixed(2) + "%)" }}
            </a>
        </li>
    </ol>

    <header>

        <div class="times">
            <span data-toggle="tooltip" title="Cumulative time spent in this function here">
                <i class="fa fa-clock-o"></i>
                <strong>{{ (node_total_time * 100).toFixed(2) }}%</strong>
            </span>
            <span data-toggle="tooltip" title="Cumulative time spent in this function everywhere">
                /
                <strong>{{ (total_time * 100).toFixed(2) }}%</strong>
            </span>

            <span data-toggle="tooltip" title="Time spent in this function here">
                <i class="fa fa-arrow-down"></i>
                <strong>{{ (node_self_time * 100).toFixed(2) }}%</strong>
            </span>
            <span data-toggle="tooltip" title="Time spent in this function everywhere">
                /
                <strong>{{ (self_time * 100).toFixed(2) }}%</strong>
            </span>
        </div>

        <div class="metadata" ng-if="root.cumulative_meta">
            <span class="label label-danger">
                Interpreted: {{ (root.red() * 100).toFixed(2) }}%
            </span>

            <span class="label label-primary" ng-if="root.cumulative_meta">
                Native: {{ (root.darkblue() * 100).toFixed(2) }}%
            </span>

            <span class="label label-warning" data-toggle="tooltip"
                  title="Blackhole: {{ (root.blackhole() * 100).toFixed(2) }}% tracing: {{ (root.tracing() * 100).toFixed(2) }}%">
                Warm-up: {{ (root.yellow() * 100).toFixed(2) }}%
            </span>

            <span class="label label-success">
                JIT: {{ (root.green() * 100).toFixed(2) }}%
            </span>

            <span class="label label-info" data-toggle="tooltip"
                  title="Minor: {{ (root.gc_minor() * 100).toFixed(2) }}% major: {{ (root.gc_major() * 100).toFixed(2) }}%">
                GC: {{ (root.gc() * 100).toFixed(2) }}%
            </span>
            <i class="fa fa-question-circle" data-toggle="tooltip" title="Meta data (cumulative for this callsite)"></i>
        </div>
    </header>

</div>


<div ng-show="!loading" class="panel panel-default" ng-hide="noprofile">

    <div class="btn-group" role="group" aria-label="...">
        <span data-toggle="tooltip" title="Show the list of all functions">
        <button type="button" class="btn btn-default"
                ng-click="visualizationChange('list')"
                ng-class="{active: visualization=='list'}"}>
                <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
        </button>
        </span>
        <span data-toggle="tooltip" title="Show the list of all functions sorted by self">
        <button type="button" class="btn btn-default"
                ng-click="visualizationChange('list-2')"
                ng-class="{active: visualization=='list-2'}"}>
                <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
        </button>
        </span>
        <span data-toggle="tooltip" title="Show execution flamegraph">
        <button type="button" class="btn btn-default"
                ng-click="visualizationChange('flames')"
                ng-class="{active: visualization=='flames'}"}>
                <span class="glyphicon glyphicon-align-center" aria-hidden="true"></span>
        </button>
        </span>
    </div>
    <span id="visualization-data">
    </span>
    <div id="visualization"></div>
</div>

