doctype html
html
  head
    title Source Route Result
    link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
    script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"
    script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"

  body(ng-app="SourceRoute")
    / workaround for following case:
    / pry(main)> ActiveRecord::Inheritance::ClassMethods.to_json => {} # Dont know why
    ruby:
      local_trace_data = @tp_attrs_results.map do |tp_result|
        if tp_result.has_key?(:defined_class)
          tp_result[:defined_class] = tp_result[:defined_class].to_s
        end
        tp_result
      end

    .data-collect
      / dont use local_trace_data.to_json, because ActiveSupport override it and can introduce unexpected crash for some data
      #trace-data data-trace="#{JSON.dump(local_trace_data)}"

    .container(ng-controller="MainCtrl")
      .top-header
        h4
          | Event:
          =< @condition.events
      .trace-flow
        .row
          .left-info.col-sm-4
            .well.well-sm(ng-repeat="klass in definedClasses")
              button.btn.btn-default(ng-click="selectKlass(klass)")
                span(ng-bind="klass")
          .center-info.col-sm-6
            .well.well-lg(ng-repeat="trace in traces | filter:{defined_class: selectedKlass}")

              .header(ng-click="showMoreDetail = !showMoreDetail")
                span(ng-bind="trace.defined_class")
                span
                  | .
                span(ng-bind="trace.method_id")

                span<>(ng-if="trace.return_value")
                  | =>
                span<>(ng-if="trace.return_value" ng-bind="trace.return_value")

              .details(ng-if="showMoreDetail")
                .local-vars.well.well-sm(ng-if="trace.local_var" style="color: green")
                  span Local Var
                  .local-values(ng-repeat="(key, value) in trace.local_var")
                    span<>(ng-bind="key")
                    span<>
                      | =>
                    span<>(ng-bind="value || 'null'")
                .ins-vars.well.well-sm(ng-if="trace.instance_var" style="color: blue")
                  span Instance Var
                  .ins-values(ng-repeat="(key, value) in trace.instance_var")
                    span<>(ng-bind="key")
                    span<>
                      | =>
                    span<>(ng-bind="value || 'null'")

          .right-info.col-sm-2

    script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"

    javascript:
      sourceRoute = angular.module('SourceRoute', [])
      sourceRoute.controller('MainCtrl', function($scope) {
        $scope.traces = angular.element("#trace-data").data('trace')
        // it is possible to prevent dirty check on definedClasses after it was generated
        $scope.definedClasses = _.uniq(_.map($scope.traces, 'defined_class'))
        var all_counter = 'ALL ' + $scope.traces.length
        $scope.definedClasses.unshift(all_counter)

        $scope.selectKlass = function(klass) {
          if (klass == all_counter) {
            $scope.selectedKlass = undefined
          } else {
            $scope.selectedKlass = klass
          }
        }

      })