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

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

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

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

{{#if component.jsdoctags}}
    <p class="comment">
        <h3>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>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"><code>{{component.entryComponents}}</code></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.inputs}}
            <tr>
                <td class="col-md-3">inputs</td>
                <td class="col-md-9"><code>{{breakComma component.inputs}}</code></td>
            </tr>
            {{/if}}

            {{#if component.interpolation}}
            <tr>
                <td class="col-md-3">host</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}}

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

            {{#if component.providers}}
            <tr>
                <td class="col-md-3">providers</td>
                <td class="col-md-9">
                    <code>
                    {{#each component.providers}}
                        {{name}}
                    {{/each}}
                    </code>
                </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}}
                        {{name}}
                    {{/each}}
                    </code>
                </td>
            </tr>
            {{/if}}

        </tbody>
    </table>
</section>

{{#orLength component.propertiesClass component.methodsClass component.inputsClass component.outputClass component.hostBindings component.hostListeners component.accessors}}
    {{> index-directive 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}}
    <section>
        <h3 id="inputs">Inputs</h3>
        {{#each component.inputsClass}}
            <table class="table table-sm table-bordered">
                <tbody>
                    <tr>
                        <td class="col-md-2">
                            <a name="{{name}}"></a>
                            <code>{{name}}</code>
                        </td>
                        <td class="col-md-10">
                          {{#if description}}
                            <div>{{{parseDescription description ../depth}}}</div>
                          {{/if}}
                          {{#if type}}
                              <p>
                                <em>Type:</em>{{> link-type type=type }}
                              </p>
                          {{/if}}
                          {{#if defaultValue}}
                            <p>
                              <em>Default value: </em><code>{{defaultValue}}</code>
                            </p>
                          {{/if}}
                        </td>
                    </tr>
                    {{#if line}}
                        {{#unless ../disableSourceCode}}
                            <tr>
                                <td class="col-md-2" colspan="2">
                                    <div class="io-line">Defined in <a href="" data-line="{{{line}}}" class="link-to-prism">{{../component.file}}:{{{line}}}</a></div>
                                </td>
                            </tr>
                        {{/unless}}
                    {{/if}}
                </tbody>
            </table>
        {{/each}}
    </section>
{{/if}}

{{#if component.outputsClass}}
    <section>
        <h3 id="outputs">Outputs</h3>
        {{#each component.outputsClass}}
            <table class="table table-sm table-bordered">
                <tbody>
                    <tr>
                        <td class="col-md-2">
                            <a name="{{name}}"></a>
                            <code>{{name}}</code>
                        </td>
                        <td class="col-md-10">
                          {{#if description}}
                            <div>{{{parseDescription description ../depth}}}</div>
                          {{/if}}
                          {{#if type}}
                            <em><code>$event</code> type:</em>{{> link-type type=type }}
                          {{/if}}
                        </td>
                    </tr>
                    {{#if line}}
                        {{#unless ../disableSourceCode}}
                            <tr>
                                <td class="col-md-2" colspan="2">
                                    <div class="io-line">Defined in <a href="" data-line="{{{line}}}" class="link-to-prism">{{../component.file}}:{{{line}}}</a></div>
                                </td>
                            </tr>
                        {{/unless}}
                    {{/if}}
                </tbody>
            </table>
        {{/each}}
    </section>
{{/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}}
