<div root-access>
    <div ng:show="isAnythingUpgradeable()">
        <h3 translate>Updates</h3>

        <a ng:click="upgradeEverything()" class="btn btn-primary btn-lg btn-block">
            <i class="fa fa-arrow-up"></i> <span translate>Update everything</span>
        </a>
    </div>

    <h3 translate>Core</h3>

    <div ng:show="!coreUpgradeAvailable">
        <div class="alert alert-info">
            <i class="fa fa-info-circle"></i> <span translate>Ajenti Core version {{ajentiVersion}}, no upgrades available.</span>
        </div>
    </div>

    <div ng:show="coreUpgradeAvailable">
        <div class="alert alert-warning">
            <i class="fa fa-warning"></i> <span translate>Ajenti core {{ajentiVersion}}. An upgrade to {{coreUpgradeAvailable}} is available.</span>
        </div>
    </div>

    <h3 translate>Installed plugins</h3>

    <progress-spinner ng:show="installedPlugins == null"></progress-spinner>

    <div class="list-group">
        <div class="list-group-item list-group-item-small" ng:repeat="plugin in installedPlugins|orderBy:'title'">
            <a ng:click="uninstallPlugin(plugin)" class="list-group-btn" title="{{'Uninstall'|translate}}" ng:show="isUninstallable(plugin)">
                <i class="fa fa-trash-o"></i>
            </a>
            <a ng:click="$parent.selectedInstalledPlugin = plugin" class="list-group-main">
                <i class="fa fa-fw fa-{{plugin.icon}}" ng:show="plugin.icon.indexOf(' ') < 0"></i>
                <i class="fa-fw {{plugin.icon}}" ng:show="plugin.icon.indexOf(' ') > 0"></i>

                {{plugin.title}}
                &nbsp;
                <span class="subtle">{{plugin.name}} {{plugin.version}}</span>
                &nbsp;
                <span class="label label-info" ng:show="getUpgrade(plugin)" translate>Upgradeable to {{getUpgrade(plugin).version}}</span>

                <span class="label label-danger" ng:show="plugin.crash">
                    <i class="fa fa-warning"></i> <span translate>Loading error</span>
                </span>
            </a>
        </div>
    </div>

    <h3 translate>Available plugins</h3>

    <progress-spinner ng:show="repoList == null"></progress-spinner>

    <div ng:show="repoList != null">
        <uib-tabset class="no-padding">
            <uib-tab heading="{{'Official'|translate}}">
                <div class="list-group">
                    <div class="list-group-item list-group-item-small" ng:repeat="plugin in repoListOfficial|orderBy:'title'">
                        <a ng:click="installPlugin(plugin)" class="list-group-btn" title="{{'Install'|translate}}" ng:show="!isInstalled(plugin)">
                            <i class="fa fa-download"></i>
                        </a>
                        <a ng:click="selectRepoPlugin(plugin)" class="list-group-main">
                            <span class="label label-info pull-right" ng:show="isInstalled(plugin)">
                                <i class="fa fa-check"></i> Installed
                            </span>
                            {{plugin.title}}
                            &nbsp;
                            <span class="subtle">{{plugin.name}} {{plugin.version}}</span>
                        </a>
                    </div>
                </div>
            </uib-tab>
            <uib-tab heading="{{'Community'|translate}}" ng:if="repoListCommunity.length > 0">
                <input ng:model="filter" type="search" placeholder="{{'Filter'|translate}}" class="form-control" />
                <div class="list-group">
                    <div class="list-group-item list-group-item-small" ng:repeat="plugin in repoListCommunity|filter:filter|orderBy:'title'">
                        <a ng:click="installPlugin(plugin)" class="list-group-btn" title="{{'Install'|translate}}" ng:show="!isInstalled(plugin)">
                            <i class="fa fa-download"></i>
                        </a>
                        <a ng:click="selectRepoPlugin(plugin)" class="list-group-main">
                            <span class="label label-info pull-right" ng:show="isInstalled(plugin)">
                                <i class="fa fa-check"></i> Installed
                            </span>
                            {{plugin.title}}
                            &nbsp;
                            <span class="subtle">{{plugin.name}} {{plugin.version}}</span>
                        </a>
                    </div>
                </div>
            </uib-tab>
        </uib-tabset>
    </div>

    <dialog ng:show="selectedInstalledPlugin">
        <div class="modal-header">
            <h4><i class="fa fa-{{selectedInstalledPlugin.icon}}"></i> {{selectedInstalledPlugin.title}}</h4>
        </div>
        <div class="modal-body scrollable">
            <div class="form-group">
                <label translate>Name</label>
                <div>
                    {{selectedInstalledPlugin.name}}
                </div>
            </div>
            <div class="form-group" ng:show="selectedInstalledPlugin.crash">
                <label translate>Error</label>
                <div class="alert alert-warning" ng:show="selectedInstalledPlugin.crash.type == 'PluginDependency.Unsatisfied'" translate>
                    This plugin requires plugin <code>{{selectedInstalledPlugin.crash.pluginName}}</code>, which was unavailable during startup.
                </div>
                <div class="alert alert-warning" ng:show="selectedInstalledPlugin.crash.type == 'BinaryDependency.Unsatisfied'" translate>
                    This plugin requires application binary <code>{{selectedInstalledPlugin.crash.binaryName}}</code>, which was unavailable during startup.
                </div>
                <div class="alert alert-danger">
                    <div>
                        <b translate>This plugin crashed with the following error:</b>
                    </div>
                    <div translate>
                        Exception: <code>{{selectedInstalledPlugin.crash.cls}}</code>
                    </div>
                    <div translate>
                        Message: <code>{{selectedInstalledPlugin.crash.message}}</code>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label translate>Version</label>
                <div>
                    {{selectedInstalledPlugin.version}}
                </div>
            </div>
            <div class="form-group">
                <label translate>Location</label>
                <div>
                    {{selectedInstalledPlugin.path}}
                </div>
            </div>
            <div class="form-group">
                <label translate>Author</label>
                <div>
                    {{selectedInstalledPlugin.author}}
                    <div ng:show="selectedInstalledPlugin.author_email">
                        <span class="subtle">{{selectedInstalledPlugin.author_email}}</span>
                    </div>
                    <div ng:show="selectedInstalledPlugin.url">
                        <a href="{{selectedInstalledPlugin.url}}" target="_blank" translate>Homepage</a> <i class="fa fa-external-link-square"></i>
                    </div>
                    <div ng:show="selectedInstalledPlugin.documentation">
                        <a href="{{selectedInstalledPlugin.documentation}}" target="_blank" translate>Documentation</a> <i class="fa fa-external-link-square"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <a ng:click="installPlugin(selectedInstalledPlugin)" class="btn btn-default btn-flat" ng:show="getUpgrade(selectedInstalledPlugin)" translate>
                Update
            </a>
            <a ng:click="uninstallPlugin(selectedInstalledPlugin)" class="btn btn-default btn-flat" ng:show="pypiList && pypiList[selectedInstalledPlugin.name] && selectedInstalledPlugin.name != 'core'" translate>
                Uninstall
            </a>
            <a ng:click="$parent.selectedInstalledPlugin = null" class="btn btn-default btn-flat" translate>
                Close
            </a>
        </div>
    </dialog>

    <dialog ng:show="selectedRepoPlugin">
        <div class="modal-header">
            <h4>{{selectedRepoPlugin.title}}</h4>
        </div>
        <div class="modal-body scrollable">
            <div class="form-group">
                <label translate>Name</label>
                <div>
                    {{selectedRepoPlugin.name}}
                </div>
            </div>
            <div class="form-group">
                <label translate>Version</label>
                <div>
                    {{selectedRepoPlugin.version}}
                </div>
            </div>
            <div class="form-group">
                <label>PyPI ID</label>
                <div>
                    {{selectedRepoPlugin.pypi_name}}
                </div>
            </div>
            <div class="form-group">
                <label translate>Downloads in the last month</label>
                <div>
                    {{selectedRepoPlugin.last_month_downloads}}
                </div>
            </div>
            <div class="form-group">
                <label translate>Author</label>
                <div>
                    {{selectedRepoPlugin.author}}
                    <div ng:show="selectedRepoPlugin.author_email">
                        <span class="subtle">{{selectedRepoPlugin.author_email}}</span>
                    </div>
                    <div ng:show="selectedRepoPlugin.url">
                        <a href="{{selectedRepoPlugin.url}}" target="_blank">Homepage</a> <i class="fa fa-external-link-square"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <a ng:click="installPlugin(selectedRepoPlugin)" class="btn btn-default btn-flat" translate>
                Install
            </a>
            <a ng:click="$parent.selectedRepoPlugin = null" class="btn btn-default btn-flat" translate>
                Close
            </a>
        </div>
    </dialog>

    <div class="floating-toolbar-padder"></div>

    <floating-toolbar>
        <a ng:click="restart()" class="btn btn-default btn-flat" translate>Restart panel</a>
    </floating-toolbar>
</div>
