<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

?>
<h2 class="page-title">{{$state.current.header}}</h2>

<div class="message message-error" ng-show="syncError">
    <span class="message-text">
        {{ErrorMessage}}
    </span>
</div>
<div ng-show="$root.isMarketplaceAuthorized" class="extension-manager-wrap">
    <div class="extension-manager-title">
        Magento Marketplace Account
        <div class="extension-manager-account">
            <a ng-click="reset()" href="#" class="sign-in-out">Disconnect</a>
        </div>
    </div>
    <div class="extension-manager-content">
        <ul class="extension-manager-items row">
            <li class="item col-m-4">
                <div class="item-number">{{countOfUpdate}}</div>
                <div class="item-title">Updates<br />Available</div>
                <button ui-sref="root.update" href="#update-extension-grid"
                        ng-class="{'disabled' : !countOfUpdate, 'goUpdate' : countOfUpdate}"
                        type="button" class="btn">
                    Review Updates
                </button>
            </li>
            <li class="item col-m-4">
                <div class="item-number">{{countOfInstall}}</div>
                <div class="item-title">Extensions<br />Ready to Install</div>
                <div class="item-install">
                    <button ui-sref="root.install" href="#install-extension-grid"
                            ng-class="{'disabled' : !enabledInstall, 'goInstall' : enabledInstall}"
                            type="button" class="btn">
                        Review and Install
                    </button>
                </div>
            </li>
            <li class="item col-m-4">
                <div ng-hide="isOutOfSync"
                     class="item-title item-date-title"
                >Last Refresh at {{lastSyncTime}} on </div>
                <div ng-hide="isOutOfSync" class="item-date">
                    {{lastSyncDate}}
                </div>
                <span ng-show="isOutOfSync">No sync history</span>
                <button type="button" ng-click="sync()" class="btn">Refresh</button>
            </li>
        </ul>
    </div>
</div>

<div ng-show="logout===true" id="messages">
    <div class="messages">
        <div class="message message-success success">
            <div data-ui-id="messages-message-success">
                You have logged out
            </div>
        </div>
    </div>
</div>

<div class="row" ng-show="$root.isMarketplaceAuthorized && extensionsProcessed && total == 0">
    <label class="form-label not-found">
        <strong>You haven't purchased any extensions yet. Visit <a href="https://marketplace.magento.com">Marketplace</a> 
            for purchasing extensions.</strong><br/>
    </label>
</div>
<div class="admin__data-grid-outer-wrap"
     ng-show="$root.isMarketplaceAuthorized && extensionsProcessed && total > 0"
     id="extensionGrid"
>
    <div class="admin__data-grid-header">
        <div class="admin__data-grid-header-row row row-gutter">
            <div class="col-xs-3 module-summary">
                <span class="module-summary-title">Installed Extensions</span>
                <span class="module-summary-count">{{total}} extensions</span>
            </div>
            <div class="col-xs-9 admin__data-grid-pager-wrap"
                 ng-include="'<?= $this->basePath() ?>/pub/magento/setup/view/pagination.html'">
            </div>
        </div>
    </div>
    <div class="admin__data-grid-wrap" ng-show="$state.is('root.extension')">
        <table class="data-grid extension-manager-grid">
            <thead data-part="head">
            <tr>
                <th ng-click="order('name')"
                    ng-class="{'_ascend' : predicate === 'name' && !reverse,
                               '_descend' : predicate === 'name' && reverse}"
                    class="data-grid-th _sortable">
                    <span>Extension Name</span>
                </th>
                <th ng-click="order('type')"
                    ng-class="{'_ascend' : predicate === 'type' && !reverse,
                               '_descend' : predicate === 'type' && reverse}"
                    class="data-grid-th _sortable">
                    <span>Type</span>
                </th>
                <th ng-click="order('version')"
                    ng-class="{'_ascend' : predicate === 'version' && !reverse,
                               '_descend' : predicate === 'version' && reverse}"
                    class="data-grid-th _sortable">
                    <span>Version</span>
                </th>
                <th ng-click="order('vendor')"
                    ng-class="{'_ascend' : predicate === 'vendor' && !reverse,
                               '_descend' : predicate === 'vendor' && reverse}"
                    class="data-grid-th _sortable">
                    <span>Vendor</span>
                </th>
                <th class="data-grid-actions-cell data-grid-th">
                    <span>Actions</span>
                </th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="extension in extensions | orderBy:predicate:reverse
                | startFrom:(currentPage - 1) * rowLimit | limitTo:rowLimit"
                ng-class="{'_odd-row' : $index % 2}"
            >
                <td class="col-manager-item-name">
                    <span class="component-indicator"
                          ng-show="isAvailableUpdatePackage(extension.name)"
                          ng-class="getIndicatorInfo(extension, 'icon')"
                          data-label="{{getIndicatorInfo(extension, 'label')}}"
                    ><span>{{getIndicatorInfo(extension, 'label')}}</span>
                    </span>
                    <span class="data-grid-data">{{extension.package_title}}</span>
                </td>
                <td>
                    <span class="data-grid-data">{{extension.package_type}}</span>
                </td>
                <td>
                    <span class="data-grid-data" data-type="version">{{extension.version}}</span>
                </td>
                <td>
                    <span class="data-grid-data">{{extension.vendor}}</span>
                </td>
                <td class="data-grid-actions-cell">
                    <div class="action-select-wrap" ng-class="{'_active' : isActiveActionsCell(extension)}">
                        <button class="action-select"
                                ng-click="toggleActiveActionsCell(extension)"
                                ng-blur="closeActiveActionsCell(extension)">
                            <span>Select</span>
                        </button>
                        <ul class="action-menu" ng-class="{'_active' : isActiveActionsCell(extension)}">
                            <li ng-class="{'_disabled': !isAvailableUpdatePackage(extension.name)}"
                                ng-mousedown="isAvailableUpdatePackage(extension.name) && update(extension)">
                                <a class="action-menu-item">Update</a>
                            </li>
                            <li ng-class="{'hide': !extension.uninstall}"
                                ng-mousedown="uninstall(extension)">
                                <a class="action-menu-item">Uninstall</a>
                            </li>
                        </ul>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<div ng-show="!isHiddenSpinner || $root.saveAuthProccessed ||
(!$root.extensionsProcessed)" class="loading-mask ng-scope" data-role="loader">
    <div class="popup popup-loading">
        <div class="popup-inner">
            <img alt="Loading..." src="<?= $this->basePath() ?>/pub/images/loader-1.gif">
            Please wait...
        </div>
    </div>
</div>
