<!-- Modal configure/repair app -->
<div class="modal fade" id="appConfigureModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" ng-show="(appConfigure.app | installError)">Repair {{ appConfigure.app.fqdn }}</h4>
                <h4 class="modal-title" ng-hide="(appConfigure.app | installError)">Configure {{ appConfigure.app.fqdn }}</h4>
            </div>
            <div class="modal-body">
                <fieldset>
                    <form role="form" name="appConfigureForm" ng-submit="appConfigure.submit()" autocomplete="off">
                        <div class="has-error text-center" ng-show="appConfigure.error.other">{{ appConfigure.error.other }}</div>
                        <div class="form-group" ng-class="{ 'has-error': (appConfigureForm.location.$dirty && appConfigureForm.location.$invalid) || (!appConfigureForm.location.$dirty && appConfigure.error.location)  }">
                            <label class="control-label" for="appConfigureLocationInput">Location {{ appConfigure.error.location }} </label>
                            <div class="input-group form-inline">
                                <input type="text" class="form-control" ng-model="appConfigure.location" id="appConfigureLocationInput" name="location" placeholder="{{ appConfigure.usingAltDomain ? 'other.domain.com' : 'Leave empty to use bare domain' }}" autofocus>

                                <div class="input-group-btn">
                                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                        {{ appConfigure.usingAltDomain ? 'External Domain' : ((!appConfigure.location ? '' : (appConfigure.domain.provider !== 'caas' ? '.' : '-')) + appConfigure.domain.domain) }}
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                        <li ng-repeat="domain in domains">
                                            <a href="" ng-click="useAltDomain(false, domain)">{{ domain.domain }}</a>
                                        </li>
                                        <li>
                                            <a href="" ng-click="useAltDomain(true)"><i class="fa fa-star"></i> External Domain</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <p class="text-center" ng-show="appConfigure.usingAltDomain && appConfigure.location && appConfigure.isAltDomainSubdomain()">
                            Add a CNAME record for <b>{{ appConfigure.location }}</b> to <b>{{ appConfigure.app.cnameTarget || appConfigure.app.fqdn }}</b>
                            <br>
                        </p>

                        <p class="text-center" ng-show="appConfigure.usingAltDomain && appConfigure.location && appConfigure.isAltDomainNaked()">
                            Add an A record for <b>{{ appConfigure.location }}</b> to this Cloudron's public IP</b>
                            <br>
                        </p>

                        <p class="text-center" ng-show="!appConfigure.usingAltDomain && appConfigure.location && dnsConfig.provider === 'manual' && !dnsConfig.wildcard">
                            <b>Do not forget to add an A record for {{ appConfigure.location }}.{{ config.fqdn }}</b>
                            <br>
                        </p>

                        <div class="has-error text-center" ng-show="appConfigure.error.port">{{ appConfigure.error.port }}</div>
                        <div ng-repeat="(env, info) in appConfigure.portBindingsInfo">
                            <ng-form name="portInfo_form">
                                <div class="form-group" ng-class="{ 'has-error': (!appConfigureForm.itemName{{$index}}.$dirty && appConfigure.error.port) || (portInfo_form.itemName{{$index}}.$dirty && portInfo_form.itemName{{$index}}.$invalid) }">
                                    <label class="control-label" for="appConfigurePortInput{{env}}"><input type="checkbox" ng-model="appConfigure.portBindingsEnabled[env]"> {{ info.description }} ({{ HOST_PORT_MIN }} - {{ HOST_PORT_MAX }})</label>
                                    <input type="number" class="form-control" ng-model="appConfigure.portBindings[env]" ng-disabled="!appConfigure.portBindingsEnabled[env]" id="appConfigurePortInput{{env}}" later-name="itemName{{$index}}" min="{{HOST_PORT_MIN}}" max="{{HOST_PORT_MAX}}" required>
                                </div>
                            </ng-form>
                        </div>

                        <div class="form-group" ng-show="appConfigure.customAuth && !appConfigure.app.manifest.addons.email">
                            <label class="control-label">User management</label>
                            <p>
                                This app has it's own user management.
                            </p>
                        </div>

                        <div class="form-group" ng-show="!appConfigure.customAuth && appConfigure.app.sso === false">
                            <label class="control-label">User management</label>
                            <p>
                                This app is configured to use it's own user management.
                            </p>
                        </div>

                        <div class="form-group" ng-show="appConfigure.app.manifest.addons.email">
                            <label class="control-label">User management</label>
                            <p>
                                All users of this Cloudron have access.
                            </p>
                        </div>

                        <div class="form-group" ng-hide="appConfigure.customAuth || appConfigure.app.manifest.addons.email || appConfigure.app.sso === false">
                            <label class="control-label">User management</label>
                            <div class="radio">
                                <label>
                                    <input type="radio" ng-model="appConfigure.accessRestrictionOption" value="any">
                                    Allow all users from this Cloudron
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" ng-model="appConfigure.accessRestrictionOption" value="groups">
                                    Only allow the following users and groups <span class="label label-danger" ng-show="appConfigure.accessRestrictionOption === 'groups' && !appConfigure.isAccessRestrictionValid()">Select at least one user or group</span>
                                </label>
                            </div>
                            <div>
                                <div style="margin-left: 20px;">
                                    <div class="col-md-5">
                                        Users:
                                        <multiselect class="input-sm stretch" ng-model="appConfigure.accessRestriction.users" ng-disabled="appConfigure.accessRestrictionOption !== 'groups'" options="user.username for user in users" data-multiple="true"></multiselect>
                                    </div>

                                    <div class="col-md-5">
                                        Groups:
                                        <multiselect class="input-sm stretch" ng-model="appConfigure.accessRestriction.groups" ng-disabled="appConfigure.accessRestrictionOption !== 'groups'" options="group.name for group in (groups | ignoreAdminGroup)" data-multiple="true"></multiselect>
                                    </div>
                                </div>
                            </div>

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

                        <p ng-show="!mailConfig.enabled && appConfigure.app.manifest.addons.email" class="text-danger">
                            This app requires <a href="#/settings">Cloudron Email</a> to be enabled.
                        </p>

                        <a href="" ng-click="appConfigure.advancedVisible = true" ng-hide="appConfigure.advancedVisible">Advanced settings...</a>
                        <div  uib-collapse="!appConfigure.advancedVisible">
                            <div class="form-group">
                                <label class="control-label" for="memoryLimit">Memory Limit <sup><a ng-href="{{ config.webServerOrigin }}/documentation/apps/#increasing-the-memory-limit-of-an-app" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup> : <b>{{ appConfigure.memoryLimit ? appConfigure.memoryLimit / 1024 / 1024 + 'MB' : 'Default (256 MB)' }}</b></label>
                                <br/>
                                <div style="padding: 0 10px;">
                                    <slider id="memoryLimit" ng-model="appConfigure.memoryLimit" step="134217728" tooltip="hide" ticks="appConfigure.memoryTicks" ticks-snap-bounds="67108864"></slider>
                                </div>
                            </div>

                            <div class="form-group" ng-class="{ 'has-error': !appConfigureForm.xFrameOptions.$dirty && appConfigure.error.xFrameOptions }">
                                <label class="control-label">Allow embedding from the following site</label>
                                <div class="control-label" ng-show="appConfigure.error.xFrameOptions"><small>Must be empty of a valid URL</small></div>
                                <input type="text" class="form-control" id="appConfigureXFrameOptionsInput" name="xFrameOptions" placeholder="https://example.com" ng-model="appConfigure.xFrameOptions" uib-tooltip="Leave blank to not allow embedding">
                            </div>

                            <div class="form-group">
                                <label class="control-label">Specify robots.txt file content</label>
                                <textarea ng-model="appConfigure.robotsTxt" placeholder="Leave empty to allow all bots to index this app." class="form-control" rows="3"></textarea>
                            </div>

                            <div class="form-group">
                                <input type="checkbox" id="appConfigureEnableBackup" ng-model="appConfigure.enableBackup">
                                <label class="control-label" for="appConfigureEnableBackup">Enable automatic daily backups</label>
                            </div>

                            <div class="hide">
                                <label class="control-label" for="appConfigureCertificateInput" ng-show="appConfigure.domain.provider !== 'caas'">Certificate (optional)</label>
                                <div class="has-error text-center" ng-show="appConfigure.error.cert && appConfigure.domain.provider !== 'caas'">{{ appConfigure.error.cert }}</div>
                                <div class="form-group" ng-class="{ 'has-error': !appConfigureForm.certificate.$dirty && appConfigure.error.cert }" ng-show="appConfigure.domain.provider !== 'caas'">
                                    <div class="input-group">
                                        <input type="file" id="appConfigureCertificateFileInput" style="display:none"/>
                                        <input type="text" class="form-control" placeholder="Certificate" ng-model="appConfigure.certificateFileName" id="appConfigureCertificateInput" name="certificate" onclick="getElementById('appConfigureCertificateFileInput').click();" style="cursor: pointer;" ng-required="appConfigure.keyFileName">
                                        <span class="input-group-addon">
                                            <i class="fa fa-upload" onclick="getElementById('appConfigureCertificateFileInput').click();"></i>
                                        </span>
                                    </div>
                                </div>
                                <div class="form-group" ng-class="{ 'has-error': !appConfigureForm.key.$dirty && appConfigure.error.cert }" ng-show="appConfigure.domain.provider !== 'caas'">
                                    <div class="input-group">
                                        <input type="file" id="appConfigureKeyFileInput" style="display:none"/>
                                        <input type="text" class="form-control" placeholder="Key" ng-model="appConfigure.keyFileName" id="appConfigureKeyInput" name="key" onclick="getElementById('appConfigureKeyFileInput').click();" style="cursor: pointer;" ng-required="appConfigure.certificateFileName">
                                        <span class="input-group-addon">
                                            <i class="fa fa-upload" onclick="getElementById('appConfigureKeyFileInput').click();"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <input class="ng-hide" type="submit" ng-disabled="appConfigureForm.$invalid || appConfigure.busy || (appConfigure.accessRestrictionOption === 'groups' && !appConfigure.isAccessRestrictionValid()) || (appConfigure.usingAltDomain && !appConfigure.isAltDomainValid())"/>
                    </form>
                </fieldset>
            </div>
            <div class="modal-footer ">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success" ng-click="appConfigure.submit()" ng-disabled="appConfigureForm.$invalid || appConfigure.busy || (appConfigure.accessRestrictionOption === 'groups' && !appConfigure.isAccessRestrictionValid()) || (appConfigure.usingAltDomain && !appConfigure.isAltDomainValid())"><i class="fa fa-circle-o-notch fa-spin" ng-show="appConfigure.busy"></i> Save</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal restore app -->
<div class="modal fade" id="appRestoreModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Restore {{ appRestore.app.fqdn }}</h4>
            </div>
            <div class="modal-body" ng-show="appRestore.busyFetching">
                <h4 class="text-center"><i class="fa fa-circle-o-notch fa-spin"></i> Fetching backups</h4>
            </div>
            <div class="modal-body" ng-show="appRestore.backups.length === 0 && !appRestore.busyFetching">
                <h4 class="text-danger">This app has no backups.</h4>
            </div>
            <div class="modal-body" ng-show="appRestore.backups.length !== 0">
                <p>Restoring the app will lose all content generated since the backup.</p>
                <label class="control-label">Select backup</label>
                <div class="dropdown">
                    <button type="button" class="btn btn-block btn-default" data-toggle="dropdown">{{ appRestore.selectedBackup.creationTime | prettyDate }} - v{{appRestore.selectedBackup.version}}  <span class="caret"></span></button>
                    <ul class="dropdown-menu" role="menu">
                        <li ng-repeat="backup in appRestore.backups | orderBy:'-creationTime'">
                            <a href="" ng-click="appRestore.selectBackup(backup)">{{backup.creationTime}} {{ backup.creationTime | prettyDate }} - v{{backup.version}}</a>
                        </li>
                    </ul>
                </div>
                <br/>
                <fieldset>
                    <form role="form" name="appRestoreForm" ng-submit="appRestore.submit()" autocomplete="off">
                        <div class="form-group" ng-class="{ 'has-error': (appRestoreForm.password.$dirty && appRestoreForm.password.$invalid) || (!appRestoreForm.password.$dirty && appRestore.error.password) }">
                            <label class="control-label" for="appRestorePasswordInput">Provide your password to confirm this action</label>
                            <div class="control-label" ng-show="(appRestoreForm.password.$dirty && appRestoreForm.password.$invalid) || (!appRestoreForm.password.$dirty && appRestore.error.password)">
                                <small ng-show=" appRestoreForm.password.$dirty && appRestoreForm.password.$invalid">Password required</small>
                                <small ng-show="!appRestoreForm.password.$dirty && appRestore.error.password">Wrong password</small>
                            </div>
                            <input type="password" class="form-control" ng-model="appRestore.password" id="appRestorePasswordInput" name="password" required autofocus>
                        </div>

                        <input class="ng-hide" type="submit" ng-disabled="appRestoreForm.$invalid || busy"/>
                    </form>
                </fieldset>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success" ng-click="appRestore.submit()" ng-show="appRestore.backups.length !== 0" ng-disabled="appRestoreForm.$invalid || appRestore.busy || !appRestore.selectedBackup"><i class="fa fa-circle-o-notch fa-spin" ng-show="appRestore.busy"></i> Restore</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal information of app -->
<div class="modal fade" id="appInfoModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <img ng-src="{{appInfo.app.iconUrl}}" onerror="this.onerror=null;this.src='img/appicon_fallback.png'" class="app-info-icon"/>
                <h5 class="app-info-title">
                    {{ appInfo.app.manifest.title }}
                    <span class="app-info-meta text-small">Package <a ng-href="/#/appstore/{{appInfo.app.manifest.id}}?version={{appInfo.app.manifest.version}}">v{{ appInfo.app.manifest.version }}</a> </span>
                </h5>
                <br/>
                <span class="app-info-meta" ng-show="appInfo.app.manifest.documentationUrl"><a target="_blank" ng-href="{{appInfo.app.manifest.documentationUrl}}">Documentation</a> </span>
                <br/>
                <span class="app-info-meta">Last updated {{ appInfo.app.updateTime | prettyDate }}</span>
            </div>
            <div class="modal-body">
                <div class="app-postinstall-message" ng-hide="appInfo.app.manifest && appInfo.app.manifest.postInstallMessage">
                    This package has no special usage information.
                </div>
                <div class="app-postinstall-message" ng-show="appInfo.app.manifest && appInfo.app.manifest.postInstallMessage">
                    <div ng-bind-html="appInfo.message | postInstallMessage:appInfo.app | markdown2html"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" autofocus>Got it</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal error app -->
<div class="modal fade" id="appErrorModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Error for {{ appError.app.fqdn }}</h4>
            </div>
            <div class="modal-body">
                <p>{{ appError.app.message | prettyAppMessage }}</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left" ng-click="appConfigure.show(appError.app)" autofocus>Repair</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal uninstall app -->
<div class="modal fade" id="appUninstallModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Really uninstall {{ appUninstall.app.fqdn }} ?</h4>
            </div>
            <div class="modal-body">
                <p>Deleting the app will also remove all content generated within this app!</p>
                <fieldset>
                    <form role="form" name="appUninstallForm" ng-submit="doUninstall()" autocomplete="off">
                        <div class="form-group" ng-class="{ 'has-error': (appUninstallForm.password.$dirty && appUninstallForm.password.$invalid) || (!appUninstallForm.password.$dirty && appUninstall.error.password) }">
                            <label class="control-label" for="appUninstallPasswordInput">Provide your password to confirm this action</label>
                            <div class="control-label" ng-show="(appUninstallForm.password.$dirty && appUninstallForm.password.$invalid) || (!appUninstallForm.password.$dirty && appUninstall.error.password)">
                                <small ng-show=" appUninstallForm.password.$dirty && appUninstallForm.password.$invalid">Password required</small>
                                <small ng-show="!appUninstallForm.password.$dirty && appUninstall.error.password">Wrong password</small>
                            </div>
                            <input type="password" class="form-control" ng-model="appUninstall.password" id="appUninstallPasswordInput" name="password" required autofocus>
                        </div>

                        <input class="ng-hide" type="submit" ng-disabled="appUninstallForm.$invalid || busy"/>
                    </form>
                </fieldset>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" ng-click="doUninstall()" ng-disabled="appUninstallForm.$invalid || appUninstall.busy"><i class="fa fa-circle-o-notch fa-spin" ng-show="appUninstall.busy"></i> Uninstall</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal update app -->
<div class="modal fade" id="appUpdateModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Update {{ appUpdate.app.fqdn }}</h4>
            </div>
            <div class="modal-body">
                <p>Recent Changes for new version <b>{{ appUpdate.manifest.version}}</b>:</p>
                <div ng-bind-html="appUpdate.manifest.changelog | markdown2html"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" ng-click="doUpdate()" ng-disabled="appUpdate.busy"><i class="fa fa-circle-o-notch fa-spin" ng-show="appUpdate.busy"></i> Update</button>
            </div>
        </div>
    </div>
</div>

<script>
    function imageErrorHandler(elem) {
        'use strict';

        var appstoreIconUrl = elem.getAttribute('appstore-icon');
        var fallbackIconUrl = elem.getAttribute('fallback-icon');

        if (elem.src === appstoreIconUrl) {
            elem.src = fallbackIconUrl;
            elem.onerror = null;    // avoid retry after default icon cannot be loaded
        } else {
            elem.src = appstoreIconUrl;
        }
    }
</script>

<div class="content content-large">

    <!-- Workaround for select-all issue, see commit message -->
    <div style="font-size: 1px;">&nbsp;</div>

    <div class="animateMeOpacity ng-hide" ng-show="installedApps.length === 0 && user.admin">
        <div class="col-md-12" style="text-align: center;">
            <br/><br/><br/><br/>
            <h1><i class="fa fa-cloud-download fa-fw"></i> No apps installed yet!</h1>
            <br/></br>
            <h3>How about installing some? Check out the <a href="#/appstore">App Store</a></h3>
        </div>
    </div>

    <div class="animateMeOpacity ng-hide" ng-show="installedApps.length === 0 && !user.admin">
        <div class="col-md-12" style="text-align: center;">
            <br/><br/><br/><br/>
            <h1>You don't have access to any apps on this Cloudron yet!</h1>
            <br/></br>
            <h3>Once you do, they will show up here.</h3>
        </div>
    </div>

    <div class="animateMeOpacity ng-hide" ng-show="installedApps.length > 0">
        <div class="col-md-12">
            <h1>Your Apps</h1>
        </div>
    </div>

    <div class="animateMeOpacity ng-hide" ng-show="installedApps.length > 0">
        <div class="col-sm-1 grid-item" ng-repeat="app in installedApps | orderBy:'location'">
            <div style="background-color: white;" class="highlight grid-item-content" uib-tooltip="{{ app.message | shortAppMessage }}">
                <a ng-href="{{ app | applicationLink }}" ng-click="(app | installError) === true && showError(app)" target="_blank" ng-class="{ 'hand': !(app | installationActive) }">
                    <div class="grid-item-top">
                        <div class="row">
                            <div class="col-xs-12 text-center" style="padding-left: 5px; padding-right: 5px;">
                              <div class="text-small text-muted" ng-show="domains.length > 1">{{ app.domain }}</div><br/>
                              <img ng-src="{{app.iconUrl || 'img/appicon_fallback.png'}}" fallback-icon="img/appicon_fallback.png" appstore-icon="{{ app.iconUrlStore }}" onerror="imageErrorHandler(this)" class="app-icon"/>
                            </div>
                        </div>
                        <br/>
                        <div class="row">
                            <div class="col-xs-12 text-center">
                                <div class="grid-item-top-title" data-fittext>{{ app.altDomain || app.location || app.fqdn }}</div>
                                <div class="text-muted status" style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden">
                                  {{ app | installationStateLabel }}
                                </div>
                                <div class="status" ng-style="{ 'visibility': (app | installationActive) ? 'visible' : 'hidden' }">
                                  <div class="progress progress-striped active">
                                    <div class="progress-bar progress-bar-success" role="progressbar" style="width: {{ app.progress }}%"></div>
                                  </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="grid-item-bottom-mobile" ng-show="user.admin">
                        <div class="row">
                            <div class="col-xs-4 text-left">
                                <a href="" ng-click="appRestore.show(app)" ng-show="backupConfig.provider !== 'noop'">
                                    <i class="fa fa-undo scale"></i>
                                </a>

                                <a href="" ng-click="appConfigure.show(app)" ng-show="app.installationState === 'installed' || app.installationState === 'pending_configure' || (app | installError)">
                                    <i ng-hide="(app | installError)" class="fa fa-pencil scale"></i>
                                    <i ng-show="(app | installError)" class="fa fa-wrench scale"></i>
                                </a>
                            </div>
                            <div class="col-xs-4 text-center"></div>
                            <div class="col-xs-4 text-right">
                                <a href="" ng-click="showUninstall(app)">
                                    <i class="fa fa-remove scale"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="grid-item-bottom" ng-show="user.admin">
                        <div>
                            <a href="" ng-click="showUninstall(app)" title="Uninstall App"><i class="fa fa-remove scale"></i></a>
                        </div>

                        <div>
                            <a href="" ng-click="appRestore.show(app)" ng-show="backupConfig.provider !== 'noop'" title="Restore App"><i class="fa fa-undo scale"></i></a>
                        </div>

                        <div ng-show="(app.installationState === 'installed' || app.installationState === 'pending_configure') && !(app | installError)">
                            <a href="" ng-click="appConfigure.show(app)" title="Configure App"><i class="fa fa-pencil scale"></i></a>
                        </div>

                        <div ng-show="app | installError">
                            <a href="" ng-click="appConfigure.show(app)" title="Repair App"><i class="fa fa-wrench scale"></i></a>
                        </div>

                        <div>
                            <a href="" ng-click="showLogs(app)" title="Logs"><i class="fa fa-file-text scale"></i></a>
                        </div>

                        <div>
                            <a href="" ng-click="showInformation(app)" title="Information"><i class="fa fa-info-circle scale"></i></a>
                        </div>
                    </div>

                    <!-- we check the version here because the box updater does not know when an app gets updated -->
                    <div class="app-update-badge" ng-show="config.update.apps[app.id].manifest.version && config.update.apps[app.id].manifest.version !== app.manifest.version && (app | installSuccess)">
                        <a href="" ng-click="showUpdate(app, config.update.apps[app.id].manifest)" title="Update Available">
                            <span class="fa-stack fa-lg scale-small">
                                <i class="fa fa-circle fa-stack-2x text-success"></i>
                                <i class="fa fa-refresh fa-stack-1x fa-inverse"></i>
                            </span>
                        </a>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>
