
    <% if (template == 'cols'){ %>
        <ion-grid>
            <ion-row>
        <%} else if (template == 'items') {%>
        <ion-list lines="full">
        <% } %>
        <% for (let row of rows) { %>
            <% for (let card of row) { %>
        <% if (template == 'cols'){ %><ion-col> <% } %>
        <% if (card.type == 'gauge') { %>
            <ion-card>
                <ion-item color="light" lines="full" class="card-header" >
                    <ion-icon name="<%= card.options.icon %>" slot="start"></ion-icon>
                    <ion-label><%= card.options.title %></ion-label>
                </ion-item>
                <ion-card-content>
                    <monitoring-gauge-card 
                        [input]="<%= card.dataSource %>" 
                        max="<%= card.options.max %>" 
                        min="<%= card.options.min %>" 
                        units="<%= card.options.unit %>">
                    </monitoring-gauge-card>
                </ion-card-content>
            </ion-card>
        <% } %><% if (card.type == 'card') { %>
        <ion-card>
            <ion-item lines="full" class="card-header" color="light">
                <ion-icon name="<%= card.options.icon %>" slot="start"></ion-icon>
                <ion-label><%= card.options.title %></ion-label>
                <ion-icon name="" slot="end"></ion-icon>
            </ion-item>
            <ion-card-content color="light">
                <ion-list lines='none'>
                    <% if (card.options.actions) { %>
                        <app-monitoring-actions [actions]="actions['<%= card.variable %>']" [variable]="<%= card.variable %>" slot="end"></app-monitoring-actions>
                    <% } else { %>
                    <monitoring-variable-value class="variable-value" <% if (card.options.mapping) { %>
                        [inputOptions]="inputOptions['<%= card.variable %>']"<% } %>
                        [variable]="<%= card.variable %>" 
                        slot="end" 
                        [waitForSubmit]="waitForSubmit"
                        [editable]="<%= card.options.editable %>"></monitoring-variable-value> 
                    <% if (card.options.unit) { %><ion-item class="variable-unit">
                        <ion-label><%= card.options.unit %></ion-label> 
                    </ion-item><% } %>
                    <% } %>
                </ion-list>
            </ion-card-content>
        </ion-card>
        <% } %><% if (card.type == 'item') { %>
            <ion-item>
                <% if (card.icon) { %><ion-icon name="<%= card.icon %>" slot="start"></ion-icon><% } %>
                <ion-label slot="start"><%= card.options.title %></ion-label>
                <% if (card.variable) { %><monitoring-variable-value [variable]="<%= card.variable %>" slot="end" [waitForSubmit]="waitForSubmit" <% if (card.options.editable) {%>[editable]="true"<% } %>></monitoring-variable-value> <% } %>
                <% if (card.options.unit) { %><span slot="end"><%= card.options.unit %></span> <% } %>
                <% if (card.options.actions) { %>
                <ion-buttons slot="end">
                    <% for (let action of card.options.actions) { %>
                    <ion-button (click)="performAction(action)">
                        <% if (action.icon) { %><ion-icon name="<%= action.icon %>"></ion-icon> <% } %>
                        <% if (action.label) { %><span><%= action.label %></span> <% } %>
                    </ion-button>
                    <% } %>
                </ion-buttons>
                <% } %>
        </ion-item>
        <% } %><% if (card.type == 'list-todo-notimplemented') { %>
        <ion-list>
            <% for (let i = 0; i < card.options.length; i++) { %>
            <ion-item>
                <ion-label slot="start"><%= card.options.title %></ion-label>
                <monitoring-variable-value [variable]="<%= card.variable %>" slot="end" [waitForSubmit]="waitForSubmit" <% if (card.options.editable) {%>[editable]="true"<% } %>></monitoring-variable-value> 
            </ion-item>
            <% } %>
        </ion-list>
        <% } %><% if (card.type == 'table') { %>
        <ion-card-content>
            <tapapp-monitoring-table 
                [columnsMap]="<%= card.options.columnsMap %>" 
                [dataSource]="historyDataSource" 
                [variables]="<%= card.dataSource %>">
            </tapapp-monitoring-table>
        </ion-card-content>
        <% } %><% if (card.type == 'chart') { %>
        <ion-card>
            <ion-item color="dark">
                <ion-icon name="thermometer" slot="start"></ion-icon>
                <ion-label>Temperature/Voltage over time</ion-label>
            </ion-item>
            <ion-card-content>
                <monitoring-chart-card [input]="chartInput" xaxislabel="Temperature"></monitoring-chart-card>
            </ion-card-content>
        </ion-card>
        <% } %><% if (card.type == 'text-card') { %>
        <monitoring-text-card [input-stream]="<%= card.dataSource %>" icon="<%= card.options.icon %>" subtitle="<%= card.options.subtitle %>" title="<%= card.options.title %>" unit="<%= card.options.unit %>"></monitoring-text-card>
        <% } %><% if (card.type == 'action') { %>
            <app-monitoring-actions [actions]="ledConfigActions" [variable]="variables.ledConfig" slot="end"></app-monitoring-actions>
        <% } %><% if (card.type == 'range') { %>
            <tap-variable-range [variable]="variables.<%= card.variable %>"></tap-variable-range>
        <% } %><% if (card.type == 'custom') { %>
            <<%= card.name %> <% for (let input of inputs) { %> [<%= input.key %>]="<%= input.stream %>" <% } %><% for (let option of options) { %> <%= option.key %>="<%= option.value %>" <% } %>></<%= card.name %>>
        <% } %>
        
        <% if (template == 'cols'){ %></ion-col> <% } %>
    
        <% } %>
        <% } %>
        <% if (template == 'cols'){ %>
            </ion-row>
        </ion-grid>
        <%} else if (template == 'items') {%>
        </ion-list>
        <% } %>