<navigation></navigation>

<div class="container">
    <icon></icon>
    <page-header content="vm.pageHeader"></page-header>
    <div class="row">
        <div class="col-xs-12 col-md-4">
            <div class="row">
                <div class="col-xs-12">
                    <div class="panel panel-primary">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-xs-4">
                                    <div class="col-xs-3"><span class="glyphicon glyphicon-calendar"></span></div>
                                </div>
                                <div class="col-xs-8">
                                    <p class="sessionStartTime">{{ vm.data.session.startTime | date : 'MMMM d, y h:mm a ' : 'UTC'}} - {{ vm.data.session.endTime
                                        | date : 'h:mm a' : 'UTC'}}
                                    </p>
                                    <p> <span class="glyphicon glyphicon-map-marker"></span> {{vm.data.session.location}} </p>
                                    <p>Speaker(s): </p>
                                    <div ng-repeat="speaker in vm.data.session.speaker">
                                      <p>  <a ng-href="/speaker/{{ speaker._id }}">{{ speaker.firstName}} {{ speaker.lastName}}</a></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12"><a href="/schedule/" class="btn btn-warning">Back to Schedule</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <footer-generic></footer-generic>