<div>
    <div class="copy">
        <h3>
            Templates and Conditional Formatting
        </h3>
        <p>
            Wijmo is not opinionated about templating mechanisms. It does however
            provide a flexible infrastructure that allows you to easily integrate
            templating mechanisms provided by whatever framework you choose.
        </p>
        <p>
            This sample uses Angular 2 , which provides a great templating mechanism.
            Our FlexGrid component leverages Angular 2 templates and allows you to specify
            cell templates directly in the markup. The directive uses the grid's
            <b>itemFormatter</b> function to evaluate the templates and generate the cell
            content.
        </p>
        <p>
            The markup looks very similar to what you would use when creating regular
            tables in Angular 2, or grids in XAML:
        </p>
        <pre>&lt;wj-flex-grid #flex
                      class="grid"
                      [itemsSource]="data"
                      [isReadOnly]="true"
                      (itemsSourceChanged)="itemsSourceChangedHandler()"&gt;
            &lt;wj-flex-grid-column [header]="'ID'" [binding]="'id'" [width]="80"&gt;&lt;/wj-flex-grid-column&gt;
            &lt;wj-flex-grid-column [header]="'Date'" [binding]="'start'"&gt;&lt;/wj-flex-grid-column&gt;
            &lt;wj-flex-grid-column [header]="'Product'"
                                 [binding]="'product'"&gt;
                &lt;template wjFlexGridCellTemplate [cellType]="'Cell'" #item="item"&gt;
                    &lt;div [ngStyle]="&#123;color: item.productId == 1 ? 'darkred' : 'darkgreen'}"&gt;
                        &lt;span [ngClass]="'glyphicon ' + 'glyphicon-' + [ 'leaf', 'fire', 'magnet' ][item.productId]"&gt;&lt;/span&gt;
                        &#123;&#8203;&#123;item.product}}
                    &lt;/div&gt;
                &lt;/template&gt;
            &lt;/wj-flex-grid-column&gt;
            &lt;wj-flex-grid-column [header]="'Revenue'" [binding]="'amount'" [format]="'n0'"&gt;&lt;/wj-flex-grid-column&gt;
            &lt;wj-flex-grid-column [header]="'Expense'" [binding]="'amount2'" [format]="'n0'"&gt;&lt;/wj-flex-grid-column&gt;
            &lt;wj-flex-grid-column [header]="'Discount'"
                                 [binding]="'discount'"
                                 [format]="'p0'"&gt;
                &lt;template wjFlexGridCellTemplate [cellType]="'Cell'" #item="item"&gt;
                    &lt;div [ngStyle]="&#123;color: item.discount &gt; 0.12 ? 'darkred' : 'darkgreen'}"&gt;
                        &#123;&#8203;&#123;item.discount | percent:'1.0-0'}}
                    &lt;/div&gt;
                &lt;/template&gt;
            &lt;/wj-flex-grid-column&gt;
        &lt;/wj-flex-grid&gt;
</pre>

        <p>
            Notice how the third and the last grid columns contains a <b>template</b> element with
            a <b>wjFlexGridCellTemplate</b> directive, with some HTML inside the template. 
            The directive uses that HTML content
            as a column template. The directive inserts three local variables that you can use in the
            template: <b>row</b>, <b>column</b>, and <b>item</b>. These variables contain references to the cell's row,
            column, and bound data item. The template uses the <b>item</b> variable to insert an icon in the
            cell.
        </p>
        <p>
            The template of the last column contains a div element with an <b>ngStyle</b> directive that 
            causes items with discounts higher than 12% to be shown in red. 
        </p>
    </div>
    <div>

        <!-- the grid -->
        <wj-flex-grid #flex [allowResizing]="'Both'"
                      class="grid"
                      [itemsSource]="data"
                      [isReadOnly]="false"
                      [allowAddNew]="true"
                      (itemsSourceChanged)="itemsSourceChangedHandler()">
            <wj-flex-grid-column [header]="'ID'" [binding]="'id'" [width]="80"></wj-flex-grid-column>
            <wj-flex-grid-column [header]="'Date'" [binding]="'start'"></wj-flex-grid-column>
            <wj-flex-grid-column [header]="'Product'"
                                 [binding]="'product'">
                <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
                    <div [ngStyle]="{color: cell.item.product == 'Gadget' ? 'darkred' : 'darkgreen'}">
                        <span [ngClass]="'glyphicon ' + 'glyphicon-' + { 'Widget': 'leaf', 'Gadget':  'fire', 'Doohickey': 'magnet' }[cell.item.product]"></span>
                        {{cell.item.product}}
                    </div>
                </ng-template>
            </wj-flex-grid-column>
            <wj-flex-grid-column [header]="'Revenue'" [binding]="'amount'" [format]="'n0'" [width]="150">
                <ng-template wjFlexGridCellTemplate [cellType]="'CellEdit'" let-cell="cell">
                    <wj-input-number [(value)]="cell.value" [isRequired]="false" [step]="1">
                    </wj-input-number>                        
                </ng-template>
            </wj-flex-grid-column>
            <wj-flex-grid-column [header]="'Expense'" [binding]="'amount2'" [format]="'n0'"></wj-flex-grid-column>
            <wj-flex-grid-column [header]="'Discount'"
                                 [binding]="'discount'"
                                 [format]="'p0'">
                <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
                    <div [ngStyle]="{color: cell.item.discount > 0.12 ? 'darkred' : 'darkgreen'}">
                        <!-- TBD: percent pipe causes an exception on destroy, it's not the case with currency pipe -->
                        <!--{{cell.item.discount | percent:'1.0-0'}}-->
                        {{cell.col.grid.getCellData(cell.row.index, cell.col.index, true)}}
                    </div>
                </ng-template>
            </wj-flex-grid-column>
        </wj-flex-grid>
    </div>
</div>
