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

<template name="marketplace">
	<section class="rc-apps-section rc-apps-marketplace">
		{{#header sectionName="Marketplace" hideHelp=true fixedHeight=true fullpage=true}}
			{{#unless cloudLoggedIn}}
			<button class="rc-button rc-button--small rc-button--primary rc-button--outline" data-button="login">
				{{> icon icon="cloud-plus" block="rc-icon--default-size"}} {{_ "Login"}}
			</button>
			{{/unless}}
		{{/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=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="rc-table-td">
								<div class="table-fake-th">{{_ "Details"}}</div>
							</th>
							<th class="rc-table-td--medium">
								<div class="table-fake-th">{{_ "Price"}}</div>
							</th>
							<th class="rc-table-td--small">
								<div class="table-fake-th">{{_ "Status"}}</div>
							</th>
						</tr>
					</thead>
					<tbody>
						{{#each apps}}
							<tr class="rc-table-tr js-open" 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>
									<div class="rc-table-wrapper">
										<div class="rc-table-info">
											<span class="rc-table-title">
												{{#if latest.summary}}
													{{latest.summary}}
												{{else}}
													{{latest.description}}
												{{/if}}
											</span>
											{{#if latest.summary}}
												<span class="rc-table-subtitle">
													{{latest.description}}
												</span>
											{{/if}}
											<span class="rc-table-subtitle rc-apps-categories">
												{{#each category in latest.categories}}
												<span class="rc-apps-category">{{category}}</span>
												{{/each}}
											</span>
										</div>
									</div>
								</td>
								<td>
									<div class="rc-table-wrapper">
										<div class="rc-table-info">
											<div class="rc-table-title">
												{{purchaseTypeDisplay .}}
											</div>
											<div class="rc-table-subtitle">
												{{priceDisplay .}}
											</div>
										</div>
									</div>
								</td>
								<td>
									<div class="rc-table-wrapper">
										{{#if isInstalled .}}
											{{#if canUpdate .}}
												<button class="rc-apps-marketplace__app-button js-install">
													{{> icon icon="reload" block="rc-icon--default-size"}}
													{{_ "Update"}}
												</button>
											{{else if isOnTrialPeriod .}}
												<span class="rc-apps-marketplace__app-status">
												{{> icon icon="checkmark-circled" block="rc-icon--default-size"}}
												{{_ "Trial period"}}
												</span>
											{{else}}
												<span class="rc-apps-marketplace__app-status">
													{{> icon icon="checkmark-circled" block="rc-icon--default-size"}}
													{{_ "Installed"}}
												</span>
											{{/if}}

											<button class="rc-apps-marketplace__app-menu-trigger js-menu" data-app="{{appId}}">
												{{> icon icon="menu" block="rc-icon--default-size"}}
											</button>
										{{else}}
											{{#if canTrial .}}
												<button class="rc-apps-marketplace__app-button js-purchase" data-app="{{appId}}">
													{{> icon icon="circled-arrow-down" block="rc-icon--default-size"}}
													{{_ "Start a trial"}}
												</button>
											{{else if canBuy .}}
												<button class="rc-apps-marketplace__app-button js-purchase" data-app="{{appId}}">
													{{> icon icon="circled-arrow-down" block="rc-icon--default-size"}}
													{{_ "Buy"}}
												</button>
											{{else}}
												<button class="rc-apps-marketplace__app-button js-install" data-app="{{appId}}">
													{{> icon icon="circled-arrow-down" block="rc-icon--default-size"}}
													{{_ "Install"}}
												</button>
											{{/if}}
										{{/if}}
									</div>
								</td>
							</tr>
						{{/each}}
						{{#if isLoading}}
							<tr class="table-no-click table-no-pointer">
								<td colspan="4" style="position: relative">{{> loading}}</td>
							</tr>
						{{/if}}
					</tbody>
				{{/table}}
			{{/requiresPermission}}
		</div>
	</section>
</template>