<br/>

<div class="list-group" root-access>
	<input ng:model="searchQuery" ng:model-options="{debounce: 500}" type="search" autofocus class="form-control" placeholder="{{'Search packages'|translate}}" />

	<progress-spinner ng:hide="results != null"></progress-spinner>

    <div ng:repeat="package in results|orderBy:['name']" class="list-group-item list-group-item-large">
        <a class="list-group-btn subtle" ng:click="markForUpgrade(package)" ng:show="package.isUpgradeable" title="{{'Mark for upgrade'|translate}}">
            <i class="fa fa-arrow-up"></i>
        </a>
        <a class="list-group-btn subtle" ng:click="markForInstallation(package)" ng:show="!package.isInstalled" title="{{'Mark for installation'|translate}}">
            <i class="fa fa-download"></i>
        </a>
        <a class="list-group-btn subtle" ng:click="markForRemoval(package)" ng:show="package.isInstalled" title="{{'Mark for removal'|translate}}">
            <i class="fa fa-trash-o"></i>
        </a>
        <div class="list-group-main">
            <div class="list-group-icon" ng:show="!package.isInstalled">
                <i class="fa fa-gift"></i>
            </div>
            <div class="list-group-icon text-success" ng:show="package.isInstalled">
                <i class="fa fa-fw fa-check"></i>
            </div>
            <h4 class="list-group-item-heading">
                {{package.name}}
                <span ng:show="package.isUpgradeable">
                    &nbsp;
                    <span class="label label-info" title="{{'Upgradeable'|translate}}">
                        <i class="fa fa-fw fa-arrow-up"></i>
                    </span>
                </span>
                &nbsp;
                <span class="subtle">
                    {{package.version}}
                </span>
                <span ng:show="package.created" class="label label-default">
                    {{package.created}}
                </span>
            </h4>
            <p class="list-group-item-text">
                {{package.description}}
            </p>
        </div>
    </div>
</div>

<div class="floating-toolbar-padder"></div>

<floating-toolbar>
    <a ng:click="updateLists()" class="btn btn-default btn-flat" test-bind="updateButton" translate>Update package list</a>
</floating-toolbar>

<floating-toolbar class="accented" ng:show="selection.length > 0">
    <a class="btn btn-default btn-flat pull-right" ng:click="showSelection()">
        <strong>{{selection.length}}</strong> <span translate>pending</span>
    </a>

    <a ng:click="doApply()" class="btn btn-default btn-flat" translate>Apply changes</a>
</floating-toolbar>

<dialog ng:show="selectionVisible && selection.length > 0">
    <div class="modal-header">
        <h4 translate>Selections</h4>
    </div>
    <div class="modal-body">
        <div class="list-group" test-bind="clipboardDialogList">
            <div ng:repeat="item in selection" class="list-group-item list-group-item-small" test-bind-item="{{item.package.id}}">
                <a ng:click="selection.splice($index, 1)" class="list-group-btn subtle" title="{{'Cancel'|translate}}">
                    <i class="fa fa-times"></i>
                </a>
                <div class="list-group-main">
                    <i class="fa fa-fw fa-download" ng:if="item.operation == 'install'"></i>
                    <i class="fa fa-fw fa-arrow-up" ng:if="item.operation == 'upgrade'"></i>
                    <i class="fa fa-fw fa-trash-o" ng:if="item.operation == 'remove'"></i>
                    &nbsp;
                    {{item.package.name}}
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <a ng:click="hideSelection()" class="btn btn-default btn-flat" translate>Close</a>
    </div>
</dialog>
