<ol class="breadcrumb">
  <li>Pipes</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 pipe.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 pipe.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>{{pipe.file}}</code>
        </p>

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

        {{#if pipe.jsdoctags}}
            <p class="comment">
                <h3>Example</h3>
            </p>
            <div class="io-description">
                {{#jsdoc-code-example pipe.jsdoctags type='javascript'}}
                    {{#each tags}}
                        <div>
                            {{{comment}}}
                        </div>
                    {{/each}}
                {{/jsdoc-code-example}}
            </div>
        {{/if}}

        <section>
            <h3>Metadata</h3>
            <table class="table table-sm table-hover">
                <tbody>
                    {{#if pipe.ngname}}
                    <tr>
                        <td class="col-md-3">name</td>
                        <td class="col-md-9">{{pipe.ngname}}</td>
                    </tr>
                    {{/if}}
                    {{#if pipe.pure}}
                    <tr>
                        <td class="col-md-3">pure</td>
                        <td class="col-md-9">{{pipe.pure}}</td>
                    </tr>
                    {{/if}}
                </tbody>
            </table>
        </section>

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

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

    </div>

    {{#if pipe.readme}}
    <div class="tab-pane fade" id="c-readme">
        <p>{{{pipe.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">{{ pipe.sourceCode}}</code></pre>
    </div>
    {{/unless}}

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