<template name="apps">
	<section class="rc-directory rc-apps-marketplace">
		{{#header sectionName="Apps" hideHelp=true fixedHeight=true fullpage=true}}
			<button class="rc-button rc-button--small rc-button--primary rc-directory-plus" data-button="install">{{> icon icon="plus"}}</button>
		{{/header}}
		<div class="rc-table-content">
			{{>tabs tabs=tabsData}}
			<div class="rc-input rc-input--small rc-directory-search">
				<label class="rc-input__label">
					<div class="rc-input__wrapper">
						{{> icon icon="magnifier" block="rc-input__icon" }}
						<input type="text" class="rc-input__element rc-input__element--small js-search" name="message-search" id="message-search" placeholder={{#if $eq searchType 'channels'}}{{_ "Search_Channels"}}{{/if}}{{#if $eq searchType 'users'}}{{_ "Search_Users"}}{{/if}} autocomplete="off">
					</div>
				</label>
			</div>
			{{#requiresPermission 'manage-apps'}}
				{{#table fixed='true' onScroll=onTableScroll onResize=onTableResize onSort=onTableSort}}
					<thead>
						<tr>
							<th class="js-sort rc-table-td--medium {{#if searchSortBy 'name'}}is-sorting{{/if}}" data-sort="name">
								<div class="table-fake-th">{{_ "Name"}} {{> icon icon=(sortIcon 'name')}}</div>
							</th>
							<th class="js-sort rc-table-td--medium {{#if searchSortBy 'category'}}is-sorting{{/if}}" data-sort="category">>
								<div class="table-fake-th">{{_ "Category"}} {{> icon icon=(sortIcon 'category') }}</div>
							</th>
							<th class="rc-table-td">
								<div class="table-fake-th">{{_ "Details"}} </div>
							</th>
							<th class="rc-table-td--small">
							</th>
						</tr>
					</thead>
					<tbody>
						{{#each apps}}
							<tr class="rc-table-tr manage" data-name="{{latest.name}}">
								<td>
									<div class="rc-table-wrapper">
										{{#if latest.iconFileData}}
											<div class="rc-table-avatar" style="background-image:url(data:image/png;base64,{{latest.iconFileData}})"></div>
										{{else}}
											<div class="rc-table-avatar" style="background-image:url({{latest.iconFileContent}})"></div>
										{{/if}}
										<div class="rc-table-info">
											<span class="rc-table-title">
												{{latest.name}}
											</span>
											{{#if latest.author.name}}
												<span class="rc-table-subtitle">by {{latest.author.name}}</span>
											{{/if}}
										</div>
									</div>
								</td>
								<td>{{latest.categories}}</td>
								<td>
									<p class="rc-table-title">
										{{#if latest.summary}}
											{{latest.summary}}
										{{else}}
											{{latest.description}}
										{{/if}}
									</p>
									{{#if latest.summary}}
										<p>
											{{latest.description}}
										</p>
									{{/if}}
								</td>
								<td>
									<!-- {{> icon icon="app-installed"}} -->
									{{#if $eq latest._installed true}}
										{{> icon icon="app-installed"}}
									{{/if}}
									{{#if renderDownloadButton latest}}
										<button class="js-install installer" data-app="{{appId}}">
											{{> icon block="installer" icon="marketplace-installer"}}
										</button>
									{{/if}}
								</td>
							</tr>
						{{/each}}
						{{#if isLoading}}
							<tr>
								<td colspan="3" style="position: relative;">{{> loading}}</td>
							</tr>
						{{/if}}
					</tbody>
				{{/table}}
			{{/requiresPermission}}
		</div>
	</section>
</template>
