<div class="col-md-10 lo-main-pane ng-scope">
    <div class="row">
        <div class="lo-content-area col-md-12">
            <div ups-breadcrumb/>

            <div class="lo-page-info">
                <p ng-show="application.description.length"><em>&ldquo;{{ application.description }}&rdquo;</em></p>
                <div style="clear: both;"></div>
            </div>

            <div class="ups-tip-panel">
                <div class="ups-tip-panel-illustration ups-sending-notifications"></div>
                <div class="ups-tip-panel-body">
                    <h2>Sending push notifications
                        <div class="pull-right dropdown">
                            <a href="#/example/{{application.pushApplicationID}}/send" class="ups-tip-panel-link">Example implementation</a>

                            <a data-toggle="dropdown" class="dropdown-toggle" href="#"><i class="fa fa-cog"></i> <i class="fa fa-caret-down"></i></a>
                            <ul class="dropdown-menu">
                                <li><a role="menuitem" ng-click="renewMasterSecret()">Renew Master Secret...</a></li>
                            </ul>
                        </div>
                    </h2>
                    <table class="ups-tip-panel-details">
                        <tr>
                            <td>Server URL:</td>
                            <td>
                              <input type="text" class="transparent" readonly value="{{ currentLocation }}">
                            </td>
                        </tr>
                        <tr>
                            <td>Application ID:</td>
                            <td>
                              <input type="text" class="transparent" readonly value="{{ application.pushApplicationID }}">
                            </td>
                        </tr>
                        <tr>
                            <td>Master Secret:</td>
                            <td>
                              <input type="text" class="transparent" readonly value="{{ application.masterSecret }}">
                            </td>
                        </tr>
                    </table>
                </div>
                <div style="clear: both;"></div>
            </div>

            <h2>Variants</h2>

            <div class="lo-page-info">
                <p>
                    You have <ups-pluralize noun="variant" count="application.variants.length"></ups-pluralize>.
                </p>
                <div class="pull-right">
                    <button class="btn btn-primary btn-lg" type="button" ng-click="addVariant()">Add Variant</button>
                </div>

                <div style="clear: both;"></div>
            </div>

            <div ng-class="{'panel lo-panel ups-panel-variants': true, 'new-line': application.variants[$index + 1].type == variant.type}" ng-repeat="variant in application.variants">
              <div class="ups-panel-variants {{variant.type}}" ng-if="application.variants[$index - 1].type != variant.type">
                <div class="panel-heading">
                  <div class="pull-left">
                    <h2 style="text-transform: capitalize" ng-if="variant.type != 'ios'">{{variant.type}}</h2>
                    <h2 ng-if="variant.type == 'ios'">iOS</h2>
                  </div>
                  <div class="pull-right">
                    <ups-pluralize noun="installation" count="counts[variant.type]" ></ups-pluralize>
                  </div>
                  <div class="clearfix"></div>
                </div>

              </div>

              <variant variant="variant" counts="counts" on-renew="renewVariantSecret(variant)"></variant>
              <div ng-class="{bottom: application.variants[$index + 1].type != variant.type}"></div>
            </div>
        </div>
    </div>
  <div style="clearfix"></div>
</div>
