@(user: String, csrfToken: String)
  @main(user, csrfToken) {
    <div>
      <div id="mainSplitter">
        <div id="tabSplitter">
          <ul id="menutabs" class="nav nav-tabs">
            <li>
              <a data-toggle="tab" href="#filtertab">Dataset</a>
            </li>
            <li><a data-toggle="tab" href="#flowtab">Flow</a></li>
          </ul>
          <div class="tab-content">
            <div id="filtertab" class="tab-pane">
              <div id="tree2" data-source="ajax" class="sampletree">
              </div>
            </div>
            <div id="flowtab" class="tab-pane">
              <div id="tree3" data-source="ajax" class="sampletree">
              </div>
            </div>
          </div>
        </div>
        <div id="contentSplitter">
        </div>
      </div>
    </div>

    <div class="modal" tabindex="-1" role="dialog" aria-labelledby="convertTableModal" id="convertTableModal">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h3>Convert a CSV table to markdown table</h3>
          </div>
          <div class="modal-body">
            <textarea style="width: 100%; height: 200px;" id="tsv-input"></textarea>
            <label><input type="checkbox" id="has-headers"> Use first line as headers</label>
            <select id="delimiter-marker">
              <option value="tab">Tab Separated</option>
              <option value=",">Comma Separated</option>
              <option value=";">Semicolon Separated</option>
            </select>
            <hr>
            <textarea style="width: 100%; height: 200px;" id="table-output" readonly=""></textarea>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-dismiss="modal">
              Cancel
            </button>
            <button type="button" class="btn btn-default" id="submitConvertForm">
              Insert
            </button>
          </div>
        </div>
      </div>
    </div>

    <script type="text/x-handlebars" id="components/dataset-favorite">
      <i
      {{bind-attr class=":fa dataset.isFavorite:fa-heart:fa-heart-o"}}
      {{action "favorites" dataset}}
      >
      </i>
    </script>

    <script type="text/x-handlebars" id="components/dataset-owner">
      <i
        {{bind-attr class=":fa dataset.isOwned:fa-bookmark:fa-bookmark-o"}}
        {{action "owned" dataset}}
      >
      </i>
    </script>

    <script type="text/x-handlebars" id="components/dataset-watch">
      <i
        {{bind-attr class=":fa dataset.watchId:fa-eye-slash:fa-eye"}}
        {{action "watch" dataset}}
      >
      </i>
      {{#if showText}}
        {{#if dataset.watchId}}
          Unwatch
        {{else}}
          Watch
        {{/if}}
      {{/if}}
    </script>

    <script type="text/x-handlebars" id="components/metric-watch">
      <i
        {{bind-attr class=":fa metric.watchId:fa-eye-slash:fa-eye"}}
        {{action "watch" metric}}
      >
      </i>
      {{#if showText}}
        {{#if metric.watchId}}
          Unwatch
        {{else}}
          Watch
        {{/if}}
      {{/if}}
    </script>

    <script type="text/x-handlebars" id="components/dataset-comments">
      <div class="row commentsHeader">
        <div class="col-xs-3">
        <b>Comments</b>
        </div>
        <div
          class="col-xs-6 text-center commentsPagination"
        >
          {{#if comments}}
          <ul class="pager">
            <li class="previous">
              <button
                class="btn btn-default btn-xs"
                {{action "pageBack"}}
              >
                <span aria-hidden="true">&larr;</span>
                Older
              </button>
            </li>
            <li>
              {{page}} of {{totalPages}}
            </li>
            <li class="next">
              <button
                class="btn btn-default btn-xs"
                {{action "pageForward"}}
              >
                Newer
                <span aria-hidden="true">&rarr;</span>
              </button>
            </li>
          </ul>
          {{/if}}
        </div>
        <div class="col-xs-3 text-right pull-right">
          <button
            type="button"
            class="btn btn-default btn-xs"
            {{action "showModal"}}
          >
            <i class="fa fa-plus"></i>
          </button>
        </div>
      </div>
      <div class="row commentsArea">
        {{#if comments}}
        {{#each comment in comments}}
        <div class="col-xs-12 well comment">
          <span class="bs-docs-example">
            {{comment.type}}
          </span>
          <div class="text comment-text">
            {{comment.html}}
          </div>
          <div class="meta">
            <a href="#" class="author">{{comment.authorName}}</a>
            <span class="date">{{comment.created }}</span>
            {{#if comment.isAuthor}}
            <div
              class="pull-right actions"
            >
              <i
                class="fa fa-pencil"
                {{action "showModal" comment}}
              >
              </i>
              <i
                class="fa fa-trash"
                {{action "remove" comment}}
              >
              </i>
            </div>
            {{/if}}
          </div>
        </div>
        {{/each}}
        {{else}}
        <div class="col-xs-12 well text-center">
          {{#if commentsLoading}}
            <i class="fa fa-spinner fa-3x spinning"></i>
          {{else}}
            No Comments.
          {{/if}}
        </div>
        {{/if}}
      </div>

      <div
        class="modal"
        tabindex="-1"
        role="dialog"
        aria-labelledby="datasetCommentModal"
        id="datasetCommentModal"
      >
        <div class="modal-dialog modal-lg" role="document" style="top:30px;">
          <div class="modal-content">
            <div class="modal-header">
            Comment on <b>{{dataset.name}}</b>
            </div>
            <div class="modal-body">
              <div class="row">
                <div class="col-xs-3 pull-left text-right">
                  {{view "select" content=commentTypes value=comment.type class="form-control"}}
                </div>
              </div>
              <div>
                <ul class="nav nav-tabs" role="tablist">
                  <li role="presentation" class="active">
                    <a
                      href="#datasetComment-write"
                      aria-controls="datasetComment-write"
                      role="tab"
                      data-toggle="tab"
                    >
                      Write
                    </a>
                  </li>
                  <li role="presentation">
                    <a
                      href="#datasetComment-preview"
                      aria-controls="datasetComment-preview"
                      role="tab"
                      data-toggle="tab"
                    >
                      Preview
                    </a>
                  </li>
                </ul>
                <div class="tab-content">
                  <div
                    role="tabpanel"
                    class="tab-pane active"
                    id="datasetComment-write"
                  >
                    <div class="meldown_wrap" style="width: 787px;">
                      <div class="mdt_button mdt_button_bold" title="Bold" {{action 'insertElement' 'bold'}}>
                      </div>
                      <div class="mdt_button mdt_button_italic" title="Italic" {{action 'insertElement' 'italic'}}>
                      </div>
                      <div class="mdt_button mdt_button_delimiter">
                      </div>
                      <div class="mdt_button mdt_button_heading_1" title="H1" {{action 'insertElement' 'heading_1'}}>
                      </div>
                      <div class="mdt_button mdt_button_heading_2" title="H2" {{action 'insertElement' 'heading_2'}}>
                      </div>
                      <div class="mdt_button mdt_button_heading_3" title="H3" {{action 'insertElement' 'heading_3'}}>
                      </div>
                      <div class="mdt_button mdt_button_delimiter">
                      </div>
                      <div class="mdt_button mdt_button_list_bullets" title="Bulleted list" {{action 'insertList' 'bulleted'}}>
                      </div>
                      <div class="mdt_button mdt_button_list_numbers" title="Numbered list" {{action 'insertList' 'numbered'}}>
                      </div>
                      <div class="mdt_button mdt_button_blockquote" title="Blockquote" {{action 'insertList' 'blockquote'}}>
                      </div>
                      <div class="mdt_button mdt_button_code" title="Source Code" {{action 'insertSourcecode'}}>
                      </div>
                      <div class="mdt_button mdt_button_delimiter">
                      </div>
                      <div class="mdt_button mdt_button_image" title="Image" {{action 'insertImageOrLink' 'image'}}>
                      </div>
                      <div class="mdt_button mdt_button_link" title="Link" {{action 'insertImageOrLink' 'link'}}>
                      </div>
                      <div class="mdt_button mdt_button_table" {{action 'importCSVTable'}} title="Import CSV table">
                      </div>
                    </div>
                    {{textarea id="datasetcomment" value=comment.text name="text"
                        class="form-control" focus-out="updatePreview"}}
                  </div>
                  <div
                    role="tabpanel"
                    class="tab-pane commentsArea"
                    id="datasetComment-preview"
                  >
                  </div>

                </div>
              </div>
            </div>
            <div class="modal-footer">
              <div class="row">
                <div class="col-xs-6 pull-right text-right">
                  <button
                    type="button"
                    class="btn btn-default"
                    data-dismiss="modal"
                    {{action "hideModal"}}
                  >
                    Close
                  </button>
                  <button
                    type="button"
                    class="btn btn-primary"
                    {{action "create" comment}}
                  >
                    Save
                  </button>
                </div>
              </div>
            </div>
          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
      </div><!-- /.modal -->
    </script>

    <script type="text/x-handlebars" id="datasets">
      <div id="pagedDatasets">
        <div class="row">
          <div class="col-xs-12">
            {{#unless detailview}}
            <div class="search-pagination">
              <ul class="pager">
                {{#unless first}}
                  <li class="previous">
                    {{#if urn}}
                      {{#link-to 'subpage' currentName previousPage (query-params urn=urn)}}
                        &larr; Prev
                      {{/link-to}}
                    {{else}}
                      {{#link-to 'page' previousPage}}
                        &larr; Prev
                      {{/link-to}}
                    {{/if}}
                  </li>
                {{/unless}}
                <li>
                  {{ model.data.count }} datasets - page {{ model.data.page }} of {{ model.data.totalPages }}
                </li>
                {{#unless last}}
                  <li class="next">
                    {{#if urn}}
                      {{#link-to 'subpage' currentName nextPage (query-params urn=urn)}}
                        Next &rarr;
                      {{/link-to}}
                    {{else}}
                      {{#link-to 'page' nextPage}}
                        Next &rarr;
                      {{/link-to}}
                    {{/if}}
                  </li>
                {{/unless}}
              </ul>
            </div>
            {{/unless}}
            {{#unless detailview}}
            <div class="well well-sm">
              <div class="row">
                <div class="col-xs-10">
                  <ul class="breadcrumbs">
                    {{#each breadcrumbs as |crumb|}}
                      <li>
                        <a
                          title="{{crumb.title}}"
                          href="#/datasets/{{crumb.urn}}"
                        >
                          {{crumb.title}}
                        </a>
                      </li>
                    {{/each}}
                  </ul>
                </div>
                <div class="col-xs-2 text-right">
                  <button
                    type="button"
                    class="btn btn-primary btn-sm pull-right"
                    {{action 'watchUrn' urn}}
                  >
                    <i
                      {{bind-attr class=":fa urnWatched:fa-eye-slash:fa-eye"}}
                    ></i>
                    {{#if urnWatched}}
                      Unwatch
                    {{else}}
                      Watch
                    {{/if}}
                  </button>
                </div>
              </div>
            </div>
            <table
              class="table table-bordered search-results"
              style="word-break: break-all;">
              <tbody>
                {{#each dataset in model.data.datasets}}
                  <tr>
                    <td>
                      <div class="row">
                        <div class="col-md-8">
                          <div class="col-xs-12">
                            {{#link-to 'dataset' dataset}}
                              {{ dataset.name }}
                            {{/link-to}}
                          </div>
                          {{#if dataset.owners}}
                          <div class="col-xs-12">
                            <span class="prop-label">owner:</span>
                            {{#each owner in dataset.owners}}
                              <p style="display:inline" title={{owner.name}}>{{ owner.userName }} </p>
                            {{/each}}
                          </div>
                          {{/if}}
                          {{#if dataset.formatedModified}}
                          <div class="col-xs-12">
                            <span class="prop-label">last modified:</span>
                            {{ dataset.formatedModified }}
                          </div>
                          {{/if}}
                        </div>
                        <div class="col-md-4 text-right">
                          <ul class="datasetTableLinks">
                            <li
                              class="text-center no-link"
                            >
                              <span class="source">
                                {{ dataset.source }}
                              </span>
                            </li>
                            <li class="text-center" title="ownership">
                              {{#dataset-owner dataset=dataset action="owned"}}
                              {{/dataset-owner}}
                            </li>
                            <li class="text-center" title="favorite">
                              {{#dataset-favorite dataset=dataset action="didFavorite"}}
                              {{/dataset-favorite}}
                            </li>
                            <li class="text-center" title="watch">
                              {{#dataset-watch dataset=dataset getDatasets='getDatasets'}}
                              {{/dataset-watch}}
                            </li>
                            <li class="text-center">
                              <a
                                href="/lineage/dataset/{{dataset.id}}"
                                title="lineage for {{dataset.name}}"
                              >
                                <i class="fa fa-sitemap"></i>
                              </a>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </td>
                  </tr>
                {{/each}}
              </tbody>
            </table>
            {{/unless}}
          </div>
          <div class="col-xs-12">
            {{outlet}}
          </div>
        </div>
      </div>
    </script>

    <script type="text/x-handlebars" data-template-name="schema">
      {{#if hasSchemas}}
        <div class="row" style="margin-top: 5px; margin-bottom: 5px;">
          <div class="col-xs-12">
            <div
              class="btn-group"
              role="group"
              aria-label="Toggle Tabular/JSON Schema View">
              <button
                type="button"
                {{bind-attr class=":btn isTable:btn-primary:btn-default"}}
                {{action "setView" "table"}}>
                View As Tabular
              </button>
              <button
                type="button"
                {{bind-attr class=":btn isJSON:btn-primary:btn-default"}}
                {{action "setView" "json"}}>
                View As JSON
              </button>
            </div>
          </div>
        </div>
        {{#if isTable}}
          <table class="columntreegrid tree table table-bordered dataset-detail-table">
            <thead>
              <tr class="results-header">
                <th style="min-width: 200px;" class="col-xs-2 wrap-all-word">Column</th>
                <th class="col-xs-1">Data Type</th>
                <th title="Is nullable" style="width:15px;">N</th>
                <th title="Is indexed" style="width:15px;">I</th>
                <th title="Is partitioned" style="width:15px;">P</th>
                <th title="Is distributed" style="width:15px;">D</th>
                <th class="col-xs-8"> Default Comments</th>
              </tr>
            </thead>
            <tbody>
              {{#each schema in schemas}}
              <tr {{bind-attr class="schema.treeGridClass"}}>
                <td>{{schema.fieldName}}</td>
                <td>{{schema.dataType}}</td>
                <td title="Is nullable" class="text-center">
                  {{#if schema.nullable}}
                    <i class="glyphicon glyphicon-ok"></i>
                  {{/if}}
                </td>
                <td title="Is indexed" class="text-center">
                  {{#if schema.indexed}}
                    <i class="glyphicon glyphicon-ok"></i>
                  {{/if}}
                </td>
                <td title="Is partitioned" class="text-center">
                  {{#if schema.partitioned}}
                    <i class="glyphicon glyphicon-ok"></i>
                  {{/if}}
                </td>
                <td title="Is distributed" class="text-center">
                  {{#if schema.distributed}}
                    <i class="glyphicon glyphicon-ok"></i>
                  {{/if}}
                </td>
                <td class="commentsArea">
                  <div class="commentsArea">
                    {{#schema-comment schema=schema datasetId=this.model.id fieldId=schema.id getSchema="getSchema"}}{{/schema-comment}}
                    {{schema.commentHtml}}
                  </div>
                </td>
              </tr>
              {{/each}}
            </tbody>
          </table>
        {{/if}}
        {{#if isJSON}}
          <div id="json-viewer"></div>
        {{/if}}
      {{else}}
        <div id="json-viewer"></div>
      {{/if}}
    </script>

    <script type="text/x-handlebars" id="components/schema-comment">
      <i
        class="fa fa-pencil pull-right"
        {{action "openModal"}}
      ></i>
      {{#if propModal}}
      <div class="modal fade" id="datasetSchemaColumnCommentModal" tabindex="-1" role="dialog" aria-labelledby="Dataset Schema Column Comments">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
            <button type="button" class="close" aria-label="Close" {{action "closeModal"}}>
              <span aria-hidden="true">&times;</span>
            </button>
              <h4 class="modal-title">Comments for <b>{{schema.fieldName}}</b></h4>
            </div>
            <div class="modal-body">
              {{#if loading}}
              <div class="row text-center">
                <div class="col-xs-10 col-xs-offset-1 text-center">
                  <i class="fa fa-spinner spinning fa-4x"></i>
                </div>
              </div>
              {{else}}
                {{#if comments}}
                  {{#each comments as |comment|}}
                  <div class="row">
                    <div class="col-xs-10 col-xs-offset-1 well comment">
                      {{#if comment.isDefault}}
                        <div class="bs-docs-example">
                          <i class="fa fa-star active"></i>
                          Default
                        </div>
                      {{/if}}
                      <div class="text wrap-all-word comment-text commentsArea">
                        {{comment.html}}
                      </div>
                      <div class="meta">
                        <a href="#" class="author">{{comment.authorName}}</a>
                        <span class="date">{{comment.created }}</span>
                        <div class="pull-right actions">
                          <i
                            class="fa fa-arrow-circle-o-up"
                            title="Promote to Default Comment"
                            {{action "setDefault" comment}}
                          >
                          </i>
                          {{#if comment.isAuthor}}
                          <i
                            class="fa fa-pencil"
                            title="Edit"
                            {{action "editMode" comment}}
                          >
                          </i>
                          <i
                            class="fa fa-trash"
                            title="Remove"
                            {{action "remove" comment}}
                          >
                          </i>
                          {{/if}}
                        </div>
                      </div>
                    </div>
                  </div>
                  {{/each}}
                {{else}}
                <div class="row">
                  <div class="col-xs-10 col-xs-offset-1 well text-center">
                    No Comments
                  </div>
                </div>
                {{/if}}
              {{/if}}
              {{#if multiFields}}
              <div class="row">
                <div class="col-xs-12">
                  <div>
                    <ul class="nav nav-tabs" role="tablist">
                      <li role="presentation" class="active">
                        <a href="#similarColumns-view" aria-controls="similarColumns-view" role="tab" data-toggle="tab">
                          Datasets for <b>{{schema.fieldName}}</b>
                        </a>
                      </li>
                      <li role="presentation">
                        <a href="#similarColumns-selected" aria-controls="similarColumns-selected" role="tab" data-toggle="tab">
                          Selected ({{selectedSimilarColumns.length}})
                        </a>
                      </li>
                    </ul>
                    <div class="tab-content">
                      <div role="tabpanel" class="tab-pane active" id="similarColumns-view">
                        <nav>
                          <ul class="pager">
                            <li class="previous">
                              <a href="#" {{action "similarColumnsPrevPage"}}>Prev</a>
                            </li>
                            <li class="next">
                              <a href="#" {{action "similarColumnsNextPage"}}>Next</a>
                            </li>
                          </ul>
                        </nav>
                        <table class="table table-striped table-bordered" style="word-break: break-all;">
                          <thead>
                            <tr>
                              <th class="text-center col-xs-1">
                              </th>
                              <th class="text-center col-xs-2">Dataset Name</th>
                              <th class="text-center col-xs-2">Source</th>
                              <th class="text-center col-xs-2">Data Type</th>
                              <th class="text-center col-xs-5">Default Comment</th>
                            </tr>
                          </thead>
                          <tbody>
                            {{#unless similarColumns.count}}
                              {{#if similarColumns.loading}}
                                <tr>
                                  <td colspan="5">
                                    <div class="row">
                                      <div class="col-xs-12 text-center">
                                        <i
                                          class="fa fa-spinner spinning 2x"
                                        ></i>
                                      </div>
                                    </div>
                                  </td>
                                </tr>
                              {{else }}
                                <tr>
                                  <td colspan="5">
                                    <div class="row">
                                      <div class="col-xs-12 text-center">
                                        No Similar Columns.
                                      </div>
                                    </div>
                                  </td>
                                </tr>
                              {{/if}}
                            {{/unless}}
                            {{#each similarColumns.data as |similar index|}}
                              <tr {{action "selectSimilarColumn" similar index}}>
                                <td class="text-center">
                                  {{input type="checkbox" checked=similar.selected disabled=true}}
                                </td>
                                <td>{{similar.datasetName}}</td>
                                <td>{{similar.source}}</td>
                                <td>{{similar.dataType}}</td>
                                <td>{{similar.html}}</td>
                              </tr>
                            {{/each}}
                          </tbody>
                        </table>
                      </div>
                      <div role="tabpanel" class="tab-pane" id="similarColumns-selected">
                        <table class="table table-striped table-bordered" style="word-break: break-all;">
                          <thead>
                            <tr>
                              <th class="text-center col-xs-1"></th>
                              <th class="text-center col-xs-2">Dataset Name</th>
                              <th class="text-center col-xs-2">Source</th>
                              <th class="text-center col-xs-2">Data Type</th>
                              <th class="text-center col-xs-5">Default Comment</th>
                            </tr>
                          </thead>
                          <tbody>
                            {{#unless selectedSimilarColumns}}
                              <tr>
                                <td colspan="5">
                                  <div class="row">
                                    <div class="col-xs-12 text-center">
                                      No Similar Columns Selected.
                                    </div>
                                  </div>
                                </td>
                              </tr>
                            {{/unless}}
                            {{#each selectedSimilarColumns as |similar index|}}
                              <tr {{action "selectSimilarColumn" similar index}}>
                                <td class="text-center">
                                  {{input type="checkbox" checked=similar.selected disabled=true}}
                                </td>
                                <td>{{similar.datasetName}}</td>
                                <td>{{similar.source}}</td>
                                <td>{{similar.dataType}}</td>
                                <td>{{similar.html}}</td>
                              </tr>
                            {{/each}}
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              {{/if}}
              {{#unless promotionFlow}}
              <div>
                <ul class="nav nav-tabs" role="tablist">
                  <li role="presentation" class="active">
                    <a
                      href="#datasetSchemaComment-write"
                      aria-controls="datasetSchemaComment-write"
                      role="tab"
                      data-toggle="tab"
                      {{action "setTab" "write"}}>
                      Write
                    </a>
                  </li>
                  <li role="presentation">
                    <a
                      href="#datasetSchemaComment-preview"
                      aria-controls="datasetSchemaComment-preview"
                      role="tab"
                      data-toggle="tab"
                      {{action "setTab" "preview"}}>
                      Preview
                    </a>
                  </li>
                  <li role="presentation">
                    <a
                      href="#datasetSchemaComment-similar"
                      aria-controls="datasetSchemaComment-similar"
                      role="tab"
                      data-toggle="tab"
                      {{action "setTab" "similar"}}
                    >
                      Comments for Similar Fields
                    </a>
                  </li>
                </ul>
                <div class="tab-content">
                  <div
                    role="tabpanel"
                    class="tab-pane active"
                    id="datasetSchemaComment-write">
                    <div class="meldown_wrap" style="width: 787px;">
                      <div class="mdt_button mdt_button_bold" title="Bold" {{action 'insertElement' 'bold'}}>
                      </div>
                      <div class="mdt_button mdt_button_italic" title="Italic" {{action 'insertElement' 'italic'}}>
                      </div>
                      <div class="mdt_button mdt_button_delimiter">
                      </div>
                      <div class="mdt_button mdt_button_heading_1" title="H1" {{action 'insertElement' 'heading_1'}}>
                      </div>
                      <div class="mdt_button mdt_button_heading_2" title="H2" {{action 'insertElement' 'heading_2'}}>
                      </div>
                      <div class="mdt_button mdt_button_heading_3" title="H3" {{action 'insertElement' 'heading_3'}}>
                      </div>
                      <div class="mdt_button mdt_button_delimiter">
                      </div>
                      <div class="mdt_button mdt_button_list_bullets" title="Bulleted list" {{action 'insertList' 'bulleted'}}>
                      </div>
                      <div class="mdt_button mdt_button_list_numbers" title="Numbered list" {{action 'insertList' 'numbered'}}>
                      </div>
                      <div class="mdt_button mdt_button_blockquote" title="Blockquote" {{action 'insertList' 'blockquote'}}>
                      </div>
                      <div class="mdt_button mdt_button_code" title="Source Code" {{action 'insertSourcecode'}}>
                      </div>
                      <div class="mdt_button mdt_button_delimiter">
                      </div>
                      <div class="mdt_button mdt_button_image" title="Image" {{action 'insertImageOrLink' 'image'}}>
                      </div>
                      <div class="mdt_button mdt_button_link" title="Link" {{action 'insertImageOrLink' 'link'}}>
                      </div>
                      <div class="mdt_button mdt_button_table" {{action 'importCSVTable'}} title="Import CSV table">
                      </div>
                    </div>
                    {{textarea id="datasetschemacomment" value=comment.text name="text" class="form-control" focus-out="updatePreview"}}
                  </div>
                  <div
                    role="tabpanel"
                    class="tab-pane commentsArea"
                    id="datasetSchemaComment-preview">
                  </div>
                  <div
                    role="tabpanel"
                    class="tab-pane"
                    id="datasetSchemaComment-similar">
                    <div class="row">
                      <div class="col-xs-12 text-center">
                        <table class="table table-striped" style="word-break: break-all;">
                          <thead>
                            <tr>
                              <th class="col-xs-1"></th>
                              <th class="col-xs-9">Comment</th>
                              <th class="col-xs-2 text-center">Count</th>
                            </tr>
                          </thead>
                          <tbody>
                            {{#each similarComments as |comment index|}}
                            <tr>
                              <td>
                                <input
                                  type="radio"
                                  name="selectedComment"
                                  {{bind-attr value="index"}}
                                />
                              </td>
                              <td class="text-left">{{comment.html}}</td>
                              <td>{{comment.count}}</td>
                            </tr>
                            {{/each}}
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              {{/unless}}
              {{#if commentError}}
              <div class="alert alert-danger alert-dismissible" role="alert">
				        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				        {{errorMsg}}
			        </div>
			        {{/if}}
            </div>
            <div class="modal-footer">
              {{#unless promotionFlow}}
                {{#unless similarFlow}}
                  <button type="button" class="btn btn-primary" {{action "create"}}>
                    Submit
                  </button>
                {{/unless}}
                {{#if similarFlow}}
                  <button type="button" class="btn btn-primary" {{action "promote"}}>
                    Set As Default Comment
                  </button>
                {{/if}}
              {{/unless}}
              {{#if promotionFlow}}
                {{#unless multiFields}}
                  <button
                    class="btn btn-primary"
                    {{action "promote"}}
                  >
                    This Dataset
                  </button>
                  <button
                    class="btn btn-warning"
                    {{action "setMultifields"}}
                  >
                    Multiple Datasets
                  </button>
                {{/unless}}
              {{/if}}
              {{#unless isEdit}}
                {{#if promotionFlow}}
                  {{#if multiFields}}
                  <button
                    class="btn btn-primary"
                    {{action "promote"}}
                  >
                    Promote
                    {{#if promoteLoading}}
                      <i
                        class="fa fa-spinner spinning"
                      >
                      </i>
                    {{/if}}
                  </button>
                  {{/if}}
                {{/if}}
              {{/unless}}

              <button
                type="button"
                class="btn btn-default"
                data-dismiss="modal"
              >
                Close
              </button>
            </div>
          </div>
        </div>
      </div>
      {{/if}}
    </script>

    <script type="text/x-handlebars" data-template-name="property">
      {{#if hasProperty}}
        <div>
          {{#each item in properties}}
            <div>
              <span class="prop-label">{{item.key}}:</span>
              <span>{{item.value}}</span>
            </div>
          {{/each}}
        </div>
      {{else}}
        <p>Property is not available</p>
      {{/if}}
    </script>

    <script type="text/x-handlebars" data-template-name="owner">
      <div class="row" style="margin-top: 5px; margin-bottom: 5px;">
        <div class="col-xs-12">
          <div class="btn-group" role="group">
            <button id="addownerbtn" type="button" class="btn btn-default" {{action "addOwner" owners}}>
              <i class="fa fa-plus" title="add an owner">
              </i>
            </button>
            <button type="button" class="btn btn-default" {{action "updateOwners" owners}}>
              <i class="fa fa-save" title="save the change">
              </i>
            </button>
          </div>
          {{#if showMsg}}
            <div {{bind-attr class=":alert alertType"}} role="alert">{{ownerMessage}}</div>
          {{/if}}
        </div>
      </div>

      <table class="table table-striped" style="word-break: break-all;">
        <thead>
          <tr>
            <th class="col-xs-2">User Name</th>
            <th class="col-xs-3">Full Name</th>
            <th class="col-xs-1">Is Group</th>
            <th class="col-xs-2">Owner Type</th>
            <th class="col-xs-2">Owner Sub Type</th>
            <th class="col-xs-1"></th>
          </tr>
        </thead>
        <tbody id = "sortedownertable">
          {{#each owner in owners}}
          <tr>
            <td>{{input class="userEntity" value=owner.userName}}</td>
            <td>{{owner.name}}</td>
            <td>
              {{input type="checkbox" name="isGroup" checked=owner.isGroup disabled=true}}
            </td>
            <td>
              {{view "select" content=ownerTypes classNames="ownertypeselector" value=owner.type}}
            </td>
            <td>
              {{input value=owner.subType}}
            </td>
            <td>
              <i class="fa fa-trash" title="remove this owner" {{action "removeOwner" owners owner}}>
              </i>
            </td>
          </tr>
          {{/each}}
        </tbody>
      </table>
    </script>

    <script type="text/x-handlebars" data-template-name="sample">
      {{#if hasSamples}}
        {{#if isPinot}}
          <table id="pinotsampletreegrid" class="tree table table-bordered dataset-detail-table">
            <thead>
              <tr class="results-header">
                {{#each column in columns}}
                  <th class="col-xs-2">{{column}}</th>
                {{/each}}
              </tr>
            </thead>
            <tbody>
              {{#each sample in samples}}
                <tr>
                  {{#each r in sample}}
                    <td class="wrap-all-word">{{r}}</td>
                  {{/each}}
                </tr>
              {{/each}}
            </tbody>
          </table>
        {{else}}
          <div id="datasetSampleData-json-human" class="table-responsive"></div>
        {{/if}}
      {{else}}
        <p>Sample data is not available</p>
      {{/if}}
    </script>

    <script type="text/x-handlebars" data-template-name="impact">
      {{#if hasImpacts}}
        <table id="impactAnalysisTable" class="tree table table-bordered dataset-detail-table">
          <thead>
            <tr class="results-header">
              <th class="span2">Level</th>
              <th class="span2">Dataset</th>
              <th>URN</th>
            </tr>
          </thead>
          <tbody>
          {{#each impact in impacts}}
            <tr>
              <td>{{impact.level}}</td>
              <td>
                {{#if impact.isValidDataset}}
                  <a {{bind-attr href=impact.datasetUrl}}>
                    {{impact.name}}
                  </a>
                {{else}}
                  {{impact.name}}
                {{/if}}
              </td>
              <td>{{impact.urn}}</td>
            </tr>
            {{/each}}
          </tbody>
        </table>
      {{else}}
        <p>Impact analysis is not available</p>
      {{/if}}
    </script>

    <script type="text/x-handlebars" data-template-name="detail">
      <div id="metric" class="container-fluid">
        <div class="row-fluid">
          <div class="col-xs-6">
            <h3>{{ model.name }}</h3>
          </div>
          <div class="col-xs-6 text-right">
            <ul class="datasetDetailsLinks">
              <li>
                <i class="fa fa-share-alt"></i>
                <span class="hidden-sm hidden-xs">
                  Share
                </span>
              </li>
              <li>
                {{#metric-watch metric=model showText=true getMetrics='getMetrics'}}
                {{/metric-watch}}
              </li>
              {{#if showLineage}}
              <li>
                <a target="_blank" {{bind-attr href=lineageUrl}}>
                  <i class="fa fa-sitemap"></i>
                  <span class="hidden-sm hidden-xs">
                    View Lineage
                  </span>
                </a>
              </li>
              {{/if}}
            </ul>
          </div>
          <div class="col-xs-12">
            Metric Description:
            <a
              href="#"
              data-name="description"
              data-pk="{{model.id}}"
              class="xeditable"
              data-type="text"
              data-placement="right"
              data-title="Enter description"
              data-emptytext="Please Input"
              data-placeholder="Please Input"
            >
              {{model.description}}
            </a>
          </div>
        </div>
        <table class="tree table table-bordered">
          <tbody>
            <tr class="result">
              <td class="span2" style="min-width:200px;">Dashboard Name</td>
              <td>
                <a
                  href="#"
                  data-name="dashboardName"
                  data-pk="{{model.id}}"
                  class="xeditable"
                  data-type="text"
                  data-placement="right"
                  data-title="Enter dashboard name"
                  data-defaultValue="Please Input"
                  data-emptytext="Please Input"
                  data-value="{{model.dashboardName}}"
                >
                  {{model.dashboardName}}
                </a>
              </td>
            </tr>
            <tr class="result">
              <td>Metric Category</td>
              <td>
                <a
                  href="#"
                  data-name="category"
                  data-pk="{{model.id}}"
                  class="xeditable"
                  data-type="text"
                  data-placement="right"
                  data-title="Enter metric category"
                  data-placement="right"
                  data-emptytext="Please Input"
                >
                  {{model.category}}
                </a>
              </td>
            </tr>
            <tr class="result">
              <td>Metric Group</td>
              <td>
                <a
                  href="#"
                  data-name="group"
                  data-pk="{{model.id}}"
                  class="xeditable"
                  data-type="text"
                  data-placement="right"
                  data-title="Enter group"
                  data-placement="right"
                  data-emptytext="Please Input"
                >
                  {{model.group}}
                </a>
              </td>
            </tr>
            <tr class="result">
              <td>Metric Type</td>
              <td>
                <a
                  href="#"
                  data-name="refIDType"
                  data-pk="{{model.id}}"
                  class="xeditable"
                  data-type="text"
                  data-placement="right"
                  data-title="Enter Type"
                  data-placement="right"
                  data-emptytext="Please Input"
                  {{bind-attr data-value=model.refIDType}}
                >
                </a>
              </td>
            </tr>
            <tr class="result">
              <td>Metric Grain</td>
              <td>
                <a
                  href="#"
                  data-name="grain"
                  data-pk="{{model.id}}"
                  class="xeditable"
                  data-type="text"
                  data-placement="right"
                  data-title="Enter grain"
                  data-placement="right"
                  data-emptytext="Please Input"
                >
                  {{model.grain}}
                </a>
              </td>
            </tr>
            <tr class="result">
              <td>Metric Formula</td>
              <td>
                {{ace-editor content=model.formula itemId=model.id savePath="/api/v1/metrics/{id}/update" saveParam="formula"}}
              </td>
            </tr>
            <tr class="result">
              <td>Metric Display Factor</td>
              <td>
                <a
                  href="#"
                  data-name="displayFactory"
                  data-pk="{{model.id}}"
                  class="xeditable"
                  data-type="text"
                  data-placement="right"
                  data-title="Enter display factor"
                  data-placement="right"
                  data-emptytext="Please Input"
                >
                  {{model.displayFactory}}
                </a>
              </td>
            </tr>
            <tr class="result">
              <td>Metric Display Factor Sym</td>
              <td>
                <a
                  href="#"
                  data-name="displayFactorSym"
                  data-pk="{{model.id}}"
                  class="xeditable"
                  data-type="text"
                  data-placement="right"
                  data-title="Enter display factor symbol"
                  data-placement="right"
                  data-emptytext="Please Input"
                >
                  {{model.displayFactorSym}}
                </a>
              </td>
            </tr>
            <tr class="result">
              <td>Metric Sub Category</td>
              <td>
                <a
                  href="#"
                  data-name="subCategory"
                  data-pk="{{model.id}}"
                  class="xeditable"
                  data-type="text"
                  data-placement="right"
                  data-title="Enter sub category"
                  data-placement="right"
                  data-emptytext="Please Input"
                >
                  {{model.subCategory}}
                </a>
              </td>
            </tr>
            <tr class="result">
              <td>Metric Source</td>
              <td>
                <a
                  href="#"
                  data-name="source"
                  data-pk="{{model.id}}"
                  class="xeditable"
                  data-type="text"
                  data-placement="right"
                  data-title="Enter source"
                  data-placement="right"
                  data-emptytext="Please Input"
                  {{bind-attr data-value=model.source}}
                >
                </a>
              </td>
            </tr>
            <tr class="result">
              <td>Metric Source Type</td>
              <td>
                <a
                  href="#"
                  data-name="sourceType"
                  data-pk="{{model.id}}"
                  class="xeditable"
                  data-type="text"
                  data-placement="right"
                  data-title="Enter source type"
                  data-placement="right"
                  data-emptytext="Please Input"
                  {{bind-attr data-value=model.sourceType}}
                >
                </a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </script>

    <script type="text/x-handlebars" id="dataset">
      <div id="dataset" >
        <div class="row">
          <div class="col-xs-6">
            <h3>{{ model.name }}</h3>
          </div>
          <div class="col-xs-6 text-right">
            <ul class="datasetDetailsLinks">
              <li>
                {{#dataset-favorite dataset=model action="didFavorite"}}
                {{/dataset-favorite}}
                <span class="hidden-sm hidden-xs">
                  {{#if model.isFavorite}}
                    Unfavorite
                  {{else}}
                    Favorite
                  {{/if}}
                </span>
              </li>
              {{#if model.hdfsBrowserLink}}
              <li>
                <a target="_blank" {{bind-attr href=model.hdfsBrowserLink}}
                  title="View on HDFS">
                  <i class="fa fa-database"></i>
                  <span class="hidden-sm hidden-xs">
                    HDFS
                  </span>
                </a>
              </li>
              {{/if}}
              <li>
                <a target="_blank" {{bind-attr href=lineageUrl}}>
                  <i class="fa fa-sitemap"></i>
                  <span class="hidden-sm hidden-xs">
                    View Lineage
                  </span>
                </a>
              </li>
              {{#if model.hasSchemaHistory}}
                <li>
                  <a target="_blank" {{bind-attr href=schemaHistoryUrl}}>
                    <i class="fa fa-history"></i>
                    <span class="hidden-sm hidden-xs">
                      Schema History
                    </span>
                  </a>
                </li>
              {{/if}}
              <li>
                {{#dataset-watch dataset=model getDatasets="getDataset"}}
                {{/dataset-watch}}
                <span class="hidden-xs hidden-sm">
                  {{#if model.isWatched}}
                    Unwatch
                  {{else}}
                    Watch
                  {{/if}}
                </span>
              </li>
            </ul>
          </div>
        </div>
        <div class="well well-sm">
          <div class="row">
            <div class="col-xs-12">
              <ul class="breadcrumbs">
                {{#each breadcrumbs as |crumb|}}
                  <li>
                    <a title="{{crumb.title}}" href="#/datasets/{{crumb.urn}}">
                      {{crumb.title}}
                    </a>
                  </li>
                {{/each}}
              </ul>
            </div>
          </div>
        </div>
      </div>

      {{#if tabview}}
        <ul class="nav nav-tabs nav-justified">
          {{#unless isPinot}}
          <li id="properties">
            <a
              data-toggle="tab"
              href="#propertiestab"
            >
              Properties & Comments
            </a>
          </li>
          {{/unless}}
          <li id="schemas" class="active"><a data-toggle="tab" href="#schematab">Schema</a></li>
          <li id="ownership"><a data-toggle="tab" href="#ownertab">Ownership</a></li>
          {{#unless isSFDC}}
            <li id="samples"><a data-toggle="tab" href="#sampletab">Sample Data</a></li>
          {{/unless}}
          <li id="impacts"><a data-toggle="tab" href="#impacttab">Down Stream Impact Analytics</a></li>
        </ul>
        <div class="tab-content">
          {{#unless isPinot}}
            <div id="propertiestab" class="tab-pane">
              <div class="row">
                <div class="col-xs-4">
                  {{view "property"}}
                </div>
                <div class="col-xs-8">
                  {{#dataset-comments dataset=this}}
                  {{/dataset-comments}}
                </div>
              </div>
            </div>
          {{/unless}}
          <div id="schematab" class="tab-pane active">
            {{view "schema"}}
          </div>
          <div id="ownertab" class="tab-pane">
            {{view "owner"}}
          </div>
          {{#unless isSFDC}}
            <div id="sampletab" class="tab-pane">
              {{view "sample"}}
            </div>
          {{/unless}}
          <div id="impacttab" class="tab-pane">
            {{view "impact"}}
          </div>
        </div>
      {{else}}
      <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
        {{#unless isPinot}}
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="propertiesHeading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion"
                href="#properties" aria-expanded="true" aria-controls="properties">
                Properties & Comments
              </a>
            </h4>
          </div>
          <div id="properties" class="panel-collapse collapse" role="tabpanel" aria-labelledby="propertiesHeading">
            <div class="panel-body">
              <div class="row">
                <div class="col-xs-4">
                  {{view "property"}}
                </div>
                <div class="col-xs-8">
                  {{#dataset-comments dataset=this}}
                  {{/dataset-comments}}
                </div>
              </div>
            </div>
          </div>
        </div>
        {{/unless}}

        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="schemaHeading">
            <h4 class="panel-title">
              <a class="collapsed" data-toggle="collapse" data-parent="#accordion"
               href="#schema" aria-expanded="false" aria-controls="schema">
                Schema
              </a>
            </h4>
          </div>
          <div id="schema" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="schemaHeading">
            <div class="panel-body">
              {{view "schema"}}
            </div>
          </div>
        </div>

        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="ownershipHeading">
            <h4 class="panel-title">
              <a class="collapsed" data-toggle="collapse" data-parent="#accordion"
                href="#ownership" aria-expanded="false" aria-controls="ownership">
                Ownership
              </a>
            </h4>
          </div>
          <div id="ownership" class="panel-collapse collapse" role="tabpanel" aria-labelledby="ownershipHeading">
            <div class="panel-body">
              {{view "owner"}}
            </div>
          </div>
        </div>

        {{#unless isSFDC}}
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="sampleHeading">
            <h4 class="panel-title">
              <a class="collapsed" data-toggle="collapse" data-parent="#accordion"
               href="#sampleData" aria-expanded="false" aria-controls="sampleData">
                Sample Data
              </a>
            </h4>
          </div>
          <div id="sampleData" class="panel-collapse collapse" role="tabpanel" aria-labelledby="sampleHeading">
            <div class="panel-body">
              {{view "sample"}}
            </div>
          </div>
        </div>
        {{/unless}}

        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="impactsHeading">
            <h4 class="panel-title">
              <a class="collapsed" data-toggle="collapse" data-parent="#accordion"
               href="#impactAnalysis" aria-expanded="false" aria-controls="sampleData">
                Down Stream Impact Analysis
              </a>
            </h4>
          </div>
          <div id="impactAnalysis" class="panel-collapse collapse" role="tabpanel" aria-labelledby="impactsHeading">
            <div class="panel-body">
              {{view "impact"}}
            </div>
          </div>
        </div>
      </div>
      {{/if}}
    </script>

    <script type="text/x-handlebars" id="metrics">
      <div id="pagedMetrics">
        <div class="row">
          <div class="col-xs-12">
            {{#unless detailview}}
            <div class="search-pagination">
              <ul class="pager">
                {{#unless first}}
                  <li class="previous">
                    {{#if group}}
                      {{#link-to 'metricnamesubpage' dashboard group previousPage}}
                        &larr; Prev
                      {{/link-to}}
                    {{else}}
                      {{#if dashboard}}
                      {{#link-to 'metricnamepage' dashboard previousPage}}
                        &larr; Prev
                      {{/link-to}}
                      {{else}}
                      {{#link-to 'metricspage' previousPage}}
                        &larr; Prev
                      {{/link-to}}
                      {{/if}}
                    {{/if}}
                  </li>
                {{/unless}}
                <li>
                  {{ model.data.count }} metrics - page {{ model.data.page }} of {{ model.data.totalPages }}
                </li>
                {{#unless last}}
                  <li class="next">
                    {{#if group}}
                      {{#link-to 'metricnamesubpage' dashboard group nextPage}}
                        Next &rarr;
                      {{/link-to}}
                    {{else}}
                      {{#if dashboard}}
                      {{#link-to 'metricnamepage' dashboard nextPage}}
                        Next &rarr;
                      {{/link-to}}
                      {{else}}
                      {{#link-to 'metricspage' nextPage}}
                        Next &rarr;
                      {{/link-to}}
                      {{/if}}
                    {{/if}}
                  </li>
                {{/unless}}
              </ul>
            </div>
            {{/unless}}
            {{#unless detailview}}
            <div class="well well-sm">
              <div class="row">
                <div class="col-xs-10">
                  <ul class="breadcrumbs">
                    {{#each breadcrumbs as |crumb|}}
                      <li>
                        <a title="{{crumb.title}}" href="#/metrics/{{crumb.urn}}">
                          {{crumb.title}}
                        </a>
                      </li>
                    {{/each}}
                  </ul>
                </div>
                <div class="col-xs-2 text-right">
                  <button
                    type="button"
                    class="btn btn-primary btn-sm pull-right"
                    {{action 'watchUrn' urn}}>
                    <i {{bind-attr class=":fa urnWatched:fa-eye-slash:fa-eye"}}></i>
                    {{#if urnWatched}}
                      Unwatch
                    {{else}}
                      Watch
                    {{/if}}
                  </button>
                </div>
              </div>
            </div>

            <table class="table table-bordered search-results">
              <tbody>
                {{#each metric in model.data.metrics}}
                  <tr>
                    <td class="dataset-info">
                      <div class="row">
                        <div class="col-xs-8">
                          {{#link-to 'metric' metric}}
                            {{metric.name}}
                          {{/link-to}} <br />
                          {{ metric.group }} - {{ metric.dashboardName }} <br />
                          {{ metric.description }}
                        </div>
                        <div class="col-xs-4 text-right">
                          <ul class="datasetTableLinks">
                            <li
                              class="text-center"
                            >
                              {{#metric-watch metric=metric getMetrics='getMetrics'}}
                              {{/metric-watch}}
                            </li>
                            <li
                              class="text-center"
                            >
                              <a
                                href="/lineage/metric/{{metric.id}}"
                                title="{{metric.name}}"
                              >
                                <i class="fa fa-sitemap"></i>
                              </a>
                            </li>
                          </ul>

                        </div>
                      </div>
                    </td>
                  </tr>
                {{/each}}
              </tbody>
            </table>
            {{/unless}}
          </div>
          <div class="col-xs-12">
            {{outlet}}
          </div>
        </div>
      </div>
    </script>

    <script type="text/x-handlebars" id="metric">
      {{view "detail"}}
    </script>

    <script type="text/x-handlebars" id="search">
      <div class="btn-group" role="group">
        <div class="btn-group" role="group">
          <button
            type="button"
            {{bind-attr class=":btn :dropdown-toggle :btn-default"}}
            data-toggle="dropdown"
            aria-expanded="false">
            Datasets
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li>
            {{#link-to 'search' (query-params category="Dataset" source="all" page=1)}}
                All
            {{/link-to}}
            </li>
            <li>
            {{#link-to 'search' (query-params category="Dataset" source="hdfs" page=1)}}
                HDFS
            {{/link-to}}
            </li>
            <li>
            {{#link-to 'search' (query-params category="Dataset" source="oracle" page=1)}}
                Oracle
            {{/link-to}}
            </li>
            <li>
            {{#link-to 'search' (query-params category="Dataset" source="teradata" page=1)}}
                Teradata
            {{/link-to}}
            </li>
            <li>
            {{#link-to 'search' (query-params category="Dataset" source="espresso" page=1)}}
                Espresso
            {{/link-to}}
            </li>
            <li>
            {{#link-to 'search' (query-params category="Dataset" source="salesforce" page=1)}}
                Salesforce
            {{/link-to}}
            </li>
            <li>
            {{#link-to 'search' (query-params category="Dataset" source="kafka" page=1)}}
                Kafka
            {{/link-to}}
            </li>
            <li>
            {{#link-to 'search' (query-params category="Dataset" source="pinot" page=1)}}
                Pinot
            {{/link-to}}
            </li>
            <li>
            {{#link-to 'search' (query-params category="Dataset" source="hive" page=1)}}
                Hive
            {{/link-to}}
            </li>
            <li>
            {{#link-to 'search' (query-params category="Dataset" source="external" page=1)}}
                External
            {{/link-to}}
            </li>
          </ul>
        </div>
        <button
          type="button"
          class="btn btn-default"
          {{action 'switchSearchToFlow' keyword}}>
          Flow
        </button>
        <button
          type="button"
          class="btn btn-default"
          {{action 'switchSearchToJob' keyword}}>
          Job
        </button>
        <button
          type="button"
          class="btn btn-default"
          {{action 'switchSearchToComments' keyword}}>
          Comments
        </button>
      </div>

      <div id="pagedSearchResults">
        <div class="row">
          <div class="col-xs-12">
            {{#if model.count}}
              <div class="search-pagination">
                <ul class="pager">
                  {{#unless first}}
                    <li class="previous">
                        {{#if source}}
                          {{#link-to 'search' (query-params categroy=category source=source page=previousPage)}}
                            &larr; Prev
                          {{/link-to}}
                        {{/if}}
                    </li>
                  {{/unless}}
                  <li>
                    {{ model.count }} results - page {{ model.page }} of {{ model.totalPages }}
                  </li>
                  {{#unless last}}
                    <li class="next">
                        {{#if source}}
                          {{#link-to 'search' (query-params categroy=category source=source page=nextPage)}}
                            Next &rarr;
                          {{/link-to}}
                        {{/if}}

                    </li>
                  {{/unless}}
                </ul>
              </div>
            {{/if}}
            {{#if loading}}
              <div class="row">
                <div class="col-xs-12 text-center">
                  <i
                    class="fa fa-spinner spinning fa-4x"
                  ></i>
                </div>
              </div>
            {{/if}}
            {{#if model.count}}
              {{#if model.isFlowJob}}
              <table id="searchresults" class="search-results searchtable">
                <tbody>
                  {{#each flowJob in model.data}}
                  <tr class="result">
                    <td class="col-xs-12">
                      <div class="dataset-name">
                        <td class="dataset-info">
                          <a href="{{flowJob.link}}">
                            {{flowJob.displayName}}
                          </a>
                        </td>
                        <p>
                          {{{ flowJob.path }}}
                        </p>
                        <p>source: {{{ flowJob.appCode }}}</p>
                      </div>
                    </td>
                  </tr>
                  {{/each}}
                </tbody>
              </table>
              {{else}}
              <table id="searchresults" class="search-results searchtable">
                <tbody>
                  {{#each dataset in model.data}}
                  <tr class="result">
                    <td class="col-xs-12">
                      <div class="dataset-name">
                        <td class="dataset-info">
                        {{#if isMetric}}
                          {{#link-to 'metric' dataset}}
                            {{{dataset.name}}}
                          {{/link-to}}
                        {{else}}
                          {{#link-to 'dataset' dataset}}
                            {{{dataset.name}}}
                          {{/link-to}}
                        {{/if}}
                        </td>
                        <p>
                          {{{ dataset.urn }}}
                        </p>
                        <p>source: {{{ dataset.source }}}</p>
                        <div class="schematext" style="margin-top:5px;margin-bottom: 10px;">
                          {{{ dataset.schema }}}
                        </div>
                      </div>
                    </td>
                  </tr>
                  {{/each}}
                </tbody>
              </table>
              {{/if}}
            {{else}}
              {{#if showNoResult}}
                <h4>No items found</h4>
              {{/if}}
            {{/if}}
          </div>
          <div class="col-xs-12">
            {{outlet}}
          </div>
        </div>
      </div>
    </script>

    <script type="text/x-handlebars" id="advsearch">
      <div id="pagedSearchResults">
        <div class="row">
          <div class="col-xs-12">
            {{#if model.count}}
            <div class="search-pagination">
              <ul class="pager">
                {{#unless first}}
                  <li class="previous">
                    {{#link-to 'advsearch' (query-params page=previousPage)}}
                      &larr; Prev
                    {{/link-to}}
                  </li>
                {{/unless}}
                <li>
                  {{ model.count }} results - page {{ model.page }} of {{ model.totalPages }}
                </li>
                {{#unless last}}
                  <li class="next">
                    {{#link-to 'advsearch' (query-params page=nextPage)}}
                      Next &rarr;
                    {{/link-to}}
                  </li>
                {{/unless}}
              </ul>
            </div>
            {{/if}}
            {{#if loading}}
              <div class="row">
                <div class="col-xs-12 text-center">
                  <i
                    class="fa fa-spinner spinning fa-4x"
                  ></i>
                </div>
              </div>
            {{/if}}
            {{#if model.count}}
            <table id="searchresults" class="search-results searchtable">
              <tbody>
                {{#each dataset in model.data}}
                <tr class="result">
                  <td class="col-xs-12">
                    <div class="dataset-name">
                      <td class="dataset-info">
                        {{#link-to 'dataset' dataset}}
                          {{{dataset.name}}}
                        {{/link-to}}
                      </td>
                      <p>{{{ dataset.urn }}}</p>
                      <p>source: {{{ dataset.source }}}</p>
                      <div class="schematext" style="margin-top:5px;margin-bottom: 10px;">
                        {{{ dataset.schema }}}
                      </div>
                    </div>
                  </td>
                </tr>
                {{/each}}
              </tbody>
            </table>
            {{else}}
            {{#if showNoResult}}
            <h4>No items found</h4>
            {{/if}}
            {{/if}}
          </div>
          <div class="col-xs-12">
            {{outlet}}
          </div>
        </div>
      </div>
    </script>

    <script type="text/x-handlebars" id="flows">
      {{#if projectView}}
      <div id="pagedProjects" >
        <div class="row">
          <div class="col-xs-12">
            <div class="search-pagination">
              <ul class="pager">
                {{#unless first}}
                  <li class="previous">
                    {{#link-to 'pagedapplication' previousPage}}
                      &larr; Prev
                    {{/link-to}}
                  </li>
                {{/unless}}
                <li>
                  {{ model.data.count }} projects - page {{ model.data.page }} of {{ model.data.totalPages }}
                </li>
                {{#unless last}}
                  <li class="next">
                    {{#link-to 'pagedapplication' nextPage}}
                      Next &rarr;
                    {{/link-to}}
                  </li>
                {{/unless}}
              </ul>
            </div>
            <div class="well well-sm">
              <div class="row">
                <div class="col-xs-10">
                  <ul class="breadcrumbs">
                    {{#each breadcrumbs as |crumb|}}
                      <li>
                        <a title="{{crumb.title}}" href="#/flows/{{crumb.urn}}">
                          {{crumb.title}}
                        </a>
                      </li>
                    {{/each}}
                  </ul>
                </div>
                <div class="col-xs-2 text-right">
                  <button
                    type="button"
                    class="btn btn-primary btn-sm pull-right"
                    {{action 'watchUrn' urn}}>
                    <i {{bind-attr class=":fa urnWatched:fa-eye-slash:fa-eye"}}></i>
                    {{#if urnWatched}}
                      Unwatch
                    {{else}}
                      Watch
                    {{/if}}
                  </button>
                </div>
              </div>
            </div>
            <table class="table table-bordered search-results">
              <thead>
                <tr class="results-header">
                  <th class="col-xs-3">Project Name</th>
                  <th class="col-xs-3">Flow Count</th>
                </tr>
              </thead>
              <tbody>
                {{#each project in model.data.projects}}
                  <tr>
                    <td class="dataset-info">
                      {{#link-to 'pagedproject' project.name 1}}
                        {{project.name}}
                      {{/link-to}}
                    </td>
                    <td>{{ project.flowCount }}</td>
                  </tr>
                {{/each}}
              </tbody>
            </table>
          </div>
          <div class="col-xs-12">
            {{outlet}}
          </div>
        </div>
      </div>
      {{/if}}
      {{#if flowView}}
      <div id="pagedFlows" >
        <div class="row">
          <div class="col-xs-12">
            <div class="search-pagination">
              <ul class="pager">
                {{#unless first}}
                  <li class="previous">
                    {{#link-to 'pagedproject' previousPage}}
                      &larr; Prev
                    {{/link-to}}
                  </li>
                {{/unless}}
                <li>
                  {{ model.data.count }} flows - page {{ model.data.page }} of {{ model.data.totalPages }}
                </li>
                {{#unless last}}
                  <li class="next">
                    {{#link-to 'pagedproject' nextPage}}
                      Next &rarr;
                    {{/link-to}}
                  </li>
                {{/unless}}
              </ul>
            </div>
            <div class="well well-sm">
              <div class="row">
                <div class="col-xs-10">
                  <ul class="breadcrumbs">
                    {{#each breadcrumbs as |crumb|}}
                      <li>
                        <a title="{{crumb.title}}" href="#/flows/{{crumb.urn}}">
                          {{crumb.title}}
                        </a>
                      </li>
                    {{/each}}
                  </ul>
                </div>
                <div class="col-xs-2 text-right">
                  <button
                    type="button"
                    class="btn btn-primary btn-sm pull-right"
                    {{action 'watchUrn' urn}}>
                    <i {{bind-attr class=":fa urnWatched:fa-eye-slash:fa-eye"}}></i>
                    {{#if urnWatched}}
                      Unwatch
                    {{else}}
                      Watch
                    {{/if}}
                  </button>
                </div>
              </div>
            </div>
            <table class="table table-bordered search-results">
              <thead>
                <tr class="results-header">
                  <th class="col-xs-2">Flow Name</th>
                  <th class="col-xs-3">Flow Path</th>
                  <th class="col-xs-1">Flow Level</th>
                  <th class="col-xs-1">Job Count</th>
                  <th class="col-xs-2">Created Time</th>
                  <th class="col-xs-2">Modified Time</th>
                </tr>
              </thead>
              <tbody>
                {{#each flow in model.data.flows}}
                  <tr>
                    <td class="dataset-info wrap-all-word">
                      {{#link-to 'pagedflow' flow.id 1}}
                        {{flow.name}}
                      {{/link-to}}
                    </td>
                    <td class="wrap-all-word">{{ flow.path }}</td>
                    <td>{{ flow.level }}</td>
                    <td>{{ flow.jobCount }}</td>
                    <td>{{ flow.created }}</td>
                    <td>{{ flow.modified }}</td>
                  </tr>
                {{/each}}
              </tbody>
            </table>
          </div>
          <div class="col-xs-12">
            {{outlet}}
          </div>
        </div>
      </div>
      {{/if}}
      {{#if jobView}}
      <div id="pagedJobs" >
        <div class="row">
          <div class="col-xs-12">
            {{outlet}}
          </div>
        </div>
      </div>
      {{/if}}
    </script>

    <script type="text/x-handlebars" id="pagedflow">
      <div id="pagedJobs" class="container-fluid">
        <div class="row-fluid">
          <div class="span9">
            <div class="row">
              <div class="col-xs-7">
                <h3> {{ model.data.flow }}</h3>
              </div>
              <div class="col-xs-5 text-right">
                <ul class="datasetDetailsLinks">
                  <li {{action 'watchUrn' urn}}>
                    <i {{bind-attr class=":fa urnWatched:fa-eye-slash:fa-eye"}}></i>
                    <span class="hidden-sm hidden-xs">
                      {{#if urnWatched}}
                        Unwatch
                      {{else}}
                        Watch
                      {{/if}}
                    </span>
                  </li>
                  <li>
                    <a target="_blank" {{bind-attr href=lineageUrl}}>
                      <i class="fa fa-sitemap"></i>
                      <span class="hidden-sm hidden-xs">
                        View Lineage
                      </span>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
            <div class="well well-sm">
              <div class="row">
                <div class="col-xs-12">
                  <ul class="breadcrumbs">
                    {{#each breadcrumbs as |crumb|}}
                      <li>
                        <a title="{{crumb.title}}" href="#/flows/{{crumb.urn}}">
                          {{crumb.title}}
                        </a>
                      </li>
                    {{/each}}
                  </ul>
                </div>
              </div>
            </div>
            <div class="search-pagination">
              <ul class="pager">
                {{#unless first}}
                  <li class="previous">
                    {{#link-to 'pagedflow' previousPage}}
                      &larr; Prev
                    {{/link-to}}
                  </li>
                {{/unless}}
                <li>
                  {{ model.data.count }} jobs - page {{ model.data.page }} of {{ model.data.totalPages }}
                </li>
                {{#unless last}}
                  <li class="next">
                    {{#link-to 'pagedflow' nextPage}}
                      Next &rarr;
                    {{/link-to}}
                  </li>
                {{/unless}}
              </ul>
            </div>
            <table class="table table-bordered search-results">
              <thead>
                <tr class="results-header">
                  <th class="span2">Job Name</th>
                  <th class="span3">Job Path</th>
                  <th class="span1">Job Type</th>
                  <th class="span3">Created Time</th>
                  <th class="span3">Modified Time</th>
                </tr>
              </thead>
              <tbody>
                {{#each job in model.data.jobs}}
                  <tr>
                    <td class="dataset-info wrap-all-word">
                      {{#if job.refFlowId}}
                        {{#link-to 'pagedflow' job.refFlowId 1}}
                          {{job.name}}
                        {{/link-to}}
                      {{else}}
                        {{job.name}}
                      {{/if}}
                    </td>
                    <td class="wrap-all-word">{{ job.path }}</td>
                    <td>{{ job.type }}</td>
                    <td>{{ job.created }}</td>
                    <td>{{ job.modified }}</td>
                  </tr>
                {{/each}}
              </tbody>
            </table>
          </div>
          <div class="span9">
            {{outlet}}
          </div>
        </div>
      </div>
    </script>
    <script type="text/x-handlebars" data-template-name="components/ace-editor">
      <pre id='{{random}}_editor' class="editor-wrapper"></pre>
      <div class="row">
        <div class="col-xs-6 col-xs-offset-6 pull-right text-right">
          <button
            type="button"
            class="btn btn-primary"
            {{action "save"}}
          >
            Update
          </button>
        </div>
      </div>
    </script>
    <script src="@routes.Assets.at("vendors/ember-1.12.0/ember-template-compiler.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("vendors/ember-1.12.0/ember.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/search.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/tree.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/routers/router.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/routers/search.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/routers/advancedSearch.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/routers/datasets.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/routers/flows.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/controllers/search.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/controllers/advancedSearch.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/controllers/datasets.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/controllers/flows.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/components/components.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/components/schema-comment.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/components/editor.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/views/views.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/main.js")" type="text/javascript"></script>
  }