<div class="row">
	<div class="col-xs-12 col-md-6">
		<div>
			<table class="table sharing_table">
				<thead>
				<tr>
					<td>
						<tags-input ng-model="inputSharedWith"
									replace-spaces-with-dashes="false"
									add-from-autocomplete-only="true"
									placeholder="{{ 'search.u.g' | translate}}">
							<auto-complete source="searchUsers($query)"
										   min-length="0"
										   template="autocomplete-template"></auto-complete>
						</tags-input>
					</td>

					<td>
						<button class="button"
								ng-click="shareWith(inputSharedWith)">
							+
						</button>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<small>{{ 'search.result.missing' | translate}}</small>
					</td>
				</tr>
				</thead>
			</table>

			<div ng-if="share_settings.cypher_progress.done > 0">
				{{'cyphering' | translate}}...
				<div progress-bar="share_settings.cypher_progress.percent" index="share_settings.cypher_progress.done" total="share_settings.cypher_progress.total"></div>
			</div>
			<div ng-if="share_settings.upload_progress.done > 0">
				{{ 'uploading' | translate}}...
				<div progress-bar="share_settings.upload_progress.percent" index="share_settings.upload_progress.done" total="share_settings.upload_progress.total"></div>
			</div>
		</div>
	</div>
	<div class="col-xs-12 col-md-6" ng-show="share_settings.cypher_progress.times.length > 0">
		<table class="table">
			<thead>
			<tr>
				<td>{{ 'user' | translate}}</td>
				<td>{{ 'crypto.time' | translate}}</td>
			</tr>
			</thead>
			<tr ng-repeat="user in share_settings.cypher_progress.times">
				<td>
					<i class="fa fa-cogs"></i>
					{{user.user}}
				</td>
				<td>{{user.time}} s</td>
			</tr>
		</table>
        {{ 'crypto.total.time' | translate}}: {{ calculate_total_time() }}
	</div>
</div>
<div class="row">
	<div class="col-xs-12 col-md-6">
		<table class="table shared_table"
			   ng-show="share_settings.credentialSharedWithUserAndGroup.length > 0">
			<thead>
			<tr>
				<td>{{'user' | translate}}</td>
				<td>{{ 'perm.read' | translate}}</td>
				<td>{{ 'perm.write' | translate}}</td>
				<td>{{ 'perm.files' | translate}}</td>
				<td>{{ 'perm.revisions' | translate}}</td>
				<td></td>
			</tr>
			</thead>
			<tr ng-repeat="user in share_settings.credentialSharedWithUserAndGroup">
				<td>
					<i class="fa fa-user" ng-if="user.pending === false"></i>
					<i class="fa fa-user-times" ng-if="user.pending === true"></i>
					{{user.userId}}
					<small ng-if="user.pending === true" class="pull-right pending">{{ 'pending' | translate}}</small>
				</td>
				<td><input type="checkbox" ng-click="setPermission(user.acl, default_permissions.permissions.READ)" ng-checked="hasPermission(user.acl, default_permissions.permissions.READ)"> </td>
				<td><input type="checkbox" ng-click="setPermission(user.acl, default_permissions.permissions.WRITE)" ng-checked="hasPermission(user.acl, default_permissions.permissions.WRITE)"></td>
				<td><input type="checkbox" ng-click="setPermission(user.acl, default_permissions.permissions.FILES)" ng-checked="hasPermission(user.acl, default_permissions.permissions.FILES)"></td>
				<td><input type="checkbox" ng-click="setPermission(user.acl, default_permissions.permissions.HISTORY)" ng-checked="hasPermission(user.acl, default_permissions.permissions.HISTORY)"></td>
				<td><i class="fa fa-trash" ng-click="unshareUser(user)"></i></td>
			</tr>
		</table>
	</div>
</div>


<script type="text/ng-template" id="autocomplete-template">
	<i class="fa fa-user" ng-if="data.type === 'user'"></i>
	<i class="fa fa-group" ng-if="data.type === 'group'"></i>
	{{data.text}}
</script>