<div class="height_limiter">
<!-- The first 'sample' prompt is the current one; the remainders are samples. This ought to be cleaned up. -->
<div class="current_prompt" style="min-height: 7.5em;" ng-style="{'background-color': terminalBackgroundColor}">
	<div class="prompt_demo_choice_label" style="color: #FFF;">{{ selectedPrompt.name }}</div>
    <div style='display: flex'>
	    <div ng-bind-html='selectedPrompt.demo | to_trusted' style='flex-grow: 1' class="prompt_demo unbordered"></div>
	    <div ng-if='selectedPrompt.right' title="right prompt for {{selectedPrompt.name }}" ng-bind-html='selectedPrompt.right | to_trusted' class="prompt_demo unbordered" ng-click="selectPrompt(prompt)"></div>
    </div>
	<div style="position: absolute; right: 5px; bottom: 5px;">
		<button class="save_button"
			ng-show="showSaveButton"
			style="color: #CCC"
			ng-click="setPrompt()">{{ savePromptButtonTitle }}</button>
	</div>
</div>
<div style="margin: 10px 15px 7px 15px; padding-bottom: 10px; border-bottom: solid 1px #999">Preview a prompt below:</div>
<div class="prompt_choices_scrollview">
<div class="prompt_choices_list">
	<div ng-repeat="prompt in samplePrompts">
		<div class="prompt_demo_choice_label">{{ prompt.name }}</div>
        <div ng-if='prompt.right' style='display: flex;'>
		    <div ng-bind-html='prompt.demo | to_trusted' class="prompt_demo" style='flex-grow: 1' ng-click="selectPrompt(prompt)"></div>
		    <div ng-if='prompt.right' title="right prompt for {{prompt.name}}" ng-bind-html='prompt.right | to_trusted' class="prompt_demo" ng-click="selectPrompt(prompt)"></div>
        </div>
		<div ng-if='!prompt.right' ng-bind-html='prompt.demo | to_trusted' class="prompt_demo" ng-click="selectPrompt(prompt)"></div>
	</div>
</div>
</div>
</div>
