<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}}}
    </p>
{{/if}}

{{#if component.jsdoctags}}
    <p class="comment">
        <h3>Example</h3>
    </p>
    <div class="io-description">
        {{#jsdoc-component-example component.jsdoctags}}
            {{#each tags}}
                <div>
                    {{{comment}}}
                </div>
            {{/each}}
        {{/jsdoc-component-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"><code>{{breaklines component.template}}</code></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>

{{#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">
                            <code>{{name}}</code>
                        </td>
                        <td class="col-md-10">
                          {{#if description}}
                            <div>{{{parseDescription description}}}</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>
                </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">
                            <code>{{name}}</code>
                        </td>
                        <td class="col-md-10">
                          {{#if description}}
                            <div>{{{parseDescription description}}}</div>
                          {{/if}}
                          {{#if type}}
                            <em><code>$event</code> type:</em>{{> link-type type=type }}
                          {{/if}}
                        </td>
                    </tr>
                </tbody>
            </table>
        {{/each}}
    </section>
{{/if}}

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

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

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