<div class="detail-pane" *ngFor="let m of [module|async]" >
  <div *ngIf="m != null">
    <h3>
      {{m.name}}
            <small class="text-muted">{{m.description}}</small>
      </h3>
      <div class="group">
        <h4>Usage:</h4>
        <p [innerHTML]= "m.usage | safe: 'html'" highlight-js-content></p>
      </div>
      <div class="group">
          <h4>Inputs:</h4>
          <p [innerHTML]= "m.inputs | safe: 'html'"></p>
        </div>
      <div class="group">
        <h4>Outputs:</h4>
        <p [innerHTML]= "m.outputs | safe: 'html'"></p>
      </div>

      <div class="group">
        <h4>Module Configuration:</h4>
        <pre class="blue-stripes" highlight-js-content><code class="ini">{{m.module_config}}</code></pre>
      </div>

      <div class="group">
        <h4>DataStream Configurations:</h4>
        <mat-tab-group (selectedTabChange)="highlightCode()">
          <mat-tab *ngFor="let config of m.stream_configs" label="{{config.name}}">
            <pre class="blue-stripes" highlight-js-content><code class="language-ini">{{config.config}}</code></pre>
          </mat-tab>
        </mat-tab-group>
      </div>
  </div>
</div>
