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

{{#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">
        {{> link-type type=component.extends }}
    </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}}

<section>
    <h3>{{t "metadata" }}</h3>
    <table class="table table-sm table-hover">
        <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.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.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 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}}
