<template name="messagePopupSlashCommandPreview">
	{{#if isOpen}}
		<div class="message-popup-position">
			<div class="message-popup content-background-color {{cls}}">
				{{#if isLoading}}
					<div class="message-popup-title secondary-background-color border-component-color">
						{{_ "Loading..."}}
						{{> loading}}
					</div>
				{{else}}
					{{#with preview}}
						<div class="message-popup-title secondary-background-color border-component-color">
							{{_ i18nTitle}} <strong>{{ getArgs }}</strong>
						</div>
						<div class="message-popup-items preview-items">
							{{#each items}}
								<div class="popup-item" data-id="{{id}}">
									{{#if isType 'image' type}}
										<img src="{{value}}" alt="{{value}}">
									{{/if}}

									{{#if isType 'audio' type}}
										<audio controls>
											<source src="{{value}}">
											Your browser does not support the audio element.
										</audio>
									{{/if}}

									{{#if isType 'video' type}}
										<video controls class="inline-video">
											<source src="{{value}}">
											Your browser does not support the video element.
										</video>
									{{/if}}

									{{#if isType 'text' type}}
										<h4>{{value}}</h4> <!-- Not sure what to do here -->
									{{/if}}

									{{#if isType 'other' type}}
										<code>{{value}}</code>
									{{/if}}
								</div>
							{{/each}}
						</div>
					{{/with}}
				{{/if}}
			</div>
		</div>
	{{/if}}
</template>
