<ol class="breadcrumb">
  <li>Directives</li>
  <li>{{name}}</li>
</ol>

<ul class="nav nav-tabs" role="tablist">
    <li class="active">
        <a href="#info" id="info-tab" role="tab" data-toggle="tab" data-link="info">Info</a>
    </li>

    {{#if directive.readme}}
    <li>
        <a href="#readme" role="tab" id="readme-tab" data-toggle="tab" data-link="readme">README</a>
    </li>
    {{/if}}

    {{#unless disableSourceCode}}
    <li>
        <a href="#source" role="tab" id="source-tab" data-toggle="tab" data-link="source">Source</a>
    </li>
    {{/unless}}

    {{#if directive.exampleUrls}}
    <li>
        <a href="#example" role="tab" id="example-tab" data-toggle="tab" data-link="example">Examples</a>
    </li>
    {{/if}}
</ul>

<div class="tab-content">
    <div class="tab-pane fade active in" id="c-info">
        <p class="comment">
            <h3>File</h3>
        </p>
        <p class="comment">
            <code>{{directive.file}}</code>
        </p>

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

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

        {{#if directive.jsdoctags}}
            <p class="comment">
                <h3>Example</h3>
            </p>
            <div class="io-description">
                {{#jsdoc-code-example directive.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 directive.providers}}
                    <tr>
                        <td class="col-md-3">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">selector</td>
                        <td class="col-md-9"><code>{{directive.selector}}</code></td>
                    </tr>
                    {{/if}}

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

        {{#orLength directive.propertiesClass directive.methodsClass directive.inputsClass directive.outputClass directive.hostBindings directive.hostListeners directive.accessors}}
            {{> index-directive 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}}
            <section>
                <h3 id="inputs">Inputs</h3>
                {{#each directive.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">{{../directive.file}}:{{{line}}}</a></div>
                                        </td>
                                    </tr>
                                {{/unless}}
                            {{/if}}
                        </tbody>
                    </table>
                {{/each}}
            </section>
        {{/if}}

        {{#if directive.outputsClass}}
            <section>
                <h3 id="outputs">Outputs</h3>
                {{#each directive.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">{{../directive.file}}:{{{line}}}</a></div>
                                        </td>
                                    </tr>
                                {{/unless}}
                            {{/if}}
                        </tbody>
                    </table>
                {{/each}}
            </section>
        {{/if}}

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

        {{#if directive.hostListeners}}
            {{> block-method 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>

    {{#if directive.readme}}
    <div class="tab-pane fade" id="c-readme">
        <p>{{{directive.readme}}}</p>
    </div>
    {{/if}}

    {{#unless disableSourceCode}}
    <div class="tab-pane fade tab-source-code" id="c-source">
        <pre class="line-numbers"><code class="language-typescript">{{ directive.sourceCode}}</code></pre>
    </div>
    {{/unless}}

    {{#if directive.exampleUrls}}
    <div class="tab-pane fade" id="c-example">
        {{#each directive.exampleUrls}}
            <iframe src="{{this}}" style="height: 100vh; width: 100%;">
                <p>Your browser does not support iframes.</p>
            </iframe>
        {{/each}}
    </div>
    {{/if}}
</div>
