CaffGeek/MBACNationals

<div class="row">
    <div class="col-md-12">
        <h4>Arrivals and Departures</h4>
        <table data-exportable="TravelPlans" class="table table-striped table-condensed table-hover">
            <thead>
                <tr>
                    <th data-ng-click="orderBy.Descending = !orderBy.Descending; orderBy.Column = 'Province'">Province</th>
                    <th data-ng-click="orderBy.Descending = !orderBy.Descending; orderBy.Column = 'When'">Date</th>
                    <th data-ng-click="orderBy.Descending = !orderBy.Descending; orderBy.Column = 'ModeOfTransportation'">Mode</th>
                    <th data-ng-click="orderBy.Descending = !orderBy.Descending; orderBy.Column = 'FlightNumber'">Info</th>
                    <th data-ng-click="orderBy.Descending = !orderBy.Descending; orderBy.Column = 'NumberOfPeople'">Number</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td colspan="5"><h4>Arrivals</h4></td>
                </tr>
            </tbody>
            <tbody data-ng-repeat="plan in model.FlattenedTravelPlans | filter:{Type:1} | orderBy:orderBy.Column:orderBy.Descending">
                <tr>
                    <td>{{plan.Province}}</td>
                    <td>{{plan.When | date:'yyyy-MM-dd h:mm a':'UTC'}}</td>
                    <td>{{plan.ModeOfTransportation}}</td>
                    <td>{{plan.FlightNumber}}</td>
                    <td>{{plan.NumberOfPeople}}</td>
                </tr>
                <tr>
                    <td></td>
                    <td colspan="4">
                        <span data-ng-repeat="occupant in plan.Occupants">
                            {{occupant.Name}} {{$last ? '' : ($index==plan.Occupants.length-2) ? ' and ' : ', '}}
                        </span>
                    </td>
                </tr>
            </tbody>
            <tbody>
                <tr>
                    <td colspan="5"><h4>Departures</h4></td>
                </tr>
            </tbody>
            <tbody data-ng-repeat="plan in model.FlattenedTravelPlans | filter:{Type:2} | orderBy:orderBy.Column:orderBy.Descending">
                <tr>
                    <td>{{plan.Province}}</td>
                    <td>{{plan.When | date:'yyyy-MM-dd h:mm a':'UTC'}}</td>
                    <td>{{plan.ModeOfTransportation}}</td>
                    <td>{{plan.FlightNumber}}</td>
                    <td>{{plan.NumberOfPeople}}</td>
                </tr>
                <tr>
                    <td></td>
                    <td colspan="4">
                        <span data-ng-repeat="occupant in plan.Occupants">
                            {{occupant.Name}} {{$last ? '' : ($index==plan.Occupants.length-2) ? ' and ' : ', '}}
                        </span>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>