<div class="panel panel-default" ng-init="getApp()">
    <div class="panel-heading">
        <h3 class="panel-title">{{app.title}}</h3>
    </div>
    <div class="panel-body">
        <div class="row">
            <div class="col-md-6">
                <b>Summary: </b>{{app.summary}}
            </div>
            <div class="col-md-6">
                <b>Genre: </b>{{app.genre}}
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <b>Total # of Ratings: </b>{{app.reviewsCount}}
            </div>
            <div class="col-md-6">
                <b>Star Rating: </b>{{app.score}}
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <b>Android Version: </b>{{app.androidVersion}}
            </div>
            <div class="col-md-6">
                <b>Min # of Installs: </b>{{app.minInstalls}}
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <b>Max # of Installs: </b>{{app.maxInstalls}}
            </div>
            <div class="col-md-6">
                <b>Play Store URL: </b><a href="{{app.playstoreUrl}}">{{app.playstoreUrl}}</a>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <!-- <h1>And operator</h1> -->
        <div id="tvizAnd" class="text-center"></div>
    </div>
    <!-- <div class="col-md-6">
        <h1>Average operator</h1>
        <div id="tvizAverage" class="text-center"></div>
    </div> -->
</div>

<div id="reputationHTI" ng-show="reputationHTI">
    <h3>Reputation Expectation</h3>
    <div class="row" id="reputationCTContainer">
        <div class="col-md-4">
            <div class="text-center">Ratings</div>
            <div id="ratingsCT"></div>
        </div>
        <div class="col-md-4">
            <div class="text-center">Reviews</div>
            <div id="reviewsCT"></div>
        </div>
        <div class="col-md-4">
            <div class="text-center">WFusion Result</div>
            <div id="reputationWFusionResult"></div>
        </div>
    </div>   
    
</div>

<div id="spHTI" ng-show="spHTI">
    <h3>S&P Quality Expectation</h3>
    <div class="row" id="spQualityCTContainer">
        <div class="col-md-4">
            <div class="text-center">Security Risks</div>
            <div id="securityRisksCT"></div>
        </div>
        <div class="col-md-4">
            <div class="text-center">Privacy Risks</div>
            <div id="privacyRisksCT"></div>
        </div>
        <div class="col-md-4">
            <div class="text-center">AND Result</div>
            <div id="spQualityAndResult"></div>
        </div>
    </div>
</div>

<div>
    <h3 ng-show="finalHTI">Final Score</h3>
    <div class="row" ng-show="finalHTI">
        <div class="col-md-4">
            <div class="text-center">And Result</div>
            <div id="finalAndResult"></div>
        </div>
    </div>
</div>
<div class="loader" ng-hide="dataLoaded"></div>