<template name="messageAttachment">
	<div class="attachment">
		<!-- <div>fallback: {{fallback}}</div> -->
		{{pretext}}
		<div class="attachment-block">
			<div class="attachment-block-border background-info-font-color" style="background-color: {{color}}"></div>
			{{#if author_name}}
				{{#if author_link}}
					<div class="attachment-author">
						{{#if author_icon}}
							<img src="{{fixCordova author_icon}}">
						{{/if}}
						<a href="{{fixCordova author_link}}" target="_blank">{{author_name}}</a>
						{{#if ts}}
							<span class="time">{{#if message_link}}<a href="{{message_link}}">{{time}}</a>{{else}}{{time}}{{/if}}</span>
						{{/if}}
					</div>
				{{else}}
					<div class="attachment-author">
						{{#if author_icon}}
							<img src="{{fixCordova author_icon}}">
						{{/if}}
						{{author_name}}
					{{#if ts}}
						<span class="time">{{#if message_link}}<a href="{{message_link}}">{{time}}</a>{{else}}{{time}}{{/if}}</span>
					{{/if}}
					</div>
				{{/if}}
			{{/if}}
			{{#if title}}
				<div class="attachment-title">
					{{#if title_link}}
						<a href="{{fixCordova title_link}}" target="_blank">{{title}}</a>
						{{#if title_link_download}}
							<a class="icon-download attachment-download-icon" href="{{fixCordova title_link}}" target="_blank" download=""></a>
						{{/if}}
					{{else}}
						{{title}}
					{{/if}}
					{{#if collapsed}}
						<span class="collapse-switch icon-right-dir" data-index="{{index}}" data-collapsed="{{collapsed}}"></span>
					{{else}}
						<span class="collapse-switch icon-down-dir" data-index="{{index}}" data-collapsed="{{collapsed}}"></span>
					{{/if}}
				</div>
			{{/if}}

			{{#unless collapsed}}
				<div class="attachment-flex">
					{{#if thumb_url}}
						<div class="attachment-thumb">
							<img src="{{fixCordova thumb_url}}">
						</div>
					{{/if}}

					{{#if text}}
						<div class="attachment-flex-column-grow attachment-text">
							{{{parsedText}}}
						</div>
					{{/if}}
				</div>
			{{/unless}}

			{{#if image_url}}
				{{#unless collapsed}}
					<div class="attachment-image">
					{{#if loadImage}}
						<figure>
							<div class="inline-image" style="background-image: url('{{fixCordova image_url}}');">
								<img src="{{fixCordova image_url}}" height="{{getImageHeight image_dimensions.height}}" class="gallery-item" data-title="{{title}}" data-description="{{description}}">
							</div>
							{{#if description}}
								<figcaption class="attachment-description">{{description}}</figcaption>
							{{/if}}
						</figure>
					{{else}}
						<div class="image-to-download" data-url="{{image_url}}">
							<i class="icon-picture"></i>
							<div>click to load</div>
						</div>
					{{/if}}
					</div>
				{{/unless}}
			{{/if}}

			{{#if audio_url}}
				{{#unless collapsed}}
					<div class="attachment-audio">
						<audio controls>
							<source src="{{fixCordova audio_url}}" type="{{audio_type}}" data-description="{{description}}">
							Your browser does not support the audio element.
						</audio>
					</div>
				{{/unless}}
			{{/if}}

			{{#if video_url}}
				{{#unless collapsed}}
					<div class="attachment-video">
						<video controls class="inline-video">
							<source src="{{fixCordova video_url}}" type="{{video_type}}" data-description="{{description}}">
							Your browser does not support the video element.
						</video>
					</div>
				{{/unless}}
			{{/if}}

			{{#if fields}}
				{{#unless collapsed}}
					<div class="attachment-fields">
						{{#each fields}}
							{{#unless short}}
								<div class="attachment-field">
									<div class="attachment-field-title">{{title}}</div>
									{{{RocketChatMarkdown value}}}
								</div>
							{{/unless}}
						{{/each}}
						{{#each fields}}
							{{#if short}}
								<div class="attachment-field attachment-field-short">
									<div class="attachment-field-title">{{title}}</div>
									{{{RocketChatMarkdown value}}}
								</div>
							{{/if}}
						{{/each}}
					</div>
				{{/unless}}
			{{/if}}

			{{#unless image_url}}
				{{#if description}}
					<div class="attachment-description">{{description}}</div>
				{{/if}}
			{{/unless}}

			{{#each attachments}}
				{{injectIndex . ../index @index}} {{> messageAttachment}}
			{{/each}}
		</div>
	</div>
</template>
