<ol class="breadcrumb">
  <li class="breadcrumb-item">{{t "interfaces" }}</li>
  <li class="breadcrumb-item"
    {{#if interface.deprecated}}
        class="breadcrumb-item deprecated-name"
    {{/if}}
  >
  {{#if interface.displayName}}{{interface.displayName}}{{else}}{{interface.name}}{{/if}}</li>
</ol>

{{> file-path filePath=interface.file }}

<ul class="nav nav-tabs" role="tablist">
    {{#each navTabs}}
        <li class="nav-item">
            <a href="{{this.href}}" 
                class="nav-link"
                {{#compare @index "===" 0}}class="nav-link active"{{/compare}}
                role="tab" id="{{this.id}}-tab" data-bs-toggle="tab" data-link="{{this.data-link}}">{{t this.label}}</a>
        </li>
    {{/each}}
</ul>

<div class="tab-content">
    {{#isTabEnabled navTabs "info"}}
    <div class="tab-pane fade {{#isInitialTab navTabs "info"}}active in{{/isInitialTab}}" id="info">
        {{#if interface.deprecated}}
            <p class="comment">
                <h3 class="deprecated">{{t "deprecated" }}</h3>
            </p>
            <p class="comment">
                {{{ interface.deprecationMessage }}}
            </p>
        {{/if}}

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

        {{#if interface.extends}}
            <p class="comment">
                <h3>{{t "extends" }}</h3>
            </p>
            <p class="comment">
                {{#each interface.extends}}
                    {{> link-type type=this }}
                {{/each}}
            </p>
        {{/if}}

        {{> block-relationships relationships=interface.relationships }}
    </div>
    {{/isTabEnabled}}

    {{#isTabEnabled navTabs "api"}}
    <div class="tab-pane fade {{#isInitialTab navTabs "api"}}active in{{/isInitialTab}}" id="api">
        {{~> interface-api interface=interface navTabs=navTabs depth=depth ~}}
    </div>
    {{/isTabEnabled}}

    {{#isTabEnabled navTabs "readme"}}
    <div class="tab-pane fade {{#isInitialTab navTabs "readme"}}active in{{/isInitialTab}}" id="readme">
        <p>{{{interface.readme}}}</p>
    </div>
    {{/isTabEnabled}}

    {{#isTabEnabled navTabs "source"}}
    <div class="tab-pane fade {{#isInitialTab navTabs "source"}}active in{{/isInitialTab}} tab-source-code" id="source">
        <pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">{{ interface.sourceCode}}</code></pre>
    </div>
    {{/isTabEnabled}}
</div>
