<ol class="breadcrumb">
  <li>{{t "components" }}</li>
  <li>{{component.name}}</li>
</ol>

<ul class="nav nav-tabs" role="tablist">
    {{#each navTabs}}
        <li {{#compare @index "===" 0}}class="active"{{/compare}}>
            <a href="{{this.href}}" role="tab" id="{{this.id}}-tab" data-toggle="tab" data-link="{{this.data-link}}">{{this.label}}</a>
        </li>
    {{/each}}
</ul>

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

    {{#isTabEnabled navTabs "readme"}}
    <div class="tab-pane fade {{#isInitialTab navTabs "readme"}}active in{{/isInitialTab}}" id="c-readme">
        <p>{{{component.readme}}}</p>
    </div>
    {{/isTabEnabled}}

    {{#isTabEnabled navTabs "source"}}
    <div class="tab-pane fade {{#isInitialTab navTabs "source"}}active in{{/isInitialTab}} tab-source-code" id="c-source">
        <pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">{{ component.sourceCode}}</code></pre>
    </div>
    {{/isTabEnabled}}

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

    {{#isTabEnabled navTabs "styleData"}}
    <div class="tab-pane fade {{#isInitialTab navTabs "styleData"}}active in{{/isInitialTab}}" id="c-styleData">
        {{#compare component.styleUrlsData.length ">" 0}}
            {{#each component.styleUrlsData}}
                <p class="comment">
                    <code>{{ styleUrl }}</code>
                </p>
                <pre class="line-numbers"><code class="language-scss">{{ data }}</code></pre>
            {{/each}}
        {{/compare}}
        {{#compare component.stylesData "!==" ''}}
            <pre class="line-numbers"><code class="language-scss">{{ component.stylesData }}</code></pre>
        {{/compare}}
    </div>
    {{/isTabEnabled}}

    {{#isTabEnabled navTabs "tree"}}
    <div class="tab-pane fade {{#isInitialTab navTabs "tree"}}active in{{/isInitialTab}}" id="c-tree">
        <div id="tree-container"></div>
        <div class="tree-legend">
            <div class="title">
                <b>{{t "legend" }}</b>
            </div>
            <div>
                <div class="color htmlelement"></div><span>{{t "html-element" }}</span>
            </div>
            <div>
                <div class="color component"></div><span>{{t "component" }}</span>
            </div>
            <div>
                <div class="color directive"></div><span>{{t "html-element-with-directive" }}</span>
            </div>
        </div>
    </div>
    {{/isTabEnabled}}

    {{#isTabEnabled navTabs "example"}}
    <div class="tab-pane fade {{#isInitialTab navTabs "example"}}active in{{/isInitialTab}}" id="c-example">
        {{#each component.exampleUrls}}
            <iframe class="exampleContainer" src="{{this}}">
                <p>{{t "no-iframes" }}</p>
            </iframe>
        {{/each}}
    </div>
    {{/isTabEnabled}}
    
</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>
