Rocket.Chat/app/apps/client/admin/apps.html

<template name="apps">
	<section class="rc-apps-section">
		{{#header sectionName="Apps" hideHelp=true fixedHeight=true fullpage=true}}
			<div class="rc-header__section-button">
				<button class="rc-button rc-button--small rc-button--primary js-marketplace">
					{{> icon icon="cloud-plus" block="rc-icon--default-size"}} {{_ "Marketplace_view_marketplace"}}
				</button>
				{{#if isDevelopmentModeEnabled}}
					<button class="rc-button rc-button--small rc-button--primary rc-button--outline js-upload">
						{{> icon icon="upload" block="rc-icon--default-size"}} {{_ "Upload_app"}}
					</button>
				{{/if}}
			</div>
		{{/header}}

		<div class="rc-table-content">
			<form class="rc-form-filters js-search-form" role="form">
				<div class="rc-input">
					<div class="rc-input__icon">
						{{#if isLoading}}
							{{> loading }}
						{{else}}
							{{> icon block="rc-input__icon-svg" icon="magnifier" }}
						{{/if}}
					</div>
					<input
						type="text"
						class="rc-input__element js-search"
						name="message-search"
						id="message-search"
						placeholder="{{_ "Search_Apps"}}"
						autocomplete="off">
				</div>
			</form>

			{{#requiresPermission 'manage-apps'}}
				{{#table fixed='true' onScroll=handleTableScroll onResize=handleTableResize onSort=handleTableSort}}
					<thead>
						<tr>
							<th class="rc-table-td--medium {{#if isSortingBy 'name'}}is-sorting{{/if}} js-sort" data-sort="name">
								<div class="table-fake-th">{{_ "Name"}} {{> icon icon=(sortIcon 'name')}}</div>
							</th>
							<th class="rc-table-td">
								<div class="table-fake-th">{{_ "Details"}}</div>
							</th>
							<th class="rc-apps-marketplace__status-column">
								<div class="table-fake-th">{{_ "Status"}}</div>
							</th>
						</tr>
					</thead>
					<tbody>
						{{#each app in apps}}
							<tr class="rc-table-tr js-manage" data-id="{{app.id}}">
								<td>
									<div class="rc-table-wrapper">
										{{#if app.iconFileData}}
											<div class="rc-table-avatar" style="background-image:url(data:image/png;base64,{{app.iconFileData}})"></div>
										{{else}}
											<div class="rc-table-avatar" style="background-image:url({{app.iconFileContent}})"></div>
										{{/if}}
										<div class="rc-table-info">
											<span class="rc-table-title">
												{{app.name}}
											</span>
											{{#if app.author.name}}
												<span class="rc-table-subtitle">by {{app.author.name}}</span>
											{{/if}}
										</div>
									</div>
								</td>
								<td>
									<div class="rc-table-wrapper">
										<div class="rc-table-info">
											<span class="rc-table-title">
												{{#if app.summary}}
													{{app.summary}}
												{{else}}
													{{app.description}}
												{{/if}}
											</span>
											<span class="rc-table-subtitle rc-apps-categories">
												{{#each category in app.categories}}
												<span class="rc-apps-category">{{category}}</span>
												{{/each}}
											</span>
										</div>
									</div>
								</td>
								<td>
									<div class="rc-table-wrapper">
										{{#let buttonProps=(appButtonProps app) statusSpanProps=(appStatusSpanProps app)}}
											{{#if buttonProps}}
												<button
													class="rc-button rc-button--primary {{#unless $eq buttonProps.action 'update'}}rc-apps-section__table-button--hideable{{/unless}} {{#if app.working}}rc-apps-section__table-button--working{{/if}} js-{{buttonProps.action}}"
													disabled={{app.working}}
													data-id={{app.id}}
												>
													{{#if app.working}}
														{{> icon icon="loading" block="rc-icon--default-size rc-apps-section__spinning-icon"}}
													{{/if}}
													{{_ buttonProps.label}}
												</button>
											{{else if statusSpanProps}}
												<span class="rc-apps-section__status {{#if statusSpanProps.type}}rc-apps-section__status--{{statusSpanProps.type}}{{/if}}">
													{{> icon icon=statusSpanProps.icon block="rc-icon--default-size"}}
													{{_ statusSpanProps.label}}
												</span>
											{{/if}}
										{{/let}}

										<button class="rc-apps-section__app-menu-trigger js-menu" data-id="{{app.id}}">
											{{> icon icon="menu" block="rc-icon--default-size"}}
										</button>
									</div>
								</td>
							</tr>
						{{/each}}
						{{#if isLoading}}
							<tr>
								<td colspan="3" style="position: relative">{{> loading}}</td>
							</tr>
						{{/if}}
					</tbody>
				{{/table}}
			{{/requiresPermission}}
		</div>
	</section>
</template>