<ol class="breadcrumb">
  <li>Components</li>
  <li>{{name}}</li>
</ol>

<ul class="nav nav-tabs" role="tablist">
    <li class="active">
        <a href="#info" id="info-tab" role="tab" data-toggle="tab" data-link="info">Info</a>
    </li>
    {{#if component.readme}}
    <li>
        <a href="#readme" role="tab" id="readme-tab" data-toggle="tab" data-link="readme">README</a>
    </li>
    {{/if}}

    {{#unless disableSourceCode}}
    <li>
        <a href="#source" role="tab" id="source-tab" data-toggle="tab" data-link="source">Source</a>
    </li>
    {{/unless}}

    {{#if component.templateData}}
    <li>
        <a href="#templateData" role="tab" id="templateData-tab" data-toggle="tab" data-link="template">Template</a>
    </li>
    {{/if}}
    <li>
        <a href="#tree" role="tab" id="tree-tab" data-toggle="tab" data-link="dom-tree">DOM Tree</a>
    </li>
    {{#if component.exampleUrls}}
    <li>
        <a href="#example" role="tab" id="example-tab" data-toggle="tab" data-link="example">Examples</a>
    </li>
    {{/if}}
</ul>

<div class="tab-content">
    <div class="tab-pane fade active in" id="c-info">
        {{~> component-detail component=component ~}}
    </div>

    {{#if component.readme}}
    <div class="tab-pane fade" id="c-readme">
        <p>{{{component.readme}}}</p>
    </div>
    {{/if}}

    {{#unless disableSourceCode}}
    <div class="tab-pane fade tab-source-code" id="c-source">
        <pre class="line-numbers"><code class="language-typescript">{{ component.sourceCode}}</code></pre>
    </div>
    {{/unless}}

    {{#if component.templateData}}
    <div class="tab-pane fade" id="c-templateData">
        <pre class="line-numbers"><code class="language-html">{{ component.templateData }}</code></pre>
    </div>
    {{/if}}

    <div class="tab-pane fade" id="c-tree">
        <div id="tree-container"></div>
        <div class="tree-legend">
            <div class="title">
                <b>Legend</b>
            </div>
            <div>
                <div class="color htmlelement"></div><span>Html element</span>
            </div>
            <div>
                <div class="color component"></div><span>Component</span>
            </div>
            <div>
                <div class="color directive"></div><span>Html element with directive</span>
            </div>
        </div>
    </div>
    {{#if component.exampleUrls}}
    <div class="tab-pane fade" id="c-example">
        {{#each component.exampleUrls}}
            <iframe src="{{this}}" style="height: 100vh; width: 100%;">
                <p>Your browser does not support iframes.</p>
            </iframe>
        {{/each}}
    </div>
    {{/if}}
</div>

<script src="{{relativeURL depth 'components'}}js/libs/vis.min.js"></script>
<script src="{{relativeURL depth 'components'}}js/libs/htmlparser.js"></script>
<script src="{{relativeURL depth 'components'}}js/libs/deep-iterator.js"></script>
<script>
    {{#if component.template}}
        var COMPONENT_TEMPLATE = '<div>{{{escapeSimpleQuote component.template }}}</div>'
    {{else}}
        var COMPONENT_TEMPLATE = '<div>{{{escapeSimpleQuote component.templateData }}}</div>'
    {{/if}}
    var COMPONENTS = [{{#each components}}{'name': '{{name}}', 'selector': '{{selector}}'}{{#unless @last}},{{/unless}}{{/each}}];
    var DIRECTIVES = [{{#each directives}}{'name': '{{name}}', 'selector': '{{selector}}'}{{#unless @last}},{{/unless}}{{/each}}];
    var ACTUAL_COMPONENT = {'name': '{{ name }}'};
</script>
<script src="{{relativeURL depth 'components'}}js/tree.js"></script>
