{% set nosidebar = True %}
{% import "utils.html" as utils %}

{% extends "layout.html" %}
{% set components = [(ts.name, v4_url_for(".v4_recent_activity"))] %}

{% block head %}
  <script language="javascript" type="text/javascript"
          src="{{ url_for('.static',
               filename='lnt_run.js') }}"></script>
  <script language="javascript" type="text/javascript"
          src="{{ url_for('.static',
               filename='lnt_profile.js') }}"></script>
  <script language="javascript" type="text/javascript"
          src="{{ url_for('.static',
               filename='flot/jquery.flot.min.js') }}"> </script>
  <script language="javascript" type="text/javascript"
          src="{{ url_for('.static',
               filename='jquery/1.7.2/jquery-ui-1.8.22.custom.min.js') }}"> </script>
  <script language="javascript" type="text/javascript"
          src="{{ url_for('.static',
               filename='jquery/jquery.scrolltofixed/jquery-scrolltofixed.min.js') }}"> </script>
  <script language="javascript" type="text/javascript"
          src="{{ url_for('.static',
               filename='d3/d3.min.js') }}"> </script>
  <link rel="stylesheet" href="{{ url_for('.static',
                               filename='lnt_profile.css') }}">
  <script>
    g_run1 = {{run1|tojson|safe}};
    g_run2 = {{run2|tojson|safe}};
    g_test = {{test.id|tojson|safe}};
    g_urls = {{urls|tojson|safe}};
  </script>
{% endblock %}

{% block onload %}
  pf_init(g_run1, g_run2, g_test, g_urls);
  $('.tooltip').tooltip();
{% endblock %}

{% block title %}Profile{% endblock %}

{% block body %}
  <div class="row">
    <div class="span12">
      <h3>Performance profile: {{ test.name }}
        <span id="throbber" class="pull-right">Loading...</span>
      </h3>
      <div id="flashes"></div>
    </div>
  </div>
  <div class="row-fluid runrow">
    <div class="span6 text-center">
      <span class="inner-addon left-addon">
        <input id="run1_box" class="input-xlarge" type="text" placeholder="Select a run to profile">
        <span class="icon icon-search"></span>
      </span>
    </div>
    <div class="span6 text-center">
      <span class="inner-addon left-addon">
        <input id="run2_box" class="input-xlarge" type="text" placeholder="Select a run to compare with">
        <span class="icon icon-search"></span>
      </span>
    </div>
  </div>
  <div class="row-fluid statsrow">
    <div class="span9" id="stats">
    </div>
    <div class="span3" id="stats-graph">
    </div>
  </div>
  <div class="row-fluid fnrow">
    <div class="span6 text-center">
      <span class="inner-addon left-addon fn-box-holder">
        <input id="fn1_box" style="width:85%;" type="text" placeholder="Function">
        <span class="icon icon-folder-open"></span>
      </span>
    </div>
    <div class="span6 text-center">
      <span class="inner-addon left-addon fn-box-holder">
        <input id="fn2_box" style="width:85%;" type="text" placeholder="Function">
        <span class="icon icon-folder-open"></span>
      </span>
    </div>
  </div>

  <div class="anchor"></div>
  <div class="row-fluid toolbarrow" id="toolbar">
    <div class="span4">
      <b>View:</b>
      <select class="input-medium" id="view">
        <option value="straight">Straight</option>
        <option value="cfg-aarch64">Control-Flow Graph (AArch64)</option>
        <option value="cfg-aarch32t32">Control-Flow Graph (AArch32-T32)</option>
        <option value="cfg-aarch32a32">Control-Flow Graph (AArch32-A32)</option>
        <option value="cfg-riscv">Control-Flow Graph (RISC-V)</option>
        <option value="cfg-x86_64">Control-Flow Graph (X86-64)</option>
      </select>
    </div>
    <div class="span4">
      <b>Hottest instructions:</b>
      <button class="btn btn-small prev-btn-l"><i class="icon-backward"></i> Prev</button>
      <button class="btn btn-small next-btn-l">Next <i class="icon-forward"></i></button>
    </div>
    <div class="span4">
      <b>Counter:</b>
      <select id="counters" class="input-medium"></select>
      <select class="input-medium" id="absolute">
        <option value="relative">Relative (%)</option>
        <option value="absolute">Absolute numbers</option>
        <option value="cumulative">Cumulative absolute numbers</option>
      </select>
    </div>
  </div>

  <div class="row-fluid">
    <div class="span6" id="profile1"></div>
    <div class="span6" id="profile2"></div>
  </div>

{% endblock %}