<div ng-controller="Umbraco.Editors.Packages.RepoController as vm" class="clearfix">

  <umb-load-indicator ng-show="vm.loading"></umb-load-indicator>

  <!-- LIST -->
  <div class="umb-packages-view-wrapper" ng-if="vm.packageViewState === 'packageList'">

    <div class="umb-packages-section">
      <div class="umb-packages-search">
        <label for="package-query" class="sr-only">
          <localize key="packager_packageSearch">Search for packages</localize>
        </label>
        <input type="text"
               class="-full-width-input"
               name="query"
               id="package-query"
               localize="placeholder"
               placeholder="@packager_packageSearch"
               ng-model="vm.searchQuery"
               ng-on-input="vm.search()"
               no-dirty-check />
      </div>
    </div>

    <div class="umb-packages-section" ng-if="vm.searchQuery == ''">
      <div class="umb-packages-categories">
        <button type="button"
                class="umb-packages-category"
                ng-click="vm.selectCategory(category, vm.categories)"
                ng-repeat="category in vm.categories"
                ng-class="{'-active': category.active, '-first': $first, '-last': $last}">
          {{category.name}}
        </button>
      </div>
    </div>

    <div ng-show="vm.loading === false">

      <div ng-repeat="highlightedPackageCollection in vm.highlightedPackageCollections">
        <div class="umb-packages-section" ng-if="vm.searchQuery == '' && highlightedPackageCollection.packages.length > 0">
          <h4><strong>{{highlightedPackageCollection.title}}</strong></h4>
          <div class="umb-packages">

            <div class="umb-package" ng-repeat="package in highlightedPackageCollection.packages">
              <button type="button" class="umb-package-link" ng-click="vm.showPackageDetails(package)">

                <div class="flex flex-column">
                  <div class="umb-package-icon">
                    <img ng-src="{{package.icon}}" alt="" />
                  </div>

                  <div class="umb-package-info">
                    <div class="umb-package-name">{{package.name}}</div>
                    <div class="umb-package-description">{{package.excerpt | limitTo: 40}}<span ng-if="package.excerpt > (package.excerpt | limitTo: 40)">...</span></div>

                    <div class="umb-package-numbers">
                      <small class="umb-package-downloads">
                        <umb-icon icon="icon-download-alt"></umb-icon>
                        <strong>{{package.downloads}}</strong>
                      </small>
                      <small class="umb-package-likes">
                        <umb-icon icon="icon-hearts" class="icon-hearts"></umb-icon>
                        <strong>{{package.likes}}</strong>
                      </small>
                    </div>
                    <div class="umb-package-cloud">
                      <div ng-if="package.certifiedToWorkOnUmbracoCloud">
                        <umb-icon icon="icon-cloud" class="icon-cloud"></umb-icon>
                        <span><localize key="packager_verifiedToWorkOnUmbracoCloud">Verified to work on Umbraco Cloud</localize></span>
                      </div>
                    </div>

                  </div>
                </div>

              </button>
            </div> <!-- end package -->

          </div> <!-- end packages -->
        </div>
      </div>

      <div class="umb-packages-section" ng-if="vm.packages.length > 0">

        <h4 ng-if="vm.searchQuery === ''"><strong><localize key="packager_packagesNew">New Releases</localize></strong></h4>
        <h4 ng-if="vm.searchQuery !== ''"><strong><localize key="packager_packageSearchResults">Results for</localize> '{{ vm.searchQuery }}'</strong></h4>

        <div class="umb-packages">

          <div class="umb-package" ng-repeat="package in vm.packages">
            <button type="button" class="umb-package-link" ng-click="vm.showPackageDetails(package)">

              <div class="flex flex-column">
                <div class="umb-package-icon">
                  <img ng-src="{{package.icon}}" alt="" />
                </div>

                <div class="umb-package-info">
                  <div class="umb-package-name">{{ package.name }}</div>
                  <div class="umb-package-description">{{ package.excerpt | limitTo: 40 }}<span ng-if="package.excerpt > (package.excerpt | limitTo: 40)">...</span></div>

                  <div class="umb-package-numbers">
                    <small class="umb-package-downloads">
                      <umb-icon icon="icon-download-alt"></umb-icon>
                      <strong>{{package.downloads}}</strong>
                    </small>
                    <small class="umb-package-likes">
                      <umb-icon icon="icon-hearts" class="icon-hearts"></umb-icon>
                      <strong>{{package.likes}}</strong>
                    </small>
                  </div>
                  <div class="umb-package-cloud">
                    <div ng-if="package.certifiedToWorkOnUmbracoCloud">
                      <umb-icon icon="icon-cloud" class="icon-cloud"></umb-icon>
                      <span><localize key="packager_verifiedToWorkOnUmbracoCloud">Verified to work on Umbraco Cloud</localize></span>
                    </div>
                  </div>

                </div>
              </div>

            </button>
          </div> <!-- end package -->

        </div> <!-- end packages -->
      </div>

      <div class="umb-packages__pagination" ng-if="vm.pagination.totalPages > 1 && vm.loading === false">

        <umb-pagination page-number="vm.pagination.pageNumber"
                        total-pages="vm.pagination.totalPages"
                        on-next="vm.nextPage"
                        on-prev="vm.prevPage"
                        on-go-to-page="vm.goToPage">
        </umb-pagination>

      </div>

      <!-- Empty state -->
      <umb-empty-state ng-if="vm.packages.length === 0 && vm.loading === false && vm.searchQuery !== ''"
                       position="center">
        <h4><strong><localize key="packager_packageNoResults">We couldn't find anything for</localize> '{{ vm.searchQuery }}'</strong></h4>
        <p class="faded"><localize key="packager_packageNoResultsDescription">Please try searching for another package or browse through the categories</localize>.</p>
      </umb-empty-state>

      <umb-empty-state ng-if="vm.popular.length === 0 && vm.loading === false && vm.searchQuery === ''"
                       position="center">
        <h4><strong><localize key="general_searchNoResult">Sorry, we can not find what you are looking for.</localize></strong></h4>
        <p class="faded"><localize key="packager_packageNoResultsDescription">Please try searching for another package or browse through the categories</localize>.</p>
      </umb-empty-state>

    </div>

  </div>


  <!-- DETAILS -->
  <div ng-if="vm.packageViewState === 'packageDetails' && vm.loading === false">

    <umb-editor-sub-header>
      <umb-editor-sub-header-content-left>
        <button type="button" class="umb-package-details__back-action" ng-click="vm.setPackageViewState('packageList');" 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="umb-packages-view-wrapper">

      <div class="umb-package-details">

        <div class="umb-package-details__main-content">

          <umb-box>
            <umb-box-content>
              <h2 class="umb-packages-view-title">{{ vm.package.name }}</h2>
              <div class="umb-package-details__description" ng-bind-html="vm.package.description"></div>
              <div class="umb-gallery">
                <div class="umb-gallery__thumbnails">
                  <a ng-href="{{ image.source }}" type="button" class="umb-gallery__thumbnail" ng-repeat="image in vm.package.images" ng-click="vm.openLightbox($index, vm.package.images)" prevent-default>
                    <img ng-src="{{ image.thumbnail }}" alt="" />
                  </a>
                </div>
              </div>
            </umb-box-content>
          </umb-box>

          <umb-lightbox
            ng-if="vm.lightbox.show"
            items="vm.lightbox.items"
            active-item-index="vm.lightbox.activeIndex"
            on-close="vm.closeLightbox">
          </umb-lightbox>

        </div>

        <div class="umb-package-details__sidebar">

          <umb-box>
            <umb-box-content>
              <div class="umb-package-details__section-title"><localize key="packager_installInstructions">Install Instructions</localize></div>
              <div class="umb-package-details__install-instructions">
                dotnet add package <span>{{vm.package.nuGetPackageId}}</span>
              </div>
            </umb-box-content>
          </umb-box>

          <umb-box>
            <umb-box-content>
              <div class="umb-package-details__owner-profile">

                <div class="umb-package-details__owner-profile-avatar">
                  <umb-avatar
                    size="m"
                    img-src="{{ 'https://our.umbraco.com' + vm.package.ownerInfo.ownerAvatar }}">
                  </umb-avatar>
                </div>

                <div>
                  <div class="umb-package-details__owner-profile-name">{{ vm.package.ownerInfo.owner }}</div>
                  <div class="umb-package-details__owner-profile-karma">
                    {{ vm.package.ownerInfo.owner }} <localize key="packager_packageHas">has</localize> <strong>{{ vm.package.ownerInfo.karma }}</strong> <localize key="packager_packageKarmaPoints">karma points</localize>
                  </div>
                </div>
              </div>
            </umb-box-content>
          </umb-box>

          <umb-box>
            <umb-box-content>
              <div class="umb-package-details__section-title"><localize key="packager_packageInfo">Information</localize></div>
              <div>

                <div class="umb-package-details__information-item" ng-if="vm.package.ownerInfo.owner">
                  <div class="umb-package-details__information-item-label"><localize key="packager_packageOwner">Owner</localize>:</div>
                  <div class="umb-package-details__information-item-content">{{vm.package.ownerInfo.owner}}</div>
                </div>

                <div class="umb-package-details__information-item" ng-if="vm.package.ownerInfo.contributors">
                  <div class="umb-package-details__information-item-label"><localize key="packager_packageContrib">Contributors</localize>:</div>
                  <div class="umb-package-details__information-item-content">
                    <span ng-repeat="contributor in vm.package.ownerInfo.contributors">{{ contributor }}<span ng-if="!$last">,&nbsp;</span></span>
                  </div>
                </div>

                <div class="umb-package-details__information-item" ng-if="vm.package.created">
                  <div class="umb-package-details__information-item-label"><localize key="packager_packageCreated">Created</localize>:</div>
                  <div class="umb-package-details__information-item-content">{{vm.package.created | date:'yyyy-MM-dd HH:mm:ss'}}</div>
                </div>

                <div class="umb-package-details__information-item" ng-if="vm.package.latestVersion">
                  <div class="umb-package-details__information-item-label"><localize key="packager_packageCurrentVersion">Current version</localize>:</div>
                  <div class="umb-package-details__information-item-content">{{vm.package.latestVersion}}</div>
                </div>

                <div class="umb-package-details__information-item" ng-if="vm.package.information.netVersion">
                  <div class="umb-package-details__information-item-label"><localize key="packager_packageNetVersion">.NET Version</localize>:</div>
                  <div class="umb-package-details__information-item-content">{{vm.package.information.netVersion}}</div>
                </div>

                <div class="umb-package-details__information-item" ng-if="vm.package.licenseName">
                  <div class="umb-package-details__information-item-label"><localize key="packager_packageLicense">License</localize>:</div>
                  <div class="umb-package-details__information-item-content">{{vm.package.licenseName}}</div>
                </div>

                <div class="umb-package-details__information-item" ng-if="vm.package.downloads">
                  <div class="umb-package-details__information-item-label"><localize key="packager_packageDownloads">Downloads</localize>:</div>
                  <div class="umb-package-details__information-item-content">{{vm.package.downloads}}</div>
                </div>

                <div class="umb-package-details__information-item" ng-if="vm.package.ownerInfo.karma">
                  <div class="umb-package-details__information-item-label"><localize key="packager_packageLikes">Likes</localize>:</div>
                  <div class="umb-package-details__information-item-content">{{vm.package.likes}}</div>
                </div>

                <div class="umb-package-details__information-item" ng-if="vm.package.certifiedToWorkOnUmbracoCloud">
                  <div class="umb-package-details__information-item-label"><localize key="packager_verifiedToWorkOnUmbracoCloud">Verified to work on Umbraco CLoud</localize></div>
                </div>

              </div>
            </umb-box-content>
          </umb-box>

          <umb-box>
            <umb-box-content>
              <div class="umb-package-details__section-title"><localize key="packager_packageCompatibility">Compatibility</localize></div>
              <div class="umb-package-details__section-description"><localize key="packager_packageCompatibilityDescription">This package is compatible with the following versions of Umbraco, as reported by community members. Full compatability cannot be guaranteed for versions reported below 100%</localize></div>
              <div class="umb-package-details__compatability" ng-repeat="compatibility in vm.package.compatibility | filter:percentage > 0">
                <div class="umb-package-details__compatability-label">
                  <span class="umb-package-details__information-item-label">{{compatibility.version}}</span>
                  <span class="umb-package-details__information-item-label-2">({{compatibility.percentage}}%)</span>
                </div>
                <umb-progress-bar
                  percentage="{{compatibility.percentage}}">
                </umb-progress-bar>
              </div>
            </umb-box-content>
          </umb-box>

          <umb-box ng-if="vm.package.externalSources">
            <umb-box-content>
              <div class="umb-package-details__section-title"><localize key="packager_packageExternalSources">External sources</localize></div>
              <div>
                <div class="umb-package-details__information-item" ng-repeat="externalSource in vm.package.externalSources">
                  <a class="umb-package-details__link" href="{{externalSource.url}}" target="_blank" rel="noopener noreferrer">
                    <umb-icon icon="icon-out"></umb-icon>
                    {{externalSource.name}}
                  </a>
                </div>
              </div>
            </umb-box-content>
          </umb-box>

        </div>

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

</div>
