<ol class="breadcrumb">
  <li class="breadcrumb-item">{{t "directives" }}</li>
  <li class="breadcrumb-item" {{#if directive.deprecated}}
        class="breadcrumb-item deprecated-name"
    {{/if}}>{{directive.name}}</li>
</ol>

<ul class="nav nav-tabs" role="tablist">
    {{#each navTabs}}
        <li class="nav-item">
            <a href="{{this.href}}" 
                class="nav-link"
                {{#compare @index "===" 0}}class="nav-link active"{{/compare}}
                role="tab" id="{{this.id}}-tab" data-bs-toggle="tab" data-link="{{this.data-link}}">{{t 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="info">
        {{#unless disableFilePath}}
        <p class="comment">
            <h3>{{t "file" }}</h3>
        </p>
        <p class="comment">
            <code>{{directive.file}}</code>
        </p>
        {{/unless}}

        {{#if directive.deprecated}}
            <p class="comment">
                <h3 class="deprecated">{{t "deprecated" }}</h3>
            </p>
            <p class="comment">
                {{{ directive.deprecationMessage }}}
            </p>
        {{/if}}

        {{#if directive.description}}
            <p class="comment">
                <h3>{{t "description" }}</h3>
            </p>
            <p class="comment">
                {{{parseDescription directive.description depth}}}
            </p>
        {{/if}}

        {{#if directive.extends}}
            <p class="comment">
                <h3>{{t "extends" }}</h3>
            </p>
            <p class="comment">
                {{#each directive.extends}}
                    {{> link-type type=this }}
                {{/each}}
            </p>
        {{/if}}

        {{#if directive.implements}}
            <p class="comment">
                <h3>{{t "implements" }}</h3>
            </p>
            <p class="comment">
                {{#each directive.implements}}
                    {{> link-type type=this}}
                {{/each}}
            </p>
        {{/if}}

        {{#if directive.jsdoctags}}
            <p class="comment">
                <h3>{{t "example" }}</h3>
            </p>
            <div class="io-description">
                {{#jsdoc-code-example directive.jsdoctags}}
                    {{#each tags}}
                        <div>
                            {{{comment}}}
                        </div>
                    {{/each}}
                {{/jsdoc-code-example}}
            </div>
        {{/if}}

        {{#orLength directive.selector directive.providers directive.standalone directive.hostDirectives}}
        <section data-compodoc="block-metadata">
            <h3>{{t "metadata" }}</h3>
            <table class="table table-sm table-hover metadata">
                <tbody>
                    {{#if directive.providers}}
                    <tr>
                        <td class="col-md-3">{{t "providers" }}</td>
                        <td class="col-md-9">
                            <code>
                            {{#each directive.providers}}
                                {{name}}
                            {{/each}}
                            </code>
                        </td>
                    </tr>
                    {{/if}}

                    {{#if directive.selector}}
                    <tr>
                        <td class="col-md-3">{{t "selector" }}</td>
                        <td class="col-md-9"><code>{{directive.selector}}</code></td>
                    </tr>
                    {{/if}}

                    {{#if directive.standalone}}
                    <tr>
                        <td class="col-md-3">{{t "standalone" }}</td>
                        <td class="col-md-9"><code>{{directive.standalone}}</code></td>
                    </tr>
                    {{/if}}

                    {{#if directive.hostDirectives}}
                    <tr>
                        <td class="col-md-3">{{t "hostdirectives" }}</td>
                        <td class="col-md-9">
                            {{#each directive.hostDirectives}}
                                {{> link-type type=name }}<br/>
                                {{#if this.inputs}}
                                    {{#compare this.inputs.length ">" 0}}
                                        <div><i>&nbsp;{{t "inputs" }}</i> : {{#each inputs}}{{this}}&nbsp;{{/each}}</div>
                                    {{/compare}}
                                {{/if}}
                                {{#if this.outputs}}
                                    {{#compare this.outputs.length ">" 0}}
                                        <div><i>&nbsp;{{t "outputs" }}</i> : {{#each outputs}}{{this}}&nbsp;{{/each}}</div>
                                    {{/compare}}
                                {{/if}}
                            {{/each}}
                        </td>
                    </tr>
                    {{/if}}

                    {{#if directive.exportAs}}
                    <tr>
                        <td class="col-md-3">{{t "exportAs" }}</td>
                        <td class="col-md-9"><code>{{directive.exportAs}}</code></td>
                    </tr>
                    {{/if}}

                </tbody>
            </table>
        </section>
        {{/orLength}}

        {{#orLength directive.propertiesClass directive.methodsClass directive.inputsClass directive.outputClass directive.hostBindings directive.hostListeners directive.accessors}}
            {{> index methods=directive.methodsClass properties=directive.propertiesClass inputs=directive.inputsClass outputs=directive.outputsClass hostBindings=directive.hostBindings hostListeners=directive.hostListeners accessors=directive.accessors }}
        {{/orLength}}

        {{#if directive.constructorObj}}
            {{> block-constructor constructor=directive.constructorObj file=directive.file }}
        {{/if}}

        {{#if directive.inputsClass}}
            {{> block-input element=directive file=directive.file }}
        {{/if}}

        {{#if directive.outputsClass}}
            {{> block-output element=directive file=directive.file }}
        {{/if}}

        {{#if directive.hostBindings}}
            {{> block-property properties=directive.hostBindings file=directive.file title="HostBindings" }}
        {{/if}}

        {{#if directive.hostListeners}}
            {{> block-host-listener methods=directive.hostListeners file=directive.file title="HostListeners" }}
        {{/if}}

        {{#if directive.methodsClass}}
            {{> block-method methods=directive.methodsClass file=directive.file }}
        {{/if}}

        {{#if directive.propertiesClass}}
            {{> block-property properties=directive.propertiesClass file=directive.file }}
        {{/if}}

        {{#if directive.accessors}}
            {{> block-accessors accessors=directive.accessors file=directive.file }}
        {{/if}}

    </div>
    {{/isTabEnabled}}

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

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

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