<div id="breadcrumb" class="row">
    <div class="col-md-12">
        <ol class="breadcrumb breadcrumb-arrow">
            <li>
                <a href="javascript:TB.Controller.reload()"><i class="icon pe-7s-users"></i>Team</a>
            </li>
            <li class="active"><span><%= data.team.display_name %></span></li>
        </ol>
    </div>
</div>
<div class="row">
    <div class="col-xs-10">
        <h3><%= data.team.display_name %></h3>
    </div>
    <div class="col-xs-2">
        <button id="btn-coach-help"
                class="btn btn-link pull-right coach-help">
            <i class="glyphicon glyphicon-question-sign"></i>&nbsp;Hilfe
        </button>
    </div>
</div>


<div class="panel panel-default">
    <div class="panel-body">
        <div class="row">
            <div class="col-md-6">
                <div class="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-size" />
                </div>
                <div class="team-name">
                    <%= data.team.display_name %>
                </div>
            </div>
            <div class="col-md-6">
                <div class="table-responsive">
                    <table class="table table-condensed table-team-profile">
                        <tr>
                            <td>Coach</td>
                            <td>
                                <%
                                var trainerName = 'Unbekannt', trainerProfileId;
                                for ( var i=0; i < data.profiles.length; i++ ) {
                                    if ( TB.GUI.isTrainer( data.profiles[i] )  ) {
                                        trainerName = TB.GUI.playerName( data.profiles[i] );
                                        trainerProfileId = data.profiles[i].id;
                                        break;
                                    }
                                }
                                %>
                                <a type="button"
                                   href="<%= TB.Controller.getUrl( 'Player', 'index', { profile_id: trainerProfileId } ) %>">
                                    <%= trainerName %>
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td>Co-Coach(es)</td>
                            <td>
                                <%
                                var cocoaches = false;
                                for ( var i=0; i < data.profiles.length; i++ ) {
                                    if ( TB.GUI.isCoTrainer( data.profiles[i] )  ) {
                                        if ( cocoaches ) {
                                            %><%= ' - ' %><%
                                        } else {
                                            cocoaches = true;
                                        }
                                %>
                                <a type="button"
                                   href="<%= TB.Controller.getUrl( 'Player', 'index', { profile_id :  data.profiles[i].id } ) %>">
                                    <%= TB.GUI.playerName( data.profiles[i] ) %>
                                </a>
                                <%
                                    }
                                }
                                %>

                            </td>
                        </tr>
                        <tr>
                            <td>Sport/Art</td>
                            <td><%= TB.GUI.getValue( data.team.category, 'keine Angabe' ) %></td>
                        </tr>
                        <tr>
                            <td>Reg.-nummer</td>
                            <td><%= TB.GUI.getValue( data.team.reg_no, '---' ) %></td>
                        </tr>
                        <tr>
                            <td>
                                Anzahl Buddies
                            </td>
                            <td>
                                <% var fanProfiles = [];
                                   var numBuddies = 0;
                                   for ( var pi = 0; pi < data.profiles.length; pi++ ) {
                                      if ( TB.GUI.isFan( data.profiles[pi] ) ) {
                                          fanProfiles.push( data.profiles[ pi ] );
                                      } else {
                                          numBuddies++;
                                      }
                                  } %>
                                <%= numBuddies %>
                            </td>
                        </tr>
                        <tr>
                            <td>Anzahl Fans</td>
                            <td><%= TB.GUI.getValue( fanProfiles.length, '---' ) %></td>
                        </tr>
                        <tr>
                            <td>Premium Status</td>
                            <td>
                                <% if ( TB.Premium.isPremium( data.team ) ) {  %>
                                    <label style="font-size: 14px" class="label label-premium"><%= TB.Premium.getName( data.team.active_premium_package ) %> <i class="glyphicon glyphicon-star"></i></label>
                                <% } else { %>
                                    <label class="label label-default"><%= TB.Premium.getName( data.team.active_premium_package ) %></label>
                                <% }    %>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<% if ( TB.Client.can( TB.ACL.RIGHTS.TEAM_UPDATE ) || TB.Client.can( TB.ACL.RIGHTS.TEAM_UPDATEEMBLEM ) ) {  %>

    <div class="row">

        <% if ( TB.Client.can( TB.ACL.RIGHTS.TEAM_UPDATEEMBLEM ) ) {  %>
        <div class="col-md-6 col-sm-12">
            <button id="btn_edit_team_emblem"
                    class="btn btn-block btn-premium"
                    role="button">
                Emblem Ändern <i class="glyphicon glyphicon-star"></i>
            </button>
        </div>
        <% }    %>

        <% if ( TB.Client.can( TB.ACL.RIGHTS.TEAM_UPDATE ) ) {  %>
        <div class="col-md-6 col-sm-12">
            <button id="btn_edit_team"
                    class="btn btn-block btn-primary"
                    role="button">
                Team Einstellungen
            </button>
        </div>
        <% }    %>
    </div>

    <hr />

<% }    %>

<% if ( !TB.Env.isNativeMobile() ) {    %>

    <% if ( TB.Premium.PACKAGE_STANDARD === data.team.active_premium_package ) { %>

        <div class="panel panel-default">
            <div class="panel-body">
                <h4>Premium Paket buchen <i class="glyphicon glyphicon-star"></i></h4>
                <p>
                    Dein Team hat kein Premium. Nutze TBuddy noch effizienter und buche jetzt ein Premium Paket für dein gesamtes Team.
                </p>
                <a href="<%= TB.Controller.getUrl( 'Settings', 'order_premium' ) %>"
                   class="btn btn-premium btn-block">
                    Zu den Premium Paketen <i class="glyphicon glyphicon-star"></i>
                </a>
            </div>
        </div>

    <% } else if ( null !== data.premium_last && null != data.premium_last.valid_until_dt ) { %>

        <div class="panel panel-default">
            <div class="panel-body">
                <h4>Premium Paket buchen <i class="glyphicon glyphicon-star"></i></h4>
                <p>
                    Der Premium Status von deinem Team läuft am <strong><%= moment( data.premium_last.valid_until_dt.date ).format( 'Do MMMM YYYY' ) %></strong> ab. Buche schon jetzt ein Premium Paket für dein Team, um weiterhin den vollen Funktionsumfang von TBuddy nutzen zu können.
                </p>
                <a href="<%= TB.Controller.getUrl( 'Settings', 'order_premium' ) %>"
                   class="btn btn-premium btn-block">
                    Zu den Premium Paketen <i class="glyphicon glyphicon-star"></i>
                </a>
            </div>
        </div>

    <% }    %>

<% }    %>

<div class="row">
    <div class="col-md-12">
        <h4>Teambuddies</h4>
    </div>
</div>
<div class="row">

    <% if( data.profiles && data.profiles.length > 0 ) { %>

        <% for ( var i = 0; i < data.profiles.length; i++ ) { %>

            <% if ( TB.GUI.isFan( data.profiles[ i ] ) ) continue; %>

            <div class="col-md-6 col-sm-12 no-extra-bottom-margin">
                <div class="panel panel-default">
                    <div class="panel-body profile-list">
                        <div class="pull-left">
                            <a href="<%= TB.Controller.getUrl( 'Player', 'index', { profile_id : data.profiles[i].id } ) %>">
                                <img src="<%= TB.GUI.getProfilePicUrl( data.profiles[i] ) %>"
                                     class="img-responsive img-circle img-thumbnail profile-pic-size-list">
                            </a>
                        </div>
                        <div class="profile-list-body">
                            <a href="<%= TB.Controller.getUrl( 'Player', 'index', { profile_id : data.profiles[i].id } ) %>"
                               class="profile-list-name">
                                <%= TB.GUI.playerName( data.profiles[ i ] ) %>
                            </a>&nbsp;<%= TB.GUI.getProfileStatusHtml( data.profiles[ i ].status, 'pull-right' ) %><br />
                            <i class="glyphicon glyphicon-phone comment <%= '---' == TB.GUI.getPhoneNo( data.profiles[ i ] ) ? 'faded' : '' %>"></i>&nbsp;<span class="comment <%= '---' == TB.GUI.getPhoneNo( data.profiles[ i ] ) ? 'faded' : '' %>">
                                <%= TB.GUI.getPhoneNo( data.profiles[ i ] ) %>
                            </span>
                        </div>
                    </div>
                </div>
            </div>

        <% }    %>
    <% }    %>

</div>
<?php
/*



<div class="row">
    <div class="col-md-12">

        <div class="specialContentBig">

            <div class="panel panel-default">
                <div class="panel-body">


                    <table id="table_player_list"
                       class="table table-striped table-team-buddies">
                        <thead>
                        <tr>
                            <th>Name</th>
                            <th>Passnummer</th>
                            <th>Rolle</th>
                            <th>Telefon</th>
                            <th>Status</th>
                        </tr>
                        </thead>
                        <tbody>
                        <% if( data.profiles && data.profiles.length > 0 ) { %>
                            <% for ( var i = 0; i < data.profiles.length; i++ ) { %>
                                <% if ( TB.GUI.isFan( data.profiles[ i ] ) ) continue; %>
                                <tr>
                                    <td>
                                        <a type="button"
                                           href="<%= TB.Controller.getUrl( 'Player', 'index', { profile_id : data.profiles[i].id } ) %>">
                                            <%= TB.GUI.playerName( data.profiles[ i ] ) %>
                                        </a>
                                    </td>
                                    <td>
                                        <%= TB.GUI.getValue( data.profiles[ i ].player_pass_no, '---' ) %>
                                    </td>
                                    <td>
                                        <%= TB.GUI.getRole( data.profiles[ i ].role ) %>
                                    </td>
                                    <td>
                                        <%= TB.GUI.getPhoneNo( data.profiles[ i ] ) %>
                                    </td>
                                    <td>
                                        <%= TB.GUI.getProfileStatusHtml( data.profiles[ i ].status ) %>
                                    </td>
                                </tr>
                            <% } %>
                        <% } else { %>
                            <tr>
                                <td colspan="*"><span class="label label-primary">Bislang keine Spieler im Team.</span></td>
                            </tr>
                        <% } %>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>


        <div class="specialContentSmall">

            <div class="panel panel-default">
                <div class="panel-body">


                    <table id="table_player_list"
                           class="table table-striped table-team-buddies">
                        <thead>
                        <tr>
                            <th>Name</th>
                            <th>Telefon</th>
                        </tr>
                        </thead>
                        <tbody>
                        <% if( data.profiles && data.profiles.length > 0 ) { %>
                        <% for ( var i = 0; i < data.profiles.length; i++ ) { %>
                        <tr>
                            <td>
                                <a type="button"
                                   href="<%= TB.Controller.getUrl( 'Player', 'index', { profile_id : data.profiles[i].id } ) %>">
                                    <%= TB.GUI.playerName( data.profiles[ i ] ) %>
                                </a>
                            </td>
                            <td>
                                <%= TB.GUI.getPhoneNo( data.profiles[ i ] ) %>
                            </td>
                        </tr>
                        <% } %>
                        <% } else { %>
                        <tr>
                            <td colspan="*"><span class="label label-primary">Bislang keine Spieler im Team.</span></td>
                        </tr>
                        <% } %>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</div>

*/
?>
<div class="row">
    <div class="col-md-12">
        <h4>Fans</h4>

        <div class="panel panel-default">
            <div class="panel-body">

                <% if ( fanProfiles && fanProfiles.length > 0 ) { %>

                <p>

                    <% for ( var fi = 0; fi < fanProfiles.length; fi++ ) { %>

                    <%= ( fi > 0 ) ? ' - ' : '' %>

                    <a type="button"
                       href="<%= TB.Controller.getUrl( 'Player', 'index', { profile_id : fanProfiles[fi].id } ) %>">
                        <%= TB.GUI.playerName( fanProfiles[ fi ] ) %>
                    </a>

                    <% }    %>


                </p>

                <%  } else {  %>

                <p>Keine</p>

                <%  }   %>

            </div>
        </div>
    </div>
</div>



<div class="row">
    <div class="col-md-12">
        <h4>Einladungen</h4>
    </div>
</div>
<div class="row">
    <div class="col-md-12">


        <div class="specialContentBig">

            <div class="panel panel-default">
                <div class="panel-body">

                        <table class="table table-striped table-team-invites">
                            <thead>
                            <tr>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Rolle</th>
                                <th>Datum</th>
                                <th>Status</th>
                                <% if ( TB.Client.can( TB.ACL.RIGHTS.TEAM_DELETEINVITATION ) || TB.Client.can( TB.ACL.RIGHTS.TEAM_RESENDINVITATION ) ) {  %>
                                    <th>&nbsp;</th>
                                <%  }   %>
                            </tr>
                            </thead>
                            <tbody>
                            <% if( data.invitation && data.invitation.length > 0 ) { %>
                                <% var stateHtml = '';  %>
                                <% for ( var i = 0; i < data.invitation.length; i++ ) { %>
                                    <%
                                    switch( data.invitation[ i ].state ) {
                                    case 'sending':
                                                stateHtml = '<span class="label label-default">In Kürze versendet</span>';
                                            break;

                                            case 'delivered':
                                                stateHtml = '<span class="label">Versendet</span>';
                                            break;

                                            case 'accepted':
                                                stateHtml = '<span class="label label-success">Angenommen</span>';
                                            break;

                                            case 'cancelled':
                                                stateHtml = '<span class="label label-danger">Abgelehnt</span>';
                                            break;
                                        }
                                    %>
                                    <tr>
                                        <td data-title="Name"><%= data.invitation[ i ].first_name + " " + data.invitation[i].last_name %></td>
                                        <td data-title="Email"><%= data.invitation[ i ].email %></td>
                                        <td data-title="Rolle"><%= TB.GUI.getRole( data.invitation[ i ].role ) %></td>
                                        <td data-title="Datum"><%= TB.Utils.getDatetimeStringFromUnixTimestamp( data.invitation[ i ].last_update ) %></td>
                                        <td data-title="Status"><%= stateHtml %></td>
                                        <% if ( TB.Client.can( TB.ACL.RIGHTS.TEAM_DELETEINVITATION ) || TB.Client.can( TB.ACL.RIGHTS.TEAM_RESENDINVITATION ) ) {  %>
                                        <td data-title="">
                                                <% if ( data.invitation[ i ].state == 'delivered' || data.invitation[ i ].state == 'cancelled' && TB.Client.can( TB.ACL.RIGHTS.TEAM_DELETEINVITATION ) ) {  %>
                                                    <button type="button" class="btn btn-danger btn-xs"
                                                            data-action="invitation-delete"
                                                            data-invitation_id="<%= data.invitation[ i ].id %>">
                                                            <span class="glyphicon glyphicon-trash"></span>
                                                    </button>
                                                <%  }   %>
                                                &nbsp;
                                                <% if ( data.invitation[ i ].state == 'delivered' && TB.Client.can( TB.ACL.RIGHTS.TEAM_RESENDINVITATION ) ) {  %>
                                                    <button type="button" class="btn btn-default btn-xs"
                                                            data-action="invitation-reminder"
                                                            data-invitation_id="<%= data.invitation[ i ].id %>">
                                                        <span class="glyphicon glyphicon-retweet"></span>
                                                    </button>
                                                <%  }   %>
                                            <%  } else {    %>
                                            &nbsp;
                                        </td>
                                        <%  }   %>
                                    </tr>
                                <% } %>
                            <% } else { %>
                                <tr>
                                    <td colspan="*"><span class="label label-primary">Keine</span></td>
                                </tr>
                            <% } %>
                            </tbody>
                        </table>
                        <p>
                            <% var numBuddiesLeft = Math.max(0, ( TB.Premium.getMaxAllowedBuddies() - data.profiles.length ) ); %>
                            <span class="primary-color"><i class="fa fa-info-circle"></i></span> Du kannst noch <%= numBuddiesLeft %> Buddies einladen.  <%= ( numBuddiesLeft > 1 ) ? 'Mit einem noch besseren Premium Paket kannst du mehr Buddies einladen.' : 'Hole dir ein TBuddy Premium Paket für dich und dein Team um mehr Buddies einladen zu können.' %>
                        </p>
                    </div>
                </div>
            </div>


        <div class="specialContentSmall">

            <div class="panel panel-default">
                <div class="panel-body">

                    <table class="table table-striped table-team-invites">
                        <thead>
                        <tr>
                            <th>Name</th>
                            <th>Status</th>
                            <% if ( TB.GUI.isTrainer() || TB.GUI.isCoTrainer() ) {  %>
                            <th>&nbsp;</th>
                            <%  }   %>
                        </tr>
                        </thead>
                        <tbody>
                        <% if( data.invitation && data.invitation.length > 0 ) { %>
                        <% var stateHtml = '';  %>
                        <% for ( var i = 0; i < data.invitation.length; i++ ) { %>
                        <%
                        switch( data.invitation[ i ].state ) {
                        case 'sending':
                        stateHtml = '<span class="label label-default">In Kürze versendet</span>';
                        break;

                        case 'delivered':
                        stateHtml = '<span class="label">Versendet</span>';
                        break;

                        case 'accepted':
                        stateHtml = '<span class="label label-success">Angenommen</span>';
                        break;

                        case 'cancelled':
                        stateHtml = '<span class="label label-danger">Abgelehnt</span>';
                        break;
                        }
                        %>
                        <tr>
                            <td data-title="Name"><%= data.invitation[ i ].first_name + " " + data.invitation[i].last_name %></td>
                            <td data-title="Status"><%= stateHtml %></td>
                            <% if ( TB.GUI.isTrainer() || TB.GUI.isCoTrainer() ) {  %>
                            <td data-title="">
                                <% if ( data.invitation[ i ].state == 'delivered' || data.invitation[ i ].state == 'cancelled' ) {  %>
                                <button type="button" class="btn btn-danger btn-xs"
                                        data-action="invitation-delete"
                                        data-invitation_id="<%= data.invitation[ i ].id %>">
                                    <span class="glyphicon glyphicon-trash"></span>
                                </button>
                                <%  }   %>
                                &nbsp;
                                <% if ( data.invitation[ i ].state == 'delivered' ) {  %>
                                <button type="button" class="btn btn-default btn-xs"
                                        data-action="invitation-reminder"
                                        data-invitation_id="<%= data.invitation[ i ].id %>">
                                    <span class="glyphicon glyphicon-retweet"></span>
                                </button>
                                <%  }   %>
                                <%  } else {    %>
                                &nbsp;
                            </td>
                            <%  }   %>
                        </tr>
                        <% } %>
                        <% } else { %>
                        <tr>
                            <td colspan="*"><span class="label label-primary">Keine</span></td>
                        </tr>
                        <% } %>
                        </tbody>
                    </table>
                    <p>
                        <% var numBuddiesLeft = Math.max(0, ( TB.Premium.getMaxAllowedBuddies() - data.profiles.length ) ); %>
                        <span class="primary-color"><i class="fa fa-info-circle"></i></span> Du kannst noch <%= numBuddiesLeft %> Buddies einladen.  <%= ( numBuddiesLeft > 1 ) ? 'Mit einem noch besseren Premium Paket kannst du mehr Buddies einladen.' : 'Hole dir ein TBuddy Premium Paket für dich und dein Team um mehr Buddies einladen zu können.' %>
                    </p>
                </div>
            </div>
        </div>

        </div>
    </div>
</div>

<% if ( TB.Client.can( TB.ACL.RIGHTS.TEAM_INVITEPLAYER ) )  {   %>

<div class="row">
    <div class="col-md-12 col-sm-12">
        <% if ( ( TB.Premium.getMaxAllowedBuddies() - data.profiles.length ) > 0 ) {    %>
            <button id="btn_team_invite"
                    class="btn btn-block btn-primary"
                    <%= ( ( TB.Premium.getMaxAllowedBuddies() - data.profiles.length ) < 1 ) ? 'disabled="disabled"' : '' %>
                    role="button">
                Buddy einladen
            </button>
        <% } else { %>
            <a id="btn_team_invite_more"
               class="btn btn-premium btn-block">
                Jetzt Premium <i class="glyphicon glyphicon-star"></i>
            </a>
        <% }    %>
    </div>
</div>

<% }    %>