<div class="jumbotron">
    <img id="logo" class="img-responsive" src="assets/images/logo.png"/>
    <p class="vert-offset text-center">
        Clinical data ETL and phenotyping system
    </p>
</div>
<div id="indexPanels">
    <div class="container-fluid">
        <div class="row" ng-if="modes.demoMode">
            <div class="alert alert-warning">NOTE: This demonstration web site is NOT suitable for
                use with sensitive data including patient data that contains
                identifiers.
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="panel panel-info">
                    <div class="panel-heading">Getting Started</div>
                    
                        <div class="panel-body text-center" ng-show="userVerficationPerformed == false ">
                            <div class="container-fluid">
                                <div class="row">
                                    <div class="col-xs-12">
                                        <h4><i class="fa fa-refresh fa-spin fa-2x"></i>
                                        </h4>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="panel-body text-center" ng-show="userVerficationPerformed == true && !user">
                            <div class="container-fluid">
                                <div class="row" ng-switch="registration.registrationEnabled">
                                    <div ng-switch-when="true">
                                        <div class="col-xs-6">
                                            <h4>Learn about Eureka!</h4>
                                            <a ng-href="{{links.aiwUrl}}/#overview" target="_blank"
                                               class="btn btn-primary btn-lg">
                                                About Eureka!
                                            </a>
                                        </div>
                                        <div class="col-xs-6">
                                            <h4>Get an account</h4>
                                            <a href="chooseaccounttype"
                                               class="btn btn-primary btn-lg">
                                                Register
                                            </a>
                                        </div>
                                    </div>
                                    <div ng-switch-default>
                                        <div class="col-xs-12">
                                            <h4>Learn about Eureka!</h4>
                                            <a ng-href="{{links.aiwUrl}}/#overview" target="_blank"
                                               class="btn btn-primary btn-lg">
                                                About Eureka!
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>        
                    
                        <div class="panel-body text-center" ng-show="userVerficationPerformed == true && user">
                            <div class="container-fluid">
                                <div class="row">
                                    <div class="col-xs-12">
                                        <h4>Learn more about Eureka!</h4>
                                        <a ng-href="{{links.aiwUrl}}/#overview" target="_blank"
                                           class="btn btn-primary btn-lg">
                                            About Eureka!
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    
                </div>               
            </div>
            <div class="col-md-6">
                <div class="panel panel-info">
                    <div class="panel-heading">Want to evaluate Eureka! at your institution?</div>
                    <div class="panel-body text-center">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-xs-12">
                                    <h4>Contact us for options</h4>
                                    <a ng-href="{{links.aiwUrl}}/contact/" target="_blank"
                                       class="btn btn-primary btn-lg">
                                        Contact Us
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row" ng-controller="NewsAndFundingController">
            <div class="col-md-6">
                <div class="panel panel-info">
                    <div class="panel-heading">News</div>
                    <div class="panel-body" id="versionHistory">
                        
                        <div class="row" ng-repeat-start="versionItem in versionHistory" ng-if="$first">
                            <div class="col-sm-2" >{{versionItem.releaseDate}}</div>
                            <div class="col-sm-10">{{versionItem.description}}</div>
                        </div>
                        <!--add offset style from 2nd items to keep the css style as original design-->
                        <div class="row vert-offset" ng-repeat-end ng-if="!$first">
                            <div class="col-sm-2" >{{versionItem.releaseDate}}</div>
                            <div class="col-sm-10">{{versionItem.description}}</div>                            
                        </div>
                        
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="panel panel-info">
                    <div class="panel-heading">Funding</div>
                    <div class="panel-body text-center">
                        <p>The software powering this site has been supported in part by 
                            <span ng-bind-html="supportedByHTML" id="supportBy"></span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
