<div ng-controller="Umbraco.Editors.Packages.InstalledController as vm">

    <!-- Package list-->
    <div class="umb-packages-view-wrapper" ng-if="vm.state == 'list'">

        <div ng-if="vm.installedPackages.length > 0">

            <div class="umb-packages-view-title"><localize key="packager_installedPackages">Installed packages</localize></div>

            <table class="table">
                <tbody>
                    <tr ng-repeat="installedPackage in vm.installedPackages track by installedPackage.name">
                        <td class="flex items-center">
                            <div class="umb-package-list__item-icon"> 
                                <umb-icon ng-if="!installedPackage.iconUrl" icon="icon-box" class="icon-box"></umb-icon>
                                <img ng-if="installedPackage.iconUrl" ng-src="{{installedPackage.iconUrl}}" />
                            </div>
                            <div class="umb-package-list__item-content">
                                <div class="umb-package-list__item-name">{{ installedPackage.name }}</div>
                                <div class="umb-package-list__item-description">Version: {{ installedPackage.version }}</div>
                                <div class="umb-package-list__item-description">
                                    <localize ng-if="installedPackage.hasMigrations && !installedPackage.hasPendingMigrations"
                                              key="packager_packageMigrationsNonePending">No pending migrations</localize>
                                </div>
                            </div>
                          <!-- TODO: Show migrations up to date if they are -->
                        </td>
                        <td style="text-align: right;">
                          <umb-button ng-show="installedPackage.hasPendingMigrations"
                                      type="button"
                                      button-style="warning"
                                      size="xxs"
                                      label-key="packager_packageMigrationsRun"
                                      action="vm.confirmMigrations(installedPackage)">
                          </umb-button>

                          <umb-button ng-show="installedPackage.packageView"
                                      type="button"
                                      button-style="info"
                                      size="xxs"
                                      label-key="packager_packageOptions"
                                      action="vm.packageOptions(installedPackage)">
                          </umb-button>

                        </td>
                    </tr>
                </tbody>
            </table>

        </div>

        <umb-empty-state
            ng-if="vm.installedPackages.length === 0"
            position="center">
            <h2><strong><localize key="packager_noPackages">No packages have been installed</localize>.</strong></h2>
            <p class="faded"><localize key="packager_noPackagesDescription">Browse through the available packages using the <strong>'Packages'</strong> icon in the top right of your screen</localize>.</p>
        </umb-empty-state>

    </div>

    <div ng-if="vm.state === 'runMigration'">

      <umb-editor-sub-header>
        <umb-editor-sub-header-content-left>
          <button type="button" class="umb-package-details__back-action" ng-click="vm.state = 'list'" prevent-default><span aria-hidden="true">&larr;</span> <localize key="general_back">Back</localize></button>
        </umb-editor-sub-header-content-left>
      </umb-editor-sub-header>

      <div class="flex items-center justify-center">

        <div class="umb-info-local-items">

          <form novalidate name="uninstallForm" class="w-100">
            <div class="umb-package-icon">
              <umb-icon ng-if="!vm.package.iconUrl" icon="icon-box" class="icon-box"></umb-icon>
              <img ng-if="vm.package.iconUrl" ng-src="{{vm.package.iconUrl}}" alt="" />
            </div>

            <div class="umb-package-info">
              <h4 class="umb-info-local-item"><strong>{{ vm.package.name }}</strong></h4>

              <div class="umb-info-local-item mt4 flex items-center flex-column" ng-if="vm.installState.status != 'success'">

                <umb-button class="mt3"
                            type="button"
                            disabled="vm.installState.state == 'running' || vm.installState.state == 'success'"
                            button-style="success"
                            size="m"
                            action="vm.runMigrations(vm.package)"
                            label-key="packager_packageMigrationsRun">
                </umb-button>
              </div>

              <div class="umb-info-local-item text-info" ng-if="vm.installState.state == 'success'">
                <p>{{vm.installState.status}}</p>
              </div>

              <div class="umb-info-local-item text-error" ng-if="vm.installState.state == 'error'">
                <p>{{vm.installState.status}}</p>
              </div>

            </div>
          </form>

        </div>

      </div>

    </div>

</div>
