<template name="liveStreamTab">
		{{#if hasSource}}
			{{#if isPopoutOpen}}
				{{#if canDock}}
					<button type="button" class="rc-button rc-button--primary js-close button-block" title="{{_ 'Livestream_close'}}" >{{_ "Livestream_close"}}</button>
				{{else}}
					<button type="button" class="rc-button rc-button--primary js-close button-block" title="{{_ 'Livestream_switch_to_room'}}" >{{_ "Livestream_switch_to_room"}}</button>
				{{/if}}
			{{else}}
				{{#if hasThumbnail}}
					<div class="thumbnail-container" style="background: url({{thumbnailUrl}}) 100% no-repeat no-repeat;">
						<a href="#" class="js-popout popout--absolute-center">
							{{> icon icon="play-solid" block="popout"}}
						</a>
					</div>
				{{else}}
					<a href="#" class="js-popout popout--absolute-center">
						{{> icon icon="play-solid" block="popout"}}
					</a>
				{{/if}}
			{{/if}}
		{{else}}
		 <p> {{ streamingUnavailableMessage }} </p>
		{{/if}}
		{{#if canEdit}}
			{{#if editing}}
				{{#if broadcastEnabled}}
					{{ > liveStreamBroadcast}}
				{{/if}}
				<form class="liveStreamTab__form">
					<label class="rc-input__label">
						<p> Livestream not available message: </p>
						<input type="text" name="streaming-message" class="rc-input__element content-background-color editing" placeholder="{{_ "Livestream_not_found"}}" value="{{ streamingUnavailableMessage }}"/>
					</label>
					<label class="rc-input__label">
						<p> Livestream source (URL): </p>
						<input type="text" name="streaming-source" class="rc-input__element content-background-color editing" placeholder="{{_ "Livestream_url"}}" value="{{ streamingSource }}"/>
					</label>
					<div class="rc-switch">
						<label class="rc-switch__label" tabindex="-1">
							<input type="checkbox" class="rc-switch__input" name="streaming-audio-only" checked={{isAudioOnly}}>
							<span class="rc-switch__button">
							<span class="rc-switch__button-inside"></span>
						</span>
							<span class="rc-switch__text">
								{{_ "Livestream_enable_audio_only"}}
							</span>
						</label>
						<span class="rc-switch__description">{{ typeDescription }}</span>
					</div>
					<div class="rc-user-info__flex">
						<button type="button" class="rc-button rc-button--nude js-cancel button-block" title="{{_ 'Cancel'}}" >{{_ "Cancel"}}</button>
						<button type="button" class="rc-button rc-button--submit js-clear button-block" title="{{_ 'Clear'}}" >{{_ "Clear"}}</button>
						<button type="button" class="rc-button rc-button--primary js-save button-block" title="{{_ 'Save'}}">{{_ "Save"}}</button>
					</div>
				</form>
			{{else}}
				<div class="setting-block livestream--url">
					{{> icon icon="permalink"}}
					<a href="#" class="current-setting streaming-source-settings"> {{ streamingSource }} </a>
				</div>
			{{/if}}
		{{/if}}
</template>
