<div class="jumbotron">

<div class="container">

<h1 class="display-3">Scorekeep Demo</h1>

<p class="lead"></p>

</div>

<div class="container">

<div class="row">

<div class="col-md-6">

<div class="row">

<div class="col-md-10 offset-md-1">

<button type="button" class="btn btn-outline-primary btn-lg btn-block" ng-click="toggleDdbDemo()">{{ getDdbDemoPrompt() }}</button>

<hr>

<p ng-bind-html="getDdbOutput()"></p>

</div>

</div>

</div>

<div class="col-md-6">

<div class="row">

<div class="col-md-10 offset-md-1" ng-show="isRdsConfigured">

<button type="button" class="btn btn-outline-primary btn-lg btn-block" ng-click="toggleRdsDemo()">{{ getRdsDemoPrompt() }}</button>

<hr>

<p ng-bind-html="getRdsOutput()"></p>

<table class="table">

<thead>

<tr>

<th>ID</th>

<th>Winner</th>

<th>Loser</th>

</tr>

</thead>

<tbody>

<tr ng-repeat="game in gameHistory">

<td>{{game.id}}</td>

<td>{{game.winningPlayer}}</td>

<td>{{game.losingPlayer}}</td>

</tr>

</tbody>

</table>

</div>

<div class="col-md-10 offset-md-1" ng-hide="isRdsConfigured">

<p>Use AWS Elastic Beanstalk to attach a database instance to this environment for the RDS demo.</p>

</div>

</div>

</div>

</div>

<nav class="navbar navbar-fixed-bottom navbar-light bg-faded">

<div class="container">

<div class="row">

<div class="col-md-4 offset-md-4">

</div>

</div>

</div>