{{#unless disableFilePath}}
<p class="comment">
    <h3>{{t "file" }}</h3>
</p>
<p class="comment">
    <code>{{component.file}}</code>
</p>
{{/unless}}

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

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

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

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

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

{{#orLength component.animations component.changeDetection component.encapsulation component.entryComponents
            component.exportAs component.host component.interpolation component.moduleId
            component.providers component.queries component.selector component.styleUrls component.styles
            component.template component.templateUrl component.viewProviders component.tag component.styleUrl
            component.shadow component.scoped component.assetsDir component.assetsDirs}}
<section data-compodoc="block-metadata">
    <h3>{{t "metadata" }}</h3>
    <table class="table table-sm table-hover metadata">
        <tbody>
            {{#if component.animations}}
            <tr>
                <td class="col-md-3">animations</td>
                <td class="col-md-9"><code>{{component.animations}}</code></td>
            </tr>
            {{/if}}

            {{#if component.changeDetection}}
            <tr>
                <td class="col-md-3">changeDetection</td>
                <td class="col-md-9"><code>{{component.changeDetection}}</code></td>
            </tr>
            {{/if}}

            {{#if component.encapsulation}}
            <tr>
                <td class="col-md-3">encapsulation</td>
                <td class="col-md-9"><code>{{component.encapsulation}}</code></td>
            </tr>
            {{/if}}

            {{#if component.hostDirectives}}
                <tr>
                    <td class="col-md-3">{{t "hostdirectives" }}</td>
                    <td class="col-md-9">
                        {{#each component.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 component.entryComponents}}
            <tr>
                <td class="col-md-3">entryComponents</td>
                <td class="col-md-9">
                    {{#each component.entryComponents}}
                        {{> link-type type=name }}
                    {{/each}}
                </td>
            </tr>
            {{/if}}

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

            {{#if component.host}}
            <tr>
                <td class="col-md-3">host</td>
                <td class="col-md-9"><code>{{object component.host}}</code></td>
            </tr>
            {{/if}}

            {{#if component.interpolation}}
            <tr>
                <td class="col-md-3">interpolation</td>
                <td class="col-md-9"><code>{{component.interpolation}}</code></td>
            </tr>
            {{/if}}

            {{#if component.moduleId}}
            <tr>
                <td class="col-md-3">moduleId</td>
                <td class="col-md-9"><code>{{component.moduleId}}</code></td>
            </tr>
            {{/if}}

            {{#hasOwn component 'preserveWhitespaces'}}
            <tr>
                <td class="col-md-3">preserveWhitespaces</td>
                <td class="col-md-9"><code>{{component.preserveWhitespaces}}</code></td>
            </tr>
            {{/hasOwn}}

            {{#if component.providers}}
            <tr>
                <td class="col-md-3">providers</td>
                <td class="col-md-9">
                    {{#each component.providers}}
                        {{> link-type type=name }}
                    {{/each}}
                </td>
            </tr>
            {{/if}}

            {{#if component.queries}}
            <tr>
                <td class="col-md-3">queries</td>
                <td class="col-md-9"><code>{{component.queries}}</code></td>
            </tr>
            {{/if}}

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

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

            {{#if component.imports}}
            <tr>
                <td class="col-md-3">imports</td>
                <td class="col-md-9">
                    {{#each component.imports}}
                        {{> link-type type=name }}
                    {{/each}}
                </td>
            </tr>
            {{/if}}

            {{#if component.styleUrls}}
            <tr>
                <td class="col-md-3">styleUrls</td>
                <td class="col-md-9"><code>{{breakComma component.styleUrls}}</code></td>
            </tr>
            {{/if}}

            {{#if component.styles}}
            <tr>
                <td class="col-md-3">styles</td>
                <td class="col-md-9"><code>{{component.styles}}</code></td>
            </tr>
            {{/if}}

            {{#if component.template}}
            <tr>
                <td class="col-md-3">template</td>
                <td class="col-md-9"><pre class="line-numbers"><code class="language-html">{{ component.template }}</code></pre></td>
            </tr>
            {{/if}}

            {{#if component.templateUrl}}
            <tr>
                <td class="col-md-3">templateUrl</td>
                <td class="col-md-9"><code>{{component.templateUrl}}</code></td>
            </tr>
            {{/if}}

            {{#if component.viewProviders}}
            <tr>
                <td class="col-md-3">viewProviders</td>
                <td class="col-md-9">
                    <code>
                    {{#each component.viewProviders}}
                        {{> link-type type=name }}
                    {{/each}}
                    </code>
                </td>
            </tr>
            {{/if}}

            {{#if component.tag}}
            <tr>
                <td class="col-md-3">tag</td>
                <td class="col-md-9"><code>{{component.tag}}</code></td>
            </tr>
            {{/if}}

            {{#if component.styleUrl}}
            <tr>
                <td class="col-md-3">styleUrl</td>
                <td class="col-md-9"><code>{{component.styleUrl}}</code></td>
            </tr>
            {{/if}}

            {{#if component.shadow}}
            <tr>
                <td class="col-md-3">shadow</td>
                <td class="col-md-9"><code>{{component.shadow}}</code></td>
            </tr>
            {{/if}}

            {{#if component.scoped}}
            <tr>
                <td class="col-md-3">scoped</td>
                <td class="col-md-9"><code>{{component.scoped}}</code></td>
            </tr>
            {{/if}}

            {{#if component.assetsDir}}
            <tr>
                <td class="col-md-3">assetsDir</td>
                <td class="col-md-9"><code>{{component.assetsDir}}</code></td>
            </tr>
            {{/if}}

            {{#if component.assetsDirs}}
            <tr>
                <td class="col-md-3">assetsDirs</td>
                <td class="col-md-9"><code>{{component.assetsDirs}}</code></td>
            </tr>
            {{/if}}

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

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

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

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

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

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

{{#if component.hostListeners}}
    {{> block-method methods=component.hostListeners file=component.file title="HostListeners" }}
{{/if}}

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

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

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