<xf:macro id="addon_list_filter">
	<div class="block">
		<div class="block-outer">
			<xf:js src="xf/filter.js" min="1" />
			<div class="block-outer-opposite quickFilter u-jsOnly"
				data-xf-init="filter"
				data-key="addOns"
				data-search-target=".addOnList"
				data-search-row=".addOnList-row"
				data-search-row-group=".block"
				data-search-limit=".js-filterSearchable"
				data-no-results-format="<div class=&quot;blockMessage js-filterNoResults&quot;>%s</div>">

				<div class="inputGroup inputGroup--inline inputGroup--joined">
					<input type="search" class="input js-filterInput" placeholder="{{ phrase('filter...') }}" />
					<span class="inputGroup-text">
						<xf:checkbox standalone="true">
							<xf:option class="js-filterPrefix" label="{{ phrase('prefix_search') }}" />
						</xf:checkbox>
					</span>
					<i class="inputGroup-text js-filterClear is-disabled" aria-hidden="true"></i>
				</div>
			</div>
		</div>
	</div>
</xf:macro>

<xf:macro id="addon_list_block" arg-addOns="!" arg-heading="!" arg-desc="" arg-addOnDirWritable="{{ false }}">
	<xf:if is="$addOns is not empty">
		<div class="block">
			<div class="block-container">
				<h3 class="block-header">
					{$heading}
					<xf:if is="$desc">
						<span class="block-desc">
							{$desc}
						</span>
					</xf:if>
				</h3>
				<ol class="block-body">
					<xf:foreach loop="$addOns" value="$addOn">
						<xf:macro id="addon_list_item" arg-addOn="{$addOn}" arg-addOnDirWritable="{$addOnDirWritable}" />
					</xf:foreach>
				</ol>
			</div>
		</div>
	</xf:if>
</xf:macro>

<xf:macro id="addon_list_item" arg-addOn="!" arg-addOnDirWritable="{{ false }}">
	<xf:css src="addon_list.less" />

	<li class="block-row block-row--separated addOnList-row{{ ($addOn.isInstalled() && !$addOn.active) ? ' is-disabled' : '' }}">
		<div class="contentRow">
			<xf:macro id="addon_list_item_icon" arg-addOn="{$addOn}" />
			<div class="contentRow-main">
				<xf:macro id="addon_list_item_menu" arg-addOn="{$addOn}" arg-addOnDirWritable="{$addOnDirWritable}" />
				<h3 class="contentRow-header js-filterSearchable">
					{$addOn.title} <span class="contentRow-muted">{$addOn.version_string}</span>
					<xf:if is="$addOn.is_processing">
						<span class="label label--error" data-xf-init="tooltip" title="{{ phrase('last_action:')|for_attr }} {{ $addOn.last_pending_action ?: phrase('n_a')|for_attr }}">{{ phrase('action_pending') }}</span>
					</xf:if>
				</h3>
				<div class="contentRow-lesser js-filterSearchable{{ !$addOn.description ? ' no-description' : '' }}">
					{{ $addOn.description ? snippet($addOn.description, 200)|nl2br : '&nbsp;' }}
				</div>
				<xf:macro id="addon_list_item_footer" arg-addOn="{$addOn}" />
			</div>
		</div>
	</li>
</xf:macro>

<xf:macro id="addon_list_item_icon" arg-addOn="!">
	<div class="contentRow-figure">
		<div class="contentRow-figureIcon">
			<xf:if is="$addOn.hasFaIcon()">
				<xf:fa icon="{$addOn.icon} fa-3x" />
			<xf:elseif is="$addOn.hasIcon()" />
				<img src="{$addOn.getIconUri()}" alt="{$addOn.title}" />
			<xf:elseif is="$addOn.isLegacy()" />
				<xf:fa icon="fa-question-circle fa-3x" />
			<xf:else />
				<xf:fa icon="fa-puzzle-piece fa-3x" />
			</xf:if>
		</div>
	</div>
</xf:macro>

<xf:macro id="addon_list_item_menu" arg-addOn="!" arg-addOnDirWritable="{{ false }}">
	<div class="contentRow-extra">
		<xf:if is="$addOn.canUpgrade()">
			<xf:button href="{{ link('add-ons/upgrade', $addOn) }}" overlay="true" data-cache="0" class="button--primary">
				{{ phrase('upgrade') }}
			</xf:button>
		<xf:elseif is="$addOn.canInstall()" />
			<xf:if is="$addOnDirWritable AND $addOn.canDeleteFiles()">
				<xf:button href="{{ link('add-ons/delete-files', $addOn) }}" overlay="true" data-cache="0">
					{{ phrase('delete_files') }}
				</xf:button>
			</xf:if>
			<xf:button href="{{ link('add-ons/install', $addOn) }}" overlay="true" data-cache="0" class="button--primary">
				{{ phrase('install') }}
			</xf:button>
		</xf:if>
		<xf:if is="$addOn.isInstalled()">
			<xf:button class="button--link menuTrigger"
				data-xf-click="menu"
				aria-label="{{ phrase('more_options') }}"
				aria-expanded="false"
				aria-haspopup="true">
				<xf:fa icon="fa-cog" />
			</xf:button>
			<div class="menu" data-menu="menu" aria-hidden="true"
				data-href="{{ link('add-ons/controls', $addOn) }}"
				data-load-target=".js-controlsMenuBody">
				<div class="menu-content">
					<div class="js-controlsMenuBody">
						<div class="menu-row">{{ phrase('loading...') }}</div>
					</div>
				</div>
			</div>
		</xf:if>
	</div>
</xf:macro>

<xf:macro id="addon_list_item_footer" arg-addOn="!">
	<div class="contentRow-minor">
		<ul class="listInline listInline--bullet">
			<xf:if is="$addOn.isInstalled() && !$addOn.canUpgrade()">
				<xf:if is="$addOn.isLegacy()">
					<li class="addOnList-row-noSearch">
						<span class="label label--red" data-xf-init="tooltip"
							title="{{ phrase('this_legacy_add_on_cannot_be_enabled')|for_attr }}">
							{{ phrase('legacy_add_on') }}
						</span>
					</li>
				<xf:elseif is="$addOn.hasMissingFiles()" />
					<li class="addOnList-row-noSearch">
						<span class="label label--red" data-xf-init="tooltip"
							title="{{ phrase('some_files_or_directories_for_this_add_on_missing_x', {
								'missing_files': $addOn.missing_files|join(', ')
							})|for_attr }}">
							{{ phrase('missing_files') }}
						</span>
					</li>
				<xf:elseif is="!$addOn.isFileVersionValid()" />
					<li class="addOnList-row-noSearch">
						<span class="label label--primary" data-xf-init="tooltip"
							title="{{ phrase('add_on_files_do_not_appear_to_be_from_correct_version')|for_attr }}">
							{{ phrase('version_mismatch') }}
						</span>
					</li>
				<xf:elseif is="$addOn.hasPendingChanges()" />
					<li class="addOnList-row-noSearch">
						<span class="label label--primary" data-xf-init="tooltip"
							title="{{ phrase('this_add_on_has_pending_metadata_changes')|for_attr }}">
							{{ phrase('pending_changes') }}
						</span>
					</li>
				</xf:if>
			</xf:if>
			<xf:if is="$addOn.dev || $addOn.dev_url">
				<li>
					<xf:if is="$addOn.dev && $addOn.dev_url">
						<span class="addOnList-row-noSearch">{{ phrase('developer:') }}</span> <a href="{$addOn.dev_url}" target="_blank">{$addOn.dev}</a>
					<xf:elseif is="$addOn.dev" />
						<span class="addOnList-row-noSearch">{{ phrase('developer:') }}</span> {$addOn.dev}
					<xf:elseif is="$addOn.dev_url" />
						<span class="addOnList-row-noSearch">{{ phrase('developer:') }}</span> <a href="{$addOn.dev_url}" target="_blank">{$addOn.dev_url}</a>
					</xf:if>
				</li>
			</xf:if>
			<xf:if is="$addOn.faq_url">
				<li><a href="{$addOn.faq_url}" target="_blank">{{ phrase('faq') }}</a></li>
			</xf:if>
			<xf:if is="$addOn.support_url">
				<li><a href="{$addOn.support_url}" target="_blank">{{ phrase('support') }}</a></li>
			</xf:if>
			<xf:if is="$addOn.extra_urls is not empty">
				<xf:foreach loop="$addOn.extra_urls" key="$text" value="$url">
					<li><a href="{$url}" target="_blank">{$text}</a></li>
				</xf:foreach>
			</xf:if>
		</ul>
	</div>
</xf:macro>