<div>
    <h3>Welcome to NorthBreeze</h3>
    <div class="container-fluid">
        <p>
            This is a sample application using the NorthwindIB database, a modified version of the Northwind sample database
            that comes with Microsoft SQL Server.  
        </p>
        <p>
            This application uses <a href="http://www.breezejs.com/">Breeze</a>, <a href="http://angularjs.org/">Angular</a> , 
            and <a href="http://getbootstrap.com/2.3.2/index.html">Twitter Bootstrap</a>  on the client, 
            and ASP.NET <a href="http://www.asp.net/web-api">Web API</a> and <a href="http://nhforge.org/">NHibernate</a> on the server.
        </p>
        <p>
            This app demonstrates how to use Breeze with the <a href="https://www.grapecity.com/en/controls/wijmo/wijmo-3/">Wijmo Grid</a> 
            (see <code>controllers.js</code>), and a custom directive to perform client-side validation based on metadata provided 
            by the server-side domain model (see <code>directives.js</code> and <code>customers.html</code>).
        </p>
     </div>

    <!--<h3>Changed Entities</h3>
    <div>
        <div class="container-fluid">
        <p>
            The table below shows all the entities in the EntityManager that have changes.  
            Entities added, deleted, or modified will appear in this table.  The "Save" button on this page will cause all the entities
            to be saved to the server.  The "Reset" button will cause all the changes to be discarded.
        </p>
        <p>
            This table is not something you would find in a real app.  It is provided as a way to visualize the EntityManager cache
            and a demonstration of the <a href="http://www.breezejs.com/sites/all/apidocs/index.html">Breeze API</a>.
        </p>
        <p>
            This application uses a single EntityManager, so all changes occur in a single cache.  Some applications may require 
            <a href="http://www.breezejs.com/documentation/multiple-managers">multiple EntityManagers</a>, 
            so individual change sets (or Units of Work) can be managed independently.  For an example of this, see the 
            <a href="http://www.breezejs.com/samples/temphire-sample">TempHire</a> sample application.
        </p>

        </div>
        <table class="table table-striped table-bordered table-condensed">
            <thead>
                <th>Entity Type</th>
                <th>Entity Key</th>
                <th>Entity State</th>
            </thead>
            <tbody ng-repeat="e in changedEntities">
                <tr>
                    <td rowspan="2">{{e.entityType.shortName}}</td>
                    <td>{{e.entityAspect.getKey().values}}</td>
                    <td>{{e.entityAspect.entityState.name}}</td>
                </tr>
                <tr>
                    <td colspan="2">
                        <table class="table table-small">
                            <thead>
                                <th>Property Name</th>
                                <th>Original Value</th>
                                <th>Current Value</th>
                                <th>Validation Errors</th>
                            </thead>
                            <tr ng-repeat="(k,v) in e.entityAspect.originalValues">
                                <td>{{k}}</td>
                                <td>{{v}}</td>
                                <td>{{e[k]}}</td>
                                <td><span class="text-error" ng-repeat="r in e.entityAspect.getValidationErrors(k)">{{r.errorMessage}}</span></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </tbody>
        </table>
                    <button class="btn" ng-click="reset()">Reset All</button>
                    <button class="btn" ng-click="update()">Save All</button>
    </div>-->

    <!-- Using bootstrap grid system instead of table
    Changed Entities
    <div class="row-fluid">
        <div class="span3">Entity Type</div>
        <div class="span3">Entity State</div>
        <div class="span6">Entity Key</div>
    </div>
    <div class="row-fluid">
            <div class="span1"></div>
            <div class="span1">Property</div>
            <div class="span3">Original Value</div>
            <div class="span3">Current Value</div>
            <div class="span4">Validation Errors</div>
    </div>
    <div ng-repeat="e in changedEntities">
        <div class="row-fluid">
            <div class="span3">{{e.entityType.shortName}}</div>
            <div class="span3">{{e.entityAspect.entityState.name}}</div>
            <div class="span6">{{e.entityAspect.getKey().values}}</div>
        </div>
        <div ng-repeat="(k,v) in e.entityAspect.originalValues" class="row-fluid">
            <div class="span1"></div>
            <div class="span1">{{k}}</div>
            <div class="span3 text-info">{{v}}</div>
            <div class="span3 text-success">{{e[k]}}</div>
            <div class="span4"><span class="text-error" ng-repeat="r in e.entityAspect.getValidationErrors(k)">{{r.errorMessage}}</span></div>
        </div>
    </div>
    -->
</div>

