<div class="row">
    <div class="col-xs-10">
        <h3>Statistik</h3>
    </div>
    <div class="col-xs-2">
        <h3>
            <button id="btn-coach-help"
                    class="btn btn-link pull-right coach-help">
                <i class="glyphicon glyphicon-question-sign"></i>&nbsp;Hilfe
            </button>
        </h3>
    </div>
</div>

<h4>Persönliche Statistik</h4>
<div class="panel panel-default">
    <div class="panel-body">
        <div class="row">
            <div class="col-xs-3">
                <div class="stats stats-profile-image">
                    <img src="<%= TB.GUI.getProfilePicUrl( data.profile ) %>" class="img-responsive img-circle profile-image-small" />
                </div>
                <div class="stats stats-footer">
                    <%= TB.GUI.playerName( data.profile ) %>
                </div>
            </div>
            <div class="col-xs-3">
                <div class="stats stats-head">
                    Rang
                </div>
                <div class="stats stats-number">
                    <%= ( data.statsExt.playerRank ) ? data.statsExt.playerRank : '---' %>
                </div>
                <div class="stats stats-footer">
                    <% var playerRankDiff = parseInt( data.statsExt.playerRankCompare ) - parseInt( data.statsExt.playerRank ); %>
                    <% if ( !data.statsExt.playerRankCompare || 0 ==  playerRankDiff ) {   %>
                    Tendenz
                    <br/>
                    <span class="stats-footer-number">+/-0</span>
                    <% } else if ( 0 < playerRankDiff ) {    %>
                    <span class="stats-color-success">Tendenz</span>
                    <br/>
                    <span class="stats-footer-number"><span class="stats-color-success">+<%= data.statsExt.playerRankCompare %></span></span>&nbsp;<i class="fa fa-level-up stats-color-success"></i>
                    <% } else { %>
                    <span class="stats-color-error">Tendenz</span>
                    <br/>
                    <span class="stats-footer-number"><span class="stats-color-error">-<%= data.statsExt.playerRankCompare %></span></span>&nbsp;<i class="fa fa-level-down stats-color-error"></i>
                    <% }    %>
                </div>
            </div>
            <div class="col-xs-3">
                <div class="stats stats-head">
                    RSC
                </div>
                <div class="stats stats-number">
                    <%= TB.Utils.getPercentFromFloat( data.statsExt.playerReliability ) %>%
                </div>
                <div class="stats stats-footer">
                    <div class="progress">
                        <div class="progress-bar"
                             role="progressbar"
                             aria-valuenow="<%= TB.Utils.getPercentFromFloat( data.statsExt.playerReliability ) %>"
                             aria-valuemin="0"
                             aria-valuemax="100"
                             style="width: <%= TB.Utils.getPercentFromFloat( data.statsExt.playerReliability ) %>%;background-color: <%= TB.GUI.getGradientHex( '#5cb85c', '#f35142', data.statsExt.playerReliability ) %>;">
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-3">
                <div class="stats stats-head">
                    ASC
                </div>
                <div class="stats stats-number">
                    <%= TB.Utils.getPercentFromFloat( data.statsExt.playerAttendeeReliability ) %>%
                </div>
                <div class="stats stats-footer">
                    <div class="progress">
                        <div class="progress-bar"
                             role="progressbar"
                             aria-valuenow="<%= TB.Utils.getPercentFromFloat( data.statsExt.playerAttendeeReliability ) %>"
                             aria-valuemin="0"
                             aria-valuemax="100"
                             style="width: <%= TB.Utils.getPercentFromFloat( data.statsExt.playerAttendeeReliability ) %>%;background-color: <%= TB.GUI.getGradientHex( '#5cb85c', '#f35142', data.statsExt.playerAttendeeReliability ) %>;">
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="stats-quote">

                    <%  var top1 = [ 'Glückwünsch, besser geht\'s nicht.', 'Du bist ganz oben. Glückwunsch.', 'Top-Leistung, hervorragend.', 'Vorbildlich. Tolle Reaktions- und Zusagebilanz.' ];
                        var top2 = [ 'Du bist auf einem guten Weg.', 'Weiter so, noch fehlt ein Stück zur Spitze.', 'Du wirst immer besser, klasse. Dein Team baut auf Dich.', 'Wenn Du so weitermachst, bist Du bald die Nummer Eins.' ];
                        var top3 = [ 'Streng dich an, sonst geht die Talfahrt weiter. Wann bist Du wieder dabei?', 'Alles gut Dir, Buddy? Du verlierst wertvolle Plätze, schau mal wieder vorbei.', 'Du hast leider etwas nachgelassen. Wie siehts es für die nächsten Termine aus?', 'Arbeite an Deiner Zuverlässigkeit. Dann gehts wieder nach oben.', 'Schau regelmäßiger in Deine Termine, sage zu oder ab.' ]; %>


                        <% if ( data.statsExt.playerRank ) {  %>
                            &quot;Du bist auf Platz <%= data.statsExt.playerRank %> von insgesamt <%= data.statsExt.teamRanking.length %>.
                            <% if ( 1 === parseInt( data.statsExt.playerRank ) ) {  %>
                                    <%= top1[ ~~(Math.random() * top1.length) ] %>&quot;
                            <% } else if ( playerRankDiff > 0 ) {  %>
                                    <%= top2[ ~~(Math.random() * top2.length) ] %>&quot;
                            <% } else if ( playerRankDiff < 0 ) {  %>
                                    <%= top3[ ~~(Math.random() * top3.length) ] %>&quot;
                            <% } else { %>
                                    Da geht doch noch was.&quot;
                            <% }    %>
                        <% } else { %>
                            <i class="glyphicon glyphicon-info-sign"></i>&nbsp;Erfahre mehr über die Statistik in der Hilfe.
                        <% } %>
                </div>
            </div>
        </div>
    </div>
</div>

<h4>Team Statistik</h4>
<div class="panel panel-default">
    <div class="panel-body">
        <div class="row">
            <div class="col-xs-3">
                <div class="stats stats-team-image">
                    <%
                    var teamPic = 'img/team-pic-none.png';
                    if ( data.team.emblem_url ) {
                        teamPic = data.team.emblem_url;
                    }
                    %>
                    <img src="<%= teamPic %>" class="img-responsive img-thumbnail team-emblem-small" />
                </div>
                <div class="stats stats-footer">
                    <%= data.team.display_name %>
                </div>
            </div>
            <div class="col-xs-3">
                <div class="stats stats-head">
                    FBS
                </div>
                <div class="stats stats-number">
                    <%= TB.GUI.formatHugeNumber( data.statsExt.teamAppointmentReactions ) %>
                </div>
            </div>
            <div class="col-xs-3">
                <div class="stats stats-head">
                    RSC
                </div>
                <div class="stats stats-number">
                    <%= TB.Utils.getPercentFromFloat( data.statsExt.teamReliability ) %>%
                </div>
                <div class="stats stats-footer">
                    <div class="progress">
                        <div class="progress-bar"
                             role="progressbar"
                             aria-valuenow="<%= TB.Utils.getPercentFromFloat( data.statsExt.teamReliability ) %>"
                             aria-valuemin="0"
                             aria-valuemax="100"
                             style="width: <%= TB.Utils.getPercentFromFloat( data.statsExt.teamReliability ) %>%;background-color: <%= TB.GUI.getGradientHex( '#5cb85c', '#f35142', data.statsExt.teamReliability ) %>;">
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-3">
                <div class="stats stats-head">
                    ASC
                </div>
                <div class="stats stats-number">
                    <%= TB.Utils.getPercentFromFloat( data.statsExt.teamAttendeeReliability ) %>%
                </div>
                <div class="stats stats-footer">
                    <div class="progress">
                        <div class="progress-bar progress-bar-success"
                             role="progressbar"
                             aria-valuenow="<%= TB.Utils.getPercentFromFloat( data.statsExt.teamAttendeeReliability ) %>"
                             aria-valuemin="0"
                             aria-valuemax="100"
                             style="width: <%= TB.Utils.getPercentFromFloat( data.statsExt.teamAttendeeReliability ) %>%;background-color: <%= TB.GUI.getGradientHex( '#5cb85c', '#f35142', data.statsExt.teamAttendeeReliability ) %>;">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-3">
                <div class="stats stats-other">
                    Alle Teams
                </div>
            </div>
            <div class="col-xs-3">
                <div class="stats stats-head">
                    FBS
                </div>
                <div class="stats stats-number">
                    <%= TB.GUI.formatHugeNumber( data.statsExt.generalAppointmentReactions ) %>
                </div>
            </div>
            <div class="col-xs-3">
                <div class="stats stats-head">
                    RSC
                </div>
                <div class="stats stats-number">
                    <%= TB.Utils.getPercentFromFloat( data.statsExt.generalReliability ) %>%
                </div>
                <div class="stats stats-footer">
                    <div class="progress">
                        <div class="progress-bar"
                             role="progressbar"
                             aria-valuenow="<%= TB.Utils.getPercentFromFloat( data.statsExt.generalReliability ) %>"
                             aria-valuemin="0"
                             aria-valuemax="100"
                             style="width: <%= TB.Utils.getPercentFromFloat( data.statsExt.generalReliability ) %>%;background-color: <%= TB.GUI.getGradientHex( '#5cb85c', '#f35142', data.statsExt.generalReliability ) %>;">
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-3">
                <div class="stats stats-head">
                    ASC
                </div>
                <div class="stats stats-number">
                    <%= TB.Utils.getPercentFromFloat( data.statsExt.generalAttendeeReliability ) %>%
                </div>
                <div class="stats stats-footer">
                    <div class="progress">
                        <div class="progress-bar"
                             role="progressbar"
                             aria-valuenow="<%= TB.Utils.getPercentFromFloat( data.statsExt.generalAttendeeReliability ) %>"
                             aria-valuemin="0"
                             aria-valuemax="100"
                             style="width: <%= TB.Utils.getPercentFromFloat( data.statsExt.generalAttendeeReliability ) %>%;background-color: <%= TB.GUI.getGradientHex( '#5cb85c', '#f35142', data.statsExt.generalAttendeeReliability ) %>;">
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>


<h4>Rangliste <span class="span-premium"><i class="glyphicon glyphicon-star"></i></span></h4>
<div class="panel panel-default">
    <div class="panel-body">
        <% if ( data && data.statsExt && data.statsExt.teamRanking && data.statsExt.teamRanking.length ) { %>
        <div class="table-responsive">
            <table class="table table-striped table-stats-ranking">
                <thead>
                <tr>
                    <th>#</th>
                    <th>Name</th>
                    <th>RSC</th>
                    <th>ASC</th>
                    <th>CSC</th>
                    <th>FSC</th>
                </tr>
                </thead>
                <tbody>
                <% var maxRankingLength = TB.Premium.isPremium() ? data.statsExt.teamRanking.length : 1; %>
                <% for ( var i = 0; i < maxRankingLength; i++ ) { %>
                <tr class="<%= ( TB.Client.profile.id == data.statsExt.teamRanking[i].b_spieler_id  ) ? 'highlighted' : '' %>">
                    <td><%= data.statsExt.teamRanking[i].rank %></td>
                    <td><%= data.statsExt.teamRanking[i].b_spielerName %></td>
                    <td><%= TB.Utils.getPercentFromFloat( data.statsExt.teamRanking[i].ReaktQuote ) %>%</td>
                    <td><%= TB.Utils.getPercentFromFloat( data.statsExt.teamRanking[i].ZuQuote ) %>%</td>
                    <td><%= TB.Utils.getPercentFromFloat( data.statsExt.teamRanking[i].AbQuote ) %>%</td>
                    <td><%= TB.Utils.getPercentFromFloat( data.statsExt.teamRanking[i].NoReaction ) %>%</td>
                </tr>
                <% }    %>
                </tbody>
            </table>
        </div>

        <% if( false === TB.Premium.isPremium() && maxRankingLength < data.statsExt.teamRanking.length ) {  %>

            <div class="panel panel-premium">
                <div class="panel-heading">
                    Premium Funktion <i class="glyphicon glyphicon-star"></i>
                </div>
                <div class="panel-body">
                    <p>
                        Die komplette Rangliste ist nur in der Premium Version verfügbar.
                    </p>
                    <p>
                        Klicke auf den Button um mehr über TBuddy Premium zu erfahren und die Premium Funktionen für das Team freizuschalten.
                    </p>
                    <p>
                        <a class="btn btn-premium" href="<%= TB.Controller.getUrl( 'Settings', 'order_premium' ) %>">
                            Jetzt Premium <i class="glyphicon glyphicon-star"></i>
                        </a>
                    </p>
                </div>
            </div>

        <% }    %>

        <% } else {     %>

        <p>
            Keine Daten.
        </p>

        <%  }   %>
    </div>
</div>
