<div class="row">
    <div class="col-md-12">
        <h3>Preise</h3>
    </div>
</div>

<div class="row">
    <div class="col-md-3">
        <div class="panel panel-primary panel-pricetable">
            <div class="panel-heading"><h3 class="text-center">Standard</h3></div>
            <div class="panel-body text-center">
                <p class="lead">
                    kostenlos
                </p>
                <small>für das <strong>gesamte</strong> Team</small>
            </div>
            <ul class="list-group list-group-flush text-center">
                <li class="list-group-item <%= ( data.numProfiles > TB.Premium.getMaxAllowedBuddies( TB.Premium.PACKAGE_STANDARD ) ) ? 'text-danger' : '' %>">
                    bis zu 10 Teilnehmer
                </li>
                <li class="list-group-item">Standard Funktionen</li>
                <li class="list-group-item">&nbsp;</li>
            </ul>
            <div class="panel-footer text-center">
                <% if ( data.team.active_premium_package == TB.Premium.PACKAGE_STANDARD ) { %>
                    <label class="label label-primary label-pricing">
                        Aktiv <i class="glyphicon glyphicon-ok"></i>
                    </label>
                <% } else { %>
                    <button class="btn btn-lg btn-block btn-primary"
                        disabled="disabled">
                        kostenlos
                    </button>
                <% }    %>
            </div><!--/panel-footer-->
        </div><!--/panel-->
    </div><!--/col-->
    <div class="col-md-3">
        <div class="panel panel-premium panel-pricetable">
            <div class="panel-heading"><h3 class="text-center">Premium25 <i class="glyphicon glyphicon-star"></i></h3></div>
            <div class="panel-body text-center">
                <p class="lead">
                    <%= TB.Premium.getPrice( TB.Premium.PACKAGE_PREMIUM25 ) %> <small>pro Monat</small>
                </p>
                <small>für das <strong>gesamte</strong> Team</small>
            </div>
            <ul class="list-group list-group-flush text-center">
                <li class="list-group-item <%= ( data.numProfiles > TB.Premium.getMaxAllowedBuddies( TB.Premium.PACKAGE_PREMIUM25 ) ) ? 'text-danger' : '' %>">
                    Bis zu <strong>25</strong> Mitglieder
                </li>
                <li class="list-group-item">Standard Funktionen</li>
                <li class="list-group-item"><strong>Alle Premium Funktionen</strong></li>
            </ul>
            <div class="panel-footer">
                <a href="<%= TB.Controller.getUrl( 'Settings', 'premium' ) %>"
                   class="btn btn-lg btn-block btn-premium">
                    Bestellen
                </a>
            </div><!--/panel-footer-->
        </div><!--/panel-->
    </div><!--/col-->
    <div class="col-md-3">
        <div class="panel panel-premium panel-pricetable">
            <div class="panel-heading"><h3 class="text-center">Premium50 <i class="glyphicon glyphicon-star"></i></h3></div>
            <div class="panel-body text-center">
                <p class="lead">
                    <%= TB.Premium.getPrice( TB.Premium.PACKAGE_PREMIUM50 ) %> <small>pro Monat</small>
                </p>
                <small>für das <strong>gesamte</strong> Team</small>
            </div>
            <ul class="list-group list-group-flush text-center">
                <li class="list-group-item <%= ( data.numProfiles > TB.Premium.getMaxAllowedBuddies( TB.Premium.PACKAGE_PREMIUM50  ) ) ? 'text-danger' : '' %>">
                    Bis zu <strong>50</strong> Mitglieder
                </li>
                <li class="list-group-item">Standard Funktionen</li>
                <li class="list-group-item"><strong>Alle Premium Funktionen</strong></li>
            </ul>
            <div class="panel-footer">
                <a href="<%= TB.Controller.getUrl( 'Settings', 'premium' ) %>"
                   class="btn btn-lg btn-block btn-premium">
                    Bestellen
                </a>
            </div><!--/panel-footer-->
        </div><!--/panel-->
    </div><!--/col-->
    <div class="col-md-3">
        <div class="panel panel-premium panel-pricetable">
            <div class="panel-heading"><h3 class="text-center">Premium100 <i class="glyphicon glyphicon-star"></i></h3></div>
            <div class="panel-body text-center">
                <p class="lead">
                    <%= TB.Premium.getPrice( TB.Premium.PACKAGE_PREMIUM100 ) %> <small>pro Monat</small>
                </p>
                <small>für das <strong>gesamte</strong> Team</small>
            </div>
            <ul class="list-group list-group-flush text-center">
                <li class="list-group-item <%= ( data.numProfiles > TB.Premium.getMaxAllowedBuddies( TB.Premium.PACKAGE_PREMIUM100 ) ) ? 'text-danger' : '' %>">
                    Bis zu <strong>100</strong> Mitglieder
                </li>
                <li class="list-group-item"><i class="icon-ok text-danger"></i> Standard Funktionen</li>
                <li class="list-group-item"><i class="icon-ok text-danger"></i> <strong>Alle Premium Funktionen</strong></li>
            </ul>
            <div class="panel-footer">
                <a href="<%= TB.Controller.getUrl( 'Settings', 'premium' ) %>"
                   class="btn btn-lg btn-block btn-premium">
                    Bestellen
                </a>
            </div><!--/panel-footer-->
        </div><!--/panel-->
    </div><!--/col-->
</div><!--/row-->

<div class="row">
    <div class="col-xs-12">
        <div class="panel">
            <div class="panel-body">
                <p>
                <span class="primary-color"><i class="fa fa-info-circle"></i></span> <strong>Mehr als 100 Mitglieder?</strong>
                </p>
                <p>
                Kein Problem. Wir stellen dir ein individuelles Angebot zusammen, das deinen Anforderungen entspricht. Melde dich einfach bei uns!
                </p>
                <a href="#/c=Content&a=support" class="btn btn-primary">Unverbindliches Angebot anfordern</a>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <h3>Funktionen</span></h3>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="table-responsive">
                    <table class="table table-striped table-hover table-premium-features">
                        <thead>
                            <tr>
                                <th class="col-xs-6">
                                    &nbsp;
                                </th>
                                <th class="col-xs-3">
                                    Standard<br />
                                    <small>kostenlos</small>
                                </th>
                                <th class="col-xs-3">
                                    Premium&nbsp;<i class="glyphicon glyphicon-star"></i>
                                    <br />
                                    <small>ab <%= TB.Premium.getPrice( TB.Premium.PACKAGE_PREMIUM25 ) %> <small> pro Monat</small></small>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    Mitglieder Verwaltung
                                </td>
                                <td>
                                    <i class="fa fa-check"></i>
                                </td>
                                <td>
                                    <i class="fa fa-check"></i>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Team Verwaltung
                                </td>
                                <td>
                                    <i class="fa fa-check"></i>
                                </td>
                                <td>
                                    <i class="fa fa-check"></i>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Termin Organisation
                                </td>
                                <td>
                                    <i class="fa fa-check"></i>
                                </td>
                                <td>
                                    <i class="fa fa-check"></i>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Team Chat
                                </td>
                                <td>
                                    <i class="fa fa-check"></i>
                                </td>
                                <td>
                                    <i class="fa fa-check"></i>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    iOS & Android App
                                </td>
                                <td>
                                    <i class="fa fa-check"></i>
                                </td>
                                <td>
                                    <i class="fa fa-check"></i>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Statistik
                                </td>
                                <td>
                                    <span class="label label-primary">einfach</span>
                                </td>
                                <td>
                                    <span class="label label-premium">erweitert</span>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Serientermine
                                </td>
                                <td>
                                    <i class="fa fa-times"></i>
                                </td>
                                <td>
                                    <i class="fa fa-check"></i>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Termine abonnieren (.ics)
                                </td>
                                <td>
                                    <i class="fa fa-times"></i>
                                </td>
                                <td>
                                    <i class="fa fa-check"></i>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Individualiserungsmöglichkeiten (Bilder, Logo, etc)
                                </td>
                                <td>
                                    <i class="fa fa-times"></i>
                                </td>
                                <td>
                                    <i class="fa fa-check"></i>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Zugriff auf vergangene Termine
                                </td>
                                <td>
                                    <i class="fa fa-times"></i>
                                </td>
                                <td>
                                    <i class="fa fa-check"></i>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Bearbeitung der Teilnehmerliste
                                </td>
                                <td>
                                    <i class="fa fa-times"></i>
                                </td>
                                <td>
                                    <i class="fa fa-check"></i>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Push Notifications
                                </td>
                                <td>
                                    <i class="fa fa-times"></i>
                                </td>
                                <td>
                                    <i class="fa fa-check"></i>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Maximale Teilnehmer
                                </td>
                                <td>
                                    <span class="label label-primary">10</span>
                                </td>
                                <td>
                                    <span class="label label-premium">25 / 50 / 100</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-xs-12">
        <div class="panel">
            <div class="panel-body">
                <span class="primary-color"><i class="fa fa-info-circle"></i></span> Premium Funktionen sind farblich und mit Stern gekennzeichnet.
            </div>
        </div>
    </div>
</div>