<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-change="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 class="umb-packages-section" ng-if="vm.searchQuery == '' && vm.popular.length > 0">
                <h4><strong><localize key="packager_packagesPopular">Popular</localize></strong></h4>
                <div class="umb-packages">

                    <div class="umb-package" ng-repeat="package in vm.popular">
                        <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"></umb-icon>
                                            <strong>{{package.likes}}</strong>
                                        </small>
                                    </div>
                                    <div class="umb-package-cloud">
                                        <div ng-if="package.certifiedToWorkOnUmbracoCloud">
                                            <umb-icon icon="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-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"></umb-icon>
                                            <strong>{{package.likes}}</strong>
                                        </small>
                                    </div>
                                    <div class="umb-package-cloud">
                                        <div ng-if="package.certifiedToWorkOnUmbracoCloud">
                                            <umb-icon icon="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>
                            <div class="umb-packages-view-title">{{ vm.package.name }}</div>
                            <div class="umb-package-details__description" ng-bind-html="vm.package.description"></div>
                            <div class="umb-gallery">
                                <div class="umb-gallery__thumbnails">
                                <button type="button" class="umb-gallery__thumbnail" ng-repeat="image in vm.package.images" ng-click="vm.openLightbox($index, vm.package.images)">
                                    <img ng-src="{{ image.thumbnail }}" />
                                </button>
                                </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>
                            <umb-button
                                ng-if="vm.package.isValid === true"
                                type="button"
                                button-style="[success,block]"
                                size="m"
                                action="vm.downloadPackage(vm.package)"
                                label-key="packager_packageInstall">
                            </umb-button>
                            <umb-button
                                ng-if="vm.package.isValid === false"
                                type="button"
                                button-style="[block]"
                                size="m"
                                disabled="vm.package.isValid === false"
                                label-key="packager_packageAlreadyInstalled">
                            </umb-button>
                        </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>

    <!-- Package details -->
    <div ng-if="vm.packageViewState === 'packageInstall' && 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('packageDetails');" 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="flex items-center justify-center">

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

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


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

                            <div class="umb-info-local-item">
                                <strong>Author</strong>
                                <a href="{{ vm.localPackage.authorLink }}" target="_blank" rel="noopener noreferrer">{{ vm.localPackage.author }}</a>
                            </div>

                            <div class="umb-info-local-item">
                                <strong><localize key="packager_packageVersion">Version</localize></strong>
                                {{ vm.localPackage.version }}
                            </div>

                            <div class="umb-info-local-item">
                                <strong><localize key="packager_packageLicense">License</localize></strong>
                                <a href="{{ vm.localPackage.licenseUrl }}" target="_blank" rel="noopener noreferrer">{{ vm.localPackage.license }}</a>
                            </div>

                            <div class="umb-info-local-item">
                                <strong><localize key="packager_packageReadme">Read me</localize></strong>
                                <br>
                                <small ng-bind-html="vm.localPackage.readme"></small>
                            </div>

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

                                <umb-checkbox model="vm.localPackage.packageLicenseAccept" required="true">
                                    <strong class="label-text"><localize key="packager_accept">I accept</localize> <a href="#" ng-href="{{vm.localPackage.licenseUrl}}" target="_blank" rel="noopener noreferrer"><localize key="packager_termsOfUse">terms of use</localize></a></strong>
                                </umb-checkbox>

                                <umb-button ng-if="vm.installState.type !== 'error'"
                                            class="mt3"
                                            type="button"
                                            size="m"
                                            button-style="success"
                                            disabled="localPackageForm.$invalid"
                                            action="vm.installPackage(vm.localPackage)"
                                            label-key="packager_packageInstall">
                                </umb-button>
                            </div>

                            <div class="umb-info-local-item">
                                <umb-progress-bar
                                    ng-if="vm.installState.status !== ''"
                                    percentage="{{vm.installState.progress}}">
                                </umb-progress-bar>
                            </div>

                            <div class="umb-info-local-item text-error" ng-if="!vm.localPackage.isCompatible">
                                <localize key="packager_targetVersionMismatch">This package cannot be installed, it requires a minimum Umbraco version of</localize> {{vm.localPackage.umbracoVersion}}
                            </div>

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

                            <div class="umb-info-local-item text-info"
                                 ng-show="vm.installCompleted">

                                <button type="button"
                                        class="btn btn-success flex-inline mt3"
                                        ng-click="vm.reloadPage()">
                                    <localize key="packager_installFinish">Finish</localize>
                                </button>
                            </div>

                        </div>
                    </form>

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

</div>
