<!-- layout type -->
<h1>{{className}}</h1>
<!-- show some metainformation -->
<h2>Meta Information</h2>
<dl>
    <!-- more properties are available, consult https://www.npmjs.com/package/@ibm-wch-sdk/ng for documentation -->
    <dt>ID</dt>
    <dd>\{{ renderingContext.id }}</dd>
    <dt>name</dt>
    <dd>\{{ renderingContext.name }}</dd>
</dl>
<a href="https://www.npmjs.com/package/@ibm-wch-sdk/ng">more documentation</a>
<!-- show the fields -->
<h2>Property List</h2>
  <dl>
{{#each elements}}
  <dt>
{{#if prop}}
    Property: {{#if required}}*{{/if}}{{prop}}
{{/if}}

{{#if key}}
| Key: {{key}}
{{/if}}

{{#if label}}
| Label: {{label}}
{{/if}}

{{#if description}}
| Description: {{description}}
{{/if}}
  </dt>

  <dd>
{{#is elementType "text"}}
<!-- text type, see https://angular.io/guide/template-syntax#property-binding-or-interpolation -->
{{#if allowMultipleValues}}
    <ul{{#unless required}} *ngIf="{{prop}}"{{/unless}}>
      <li *ngFor="let v of {{prop}}{{#if @root.editable}}; let idx = index{{/if}}">
        <div {{#if @root.editable}}[wchEditable]="'{{prop}}[' + idx + ']'"{{/if}}>\{{ v }}</div>
      </li>
    </ul>
{{else}}
    <div{{#unless required}} *ngIf="{{prop}}"{{/unless}}{{#if @root.editable}} wchEditable="{{prop}}"{{/if}}>\{{ {{prop}} }}</div>
{{/if}}
{{/is}}

{{#is elementType "number"}}
<!-- number type, see https://angular.io/api/common/DecimalPipe -->
{{#if allowMultipleValues}}
    <ul{{#unless required}} *ngIf="{{prop}}"{{/unless}}>
        <li *ngFor="let v of {{prop}}{{#if @root.editable}}; let idx = index{{/if}}">
            <div>\{{ v | number}}</div>
        </li>
    </ul>
{{else}}
    <div{{#unless required}} *ngIf="{{prop}}"{{/unless}}{{#if @root.editable}} wchEditable="{{prop}}"{{/if}}>\{{ {{prop}} | number}}</div>
{{/if}}
{{/is}}

{{#is elementType "toggle"}}
<!-- toggle, https://angular.io/guide/template-syntax#ngIf -->
{{#if allowMultipleValues}}
    <ul{{#unless required}} *ngIf="{{prop}}"{{/unless}}>
        <li *ngFor="let v of {{prop}}{{#if @root.editable}}; let idx = index{{/if}}">
            <div *ngIf="v">ON</div>
            <div *ngIf="!v">OFF</div>
        </li>
    </ul>
{{else}}
    <div *ngIf="{{prop}}"{{#if @root.editable}} wchEditable="{{prop}}"{{/if}}>ON</div>
    <div *ngIf="!{{prop}}"{{#if @root.editable}} wchEditable="{{prop}}"{{/if}}>OFF</div>
{{/if}}
{{/is}}

{{#is elementType "formattedtext"}}
<!-- formattedtext, https://angular.io/guide/template-syntax#property-binding-or-interpolation -->
{{#if allowMultipleValues}}
    <ul{{#unless required}} *ngIf="{{prop}}"{{/unless}}>
        <li *ngFor="let v of {{prop}}{{#if @root.editable}}; let idx = index{{/if}}">
            <div [innerHTML]="v"></div>
        </li>
    </ul>
{{else}}
    <div{{#unless required}} *ngIf="{{prop}}"{{/unless}}{{#if @root.editable}} wchEditable="{{prop}}"{{/if}} [innerHTML]="{{prop}}"></div>
{{/if}}
{{/is}}

{{#is elementType "link"}}
<!-- link -->
{{#if allowMultipleValues}}
    <ul{{#unless required}} *ngIf="{{prop}}"{{/unless}}>
        <li *ngFor="let v of {{prop}}{{#if @root.editable}}; let idx = index{{/if}}">
            <a [href]="v.linkURL" [title]="v.linkDescription">\{{ v.linkText }}</a>
        </li>
    </ul>
{{else}}
    <a{{#unless required}} *ngIf="{{prop}}"{{/unless}}{{#if @root.editable}} wchEditable="{{prop}}"{{/if}} [href]="{{prop}}.linkURL" [title]="{{prop}}.linkDescription">\{{ {{prop}}.linkText }}</a>
{{/if}}
{{/is}}

{{#is elementType "datetime"}}
<!-- datetime, https://angular.io/api/common/DatePipe -->
{{#if allowMultipleValues}}
    <ul{{#unless required}} *ngIf="{{prop}}"{{/unless}}>
        <li *ngFor="let v of {{prop}}{{#if @root.editable}}; let idx = index{{/if}}">
            <div>\{{ v | date }}</div>
        </li>
    </ul>
{{else}}
    <div{{#unless required}} *ngIf="{{prop}}"{{/unless}}{{#if @root.editable}} wchEditable="{{prop}}"{{/if}}>\{{ {{prop}} | date }}</div>
{{/if}}
{{/is}}

{{#is elementType "file"}}
<!-- file -->
{{#if allowMultipleValues}}
    <ul{{#unless required}} *ngIf="{{prop}}"{{/unless}}>
        <li *ngFor="let v of {{prop}}{{#if @root.editable}}; let idx = index{{/if}}">
            <a *ngIf="v" [href]="renderingContext.context.hub.deliveryUrl.origin + v.url">\{{ v.asset.fileName }}</a>
        </li>
    </ul>
{{else}}
    <a{{#unless required}} *ngIf="{{prop}}"{{/unless}}{{#if @root.editable}} wchEditable="{{prop}}"{{/if}} [href]="renderingContext.context.hub.deliveryUrl.origin + {{prop}}.url">\{{ {{prop}}.asset.fileName }}</a>
{{/if}}
{{/is}}

{{#is elementType "video"}}
<!-- video -->
{{#if allowMultipleValues}}
    <ul{{#unless required}} *ngIf="{{prop}}"{{/unless}}>
        <li *ngFor="let v of {{prop}}{{#if @root.editable}}; let idx = index{{/if}}">
            <video *ngIf="v" [src]="renderingContext.context.hub.deliveryUrl.origin + v.url" [title]="v.asset.fileName" controls height="100px"></video>
        </li>
    </ul>
{{else}}
    <video{{#unless required}} *ngIf="{{prop}}"{{/unless}}{{#if @root.editable}} wchEditable="{{prop}}"{{/if}} [src]="renderingContext.context.hub.deliveryUrl.origin + {{prop}}.url" [title]="{{prop}}.asset.fileName" controls height="100px"></video>
{{/if}}
{{/is}}

{{#is elementType "image"}}
<!-- image -->
{{#if allowMultipleValues}}
    <ul{{#unless required}} *ngIf="{{prop}}"{{/unless}}>
        <li *ngFor="let v of {{prop}}{{#if @root.editable}}; let idx = index{{/if}}">
            <img *ngIf="v" [src]="renderingContext.context.hub.deliveryUrl.origin + v.url" [alt]="v.altText" [title]="v.asset.fileName">
        </li>
    </ul>
{{else}}
    <img{{#unless required}} *ngIf="{{prop}}"{{/unless}}{{#if @root.editable}} wchEditable="{{prop}}"{{/if}} [src]="renderingContext.context.hub.deliveryUrl.origin + {{prop}}.url" [alt]="{{prop}}.altText" [title]="{{prop}}.asset.fileName">
{{/if}}
{{/is}}

{{#is elementType "location"}}
<!-- location -->
{{#if allowMultipleValues}}
    <ul{{#unless required}} *ngIf="{{prop}}"{{/unless}}>
        <li *ngFor="let v of {{prop}}{{#if @root.editable}}; let idx = index{{/if}}">
            <span>Lat: \{{ v.latitude | number }}, Long: \{{ v.longitude | number }}</span>
        </li>
    </ul>
{{else}}
    <div{{#unless required}} *ngIf="{{prop}}"{{/unless}}{{#if @root.editable}} wchEditable="{{prop}}"{{/if}}>Lat: \{{ {{prop}}.latitude | number }}, Long: \{{ {{prop}}.longitude | number }}</div>
{{/if}}
{{/is}}

{{#is elementType "optionselection"}}
<!-- optionselection -->
{{#if allowMultipleValues}}
    <select{{#unless required}} *ngIf="{{prop}}"{{/unless}}>
        <option *ngFor="let v of {{prop}}{{#if @root.editable}}; let idx = index{{/if}}" [value]="v.selection">
            \{{ v.label }}
        </option>
    </select>
{{else}}
    <select{{#unless required}} *ngIf="{{prop}}"{{/unless}}>
        <option [value]="{{prop}}.selection">\{{ {{prop}}.label }}</option>
    </select>
{{/if}}
{{/is}}

{{#is elementType "category"}}
<!-- categories -->
    <ul{{#unless required}} *ngIf="{{prop}}"{{/unless}}{{#if @root.editable}} wchEditable="{{prop}}"{{/if}}>
        <li *ngFor="let c of {{prop}}.categories">\{{ c }}</li>
    </ul>
{{/is}}

{{#is elementType "reference"}}
<!-- reference, see https://www.npmjs.com/package/@ibm-wch-sdk/ng ContentrefComponent -->
{{#if allowMultipleValues}}
    <pre>
        &lt;ul{{#unless required}} *ngIf=&quot;{{prop}}&quot;{{/unless}}&gt;
            &lt;li *ngFor=&quot;let v of {{prop}};trackBy: trackByComponentId;&quot;&gt;
                &lt;wch-contrentref [renderingContext]=&quot;v&quot;&gt;&lt;/wch-contrentref&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    </pre>
{{else}}
<!-- use the following markup to pull in the reference -->
    <pre{{#unless required}} *ngIf="{{prop}}"{{/unless}}>
        &lt;wch-contentref [renderingContext]=&quot;{{prop}}&quot;&gt;&lt;/wch-contentref&gt;
    </pre>
{{/if}}
{{/is}}

</dd>

{{/each}}
</dl>