{% extends "base.html" %}

{% block preTitle %}
  Admin: Plugins -
{% endblock %}

{% block bodyContent %}

<script>
  var plugins = {{ plugins | scriptjson | raw }};
</script>

<div ng-app="PluginManager" ng-controller="PluginTableController as table">
  <div ng-cloak class="ng-cloak">
    <button ng-if="table.hasUpgrades" ng-disabled="table.busy" class="btn btn-warning pull-right"
      ng-click="table.upgradeAll()">Upgrade All</button>
  </div>

  <h3>Plugin Manager</h3>

  <table class="table-bordered table-striped table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Description</th>
        <th>Type</th>
        <th>Latest</th>
        <th>Installed</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for plugin in plugins %}
      <tr ng-cloak class="ng-cloak" ng-controller="PluginController as plugin" ng-init='plugin.loadPlugin("{{ loop.key }}")'>
        <td>
          {% if plugin.url %}
          <a href="[[ plugin.url ]]" target="_blank" title="[[ plugin.id ]]">[[ plugin.name ]]</a>
          {% else %}
          <span title="[[ plugin.id ]]">[[ plugin.name ]]</span>
          {% endif %}
        </td>
        <td>
          [[ plugin.description ]]
          <span ng-if="plugin.installed" class="plugin_path">
            <br>[[ plugin.installedPath ]]
          </span>
        </td>
        <td>
          [[ plugin.type ]]
        </td>
        <td>
          [[ plugin.latestVersion ]]
        </td>
        <td>
          <span ng-show="plugin.idle">[[ plugin.installedVersion ]]</span>
          <span ng-hide="plugin.idle">
            <i class="fa fa-spinner fa-spin"></i>
          </span>
        </td>
        <td>
          <div ng-hide="plugin.idle">
            <span>Please wait...</span><br>
            <span>[[ plugin.status ]]</span>
          </div>
          <div ng-show="plugin.idle">

            <button ng-disabled="table.busy || !plugin.idle"
              ng-if="plugin.installed" class="btn btn-danger"
              ng-click="table.uninstall(plugin)">Uninstall</button>

            <button ng-disabled="table.busy || !plugin.idle"
              ng-if="plugin.installed && plugin.outdated"
              class="btn btn-warning"
              ng-click="table.upgrade(plugin)">Upgrade</button>

            <button ng-disabled="table.busy || !plugin.idle"
              ng-if="!plugin.installed" class="btn btn-primary"
              ng-click="table.install(plugin)">Install</button>

          </div>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

{% endblock %}
