<ul class="list-group " style="margin-bottom: 0">
    <li class="list-group-item">
        <a class="clickable" ng-click="expand(variant)">
            <i class="fa" ng-class="{'fa-plus-square-o': isCollapsed(variant), 'fa-minus-square-o': !isCollapsed(variant)}"></i> {{ variant.name }}
        </a>
        <span>{{ variant.description }}</span>
        <div class="pull-left" style="margin-left: -20px">
          <a role="menuitem" ng-click="editVariant(variant, variant.type)" ng-show="variant.hasError" title="reason: {{ variant.error }}">
            <i class="fa fa-warning"></i>
          </a>
        </div>
        <div class="pull-right dropdown">
            <span>
                <span ng-show="!counts[variant.variantID]">No installations</span>
                <span ng-show="counts[variant.variantID]">
                    <strong>
                        <a href="#/{{applicationId}}/installations/{{variant.variantID}}" ng-click="currentVariant(variant)">
                            {{ counts[variant.variantID] }}
                        </a>
                    </strong>
                    <ng-pluralize count="counts[variant.variantID]" when="{ 'one' : 'installation', 'other': 'installations'}"></ng-pluralize>
                </span>
            </span>

            <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="editVariant(variant, variant.type)">Edit...</a></li>
                <li><a role="menuitem" href="#/activity/{{applicationId}}/{{variant.variantID}}">Activity</a></li>
                <li role="presentation" class="divider"></li>
                <li><a role="menuitem" ng-click="removeVariant(variant, variant.type)">Remove...</a></li>
            </ul>
        </div>
        <div class="ups-toggle-box" collapse="isCollapsed(variant)">
            <div class="ups-panel-details">
                <h3>Push Network Details</h3>
                <p ng-show="variant.type == 'ios'">Apple's Push Network (APNs) will be used.
                To learn more about APNs, visit our <a href="http://aerogear.org/docs/unifiedpush/aerogear-push-ios/">iOS</a>
                or <a href="http://aerogear.org/docs/guides/aerogear-cordova/AerogearCordovaPush/">Apache Cordova</a> guides for push.
                </p>
                <p ng-show="variant.type == 'android'">Google's Cloud Messaging Network (GCM) will be used.
                To learn more about GCM, visit our <a href="http://aerogear.org/docs/unifiedpush/aerogear-push-android/">Android</a>
                or <a href="http://aerogear.org/docs/guides/aerogear-cordova/AerogearCordovaPush/">Apache Cordova</a> guides for push.
                </p>
                <p ng-show="variant.type == 'chrome'">Google's Cloud Messaging Network (GCM) will be used.
                To learn more about Chrome Apps, visit our <a href="http://aerogear.org/docs/unifiedpush/aerogear-push-chrome/">Chrome Push guide</a>.
                </p>
                <p ng-show="variant.type == 'simplePush'">A Server implementing the <em>SimplePush</em> protocol will be used.
                More information can be found in <a href="https://wiki.mozilla.org/WebAPI/SimplePush/Protocol">SimplePush Protocol Draft</a>.
                The <a href="https://github.com/aerogear/aerogear-simplepush-quickstart">AeroGears' SimplePush Quickstart</a> also contains useful information.
                </p>
                <hr class="spacer-15" />
                <table ng-show="variant.projectNumber.length">
                    <tr><td>Project Number:</td><td>{{ variant.projectNumber }}</td></tr>
                    <tr><td>Google API Key:</td><td>{{ variant.googleKey }}</td></tr>
                </table>
                <table ng-show="variant.production != undefined">
                    <tr><td>Type:</td><td>{{ variant.production ? 'Production' : 'Development' }}</td></tr>
                </table>
                <table ng-show="variant.clientId.length">
                    <tr><td>Client Id:</td><td>{{ variant.clientId }}</td></tr>
                    <tr><td>Client Secret:</td><td>{{ variant.clientSecret }}</td></tr>
                    <tr><td>Refresh Token:</td><td>{{ variant.refreshToken }}</td></tr>
                </table>
            </div>
            <hr class="spacer-15" />
            <div class="ups-tip-panel">
                <div class="ups-tip-panel-illustration ups-registering-installations"></div>
                <div class="ups-tip-panel-body">
                    <h2>Registering installations
                        <div class="pull-right dropdown">
                            <a href="#/example/{{applicationId}}/{{variant.type}}/{{variant.variantID}}" 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="renewSecret()">Renew 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>Variant ID:</td><td>
                          <input type="text" class="transparent" readonly value="{{ variant.variantID }}">
                        </td></tr>
                        <tr><td>Secret: </td><td>
                          <input type="text" class="transparent" readonly value="{{ variant.secret }}">
                        </td></tr>
                    </table>
                </div>
                <div style="clearfix"></div>
            </div>
        </div>
    </li>
</ul>