<style type="text/css">
ul.quick-toolbar > li {
	display: list-item;
	float: left;
	list-style: outside none none;
	margin: 0 5px 10px 0;
}
ul.quick-toolbar {
    display: block;
    margin: 0;
    padding: 0;
}
</style>
<div class="row"><div class="col-md-12">
<!-- IF QUICK_REPLY -->
<!-- ELSE -->
<script type="text/javascript">
ajax.callback.posts = function(data) {
	$('#view_message').show();
	$('.view-message').html(data.message_html);
	initPostBBCode('.view-message');
	var maxH = screen.height - 490;
	$('.view-message').css({maxHeight: maxH});
};
</script>
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-sm-3"><div class="form-group">
<select name="fontFace" class="form-control input-sm">
	<option style="font-family: Verdana" value="-1" selected="selected">{L_QR_FONT_SEL}:</option>
	<option style="font-family: monospace" value="monospace">&nbsp;Monospace</option>
	<option style="font-family: serif" value="serif">&nbsp;Serif</option>
	<option style="font-family: sans-serif" value="sans-serif">&nbsp;Sans Serif</option>
	<option style="font-family: cursive" value="cursive">&nbsp;Cursive</option>
	<option style="font-family: Arial" value="Arial">&nbsp;Arial</option>
	<option style="font-family: Tahoma" value="Tahoma">&nbsp;Tahoma</option>
	<option style="font-family: Georgia" value="Georgia">&nbsp;Georgia</option>
	<option style="font-family: Fixedsys" value="Fixedsys">&nbsp;Fixedsys</option>
</select>
</div></div>
<div class="col-sm-3"><div class="form-group">
<select name="codeColor" class="form-control input-sm">
	<option style="color: black; background: #fff;" value="black" selected="selected">{L_QR_COLOR_SEL}:</option>
	<option style="color: darkred;" value="darkred">&nbsp;{L_COLOR_DARK_RED}</option>
	<option style="color: brown;" value="brown">&nbsp;{L_COLOR_BROWN}</option>
	<option style="color: #996600;" value="#996600">&nbsp;{L_COLOR_ORANGE}</option>
	<option style="color: red;" value="red">&nbsp;{L_COLOR_RED}</option>
	<option style="color: #993399;" value="#993399">&nbsp;{L_COLOR_VIOLET}</option>
	<option style="color: green;" value="green">&nbsp;{L_COLOR_GREEN}</option>
	<option style="color: darkgreen;" value="darkgreen">&nbsp;{L_COLOR_DARK_GREEN}</option>
	<option style="color: gray;" value="gray">&nbsp;{L_COLOR_GRAY}</option>
	<option style="color: olive;" value="olive">&nbsp;{L_COLOR_OLIVE}</option>
	<option style="color: blue;" value="blue">&nbsp;{L_COLOR_BLUE}</option>
	<option style="color: darkblue;" value="darkblue">&nbsp;{L_COLOR_DARK_BLUE}</option>
	<option style="color: indigo;" value="indigo">&nbsp;{L_COLOR_INDIGO}</option>
	<option style="color: #006699;" value="#006699">&nbsp;{L_COLOR_STEEL_BLUE}</option>
</select>
</div></div>
<div class="col-sm-3"><div class="form-group">
<select name="codeSize" class="form-control input-sm">
	<option value="12" selected="selected">{L_QR_SIZE_SEL}:</option>
	<option value="9" class="em">{L_FONT_SMALL}</option>
	<option value="10">&nbsp;size=10</option>
	<option value="11">&nbsp;size=11</option>
	<option value="12" class="em" disabled="disabled">{L_FONT_NORMAL}</option>
	<option value="14">&nbsp;size=14</option>
	<option value="16">&nbsp;size=16</option>
	<option value="18" class="em">{L_FONT_LARGE}</option>
	<option value="20">&nbsp;size=20</option>
	<option value="22">&nbsp;size=22</option>
	<option value="24" class="em">{L_FONT_HUGE}</option>
</select>
</div></div>
<div class="col-sm-3"><div class="form-group">
<select name="codeAlign" class="form-control input-sm">
	<option value="left" selected="selected">{L_ALIGN}</option>
	<option value="left">&nbsp;{L_LEFT}</option>
	<option value="right">&nbsp;{L_RIGHT}</option>
	<option value="center">&nbsp;{L_CENTER}</option>
	<option value="justify">&nbsp;{L_JUSTIFY}</option>
</select>
</div></div>
</div>
</div>

<div class="col-md-4">
<div class="btn-group btn-group-sm">
	<button class="btn btn-default" type="button" name="codeHR" title="{L_HOR_LINE}">&#8212;</button>
	<button class="btn btn-default" type="button" name="codeBR" title="{L_NEW_LINE}">&para;</button>
	<button class="btn btn-default" type="button" name="codeSpoiler" title="{L_SPOILER}">{L_SPOILER}</button>
</div>
<div class="btn-group btn-group-sm pull-right">
	<button class="btn btn-default" type="button" onclick="$('#message').css({height: parseInt($('#message').css('height')) + 100}); return false;"><i class="fa fa-plus"></i></button>
	<button class="btn btn-default" type="button" onclick="$('#message').css({height: parseInt($('#message').css('height')) - 100}); return false;"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>
<!-- ENDIF / !QUICK_REPLY -->

<div class="row">
<div class="col-md-12">
<ul class="quick-toolbar">
	<li>
		<div class="btn-group">
		<input type="button" class="btn btn-sm btn-default" value="B" name="codeB" title="{L_BOLD}" style="font-weight: bold;">
		<input type="button" class="btn btn-sm btn-default" value="i" name="codeI" title="{L_ITALIC}" style="font-style: italic;">
		<input type="button" class="btn btn-sm btn-default" value="u" name="codeU" title="{L_UNDERLINE}" style="text-decoration: underline;">
		<input type="button" class="btn btn-sm btn-default" value="s" name="codeS" title="{L_STRIKEOUT}" style="text-decoration: line-through;">
		</div>
	</li>
	<li>
		<div class="btn-group">
		<input type="button" class="btn btn-sm btn-default" value="{L_QUOTE}" name="codeQuote" title="{L_QUOTE_TITLE}">
		<input type="button" class="btn btn-sm btn-default" value="Img" name="codeImg" title="{L_IMG_TITLE}">
		<input type="button" class="btn btn-sm btn-default" value="{L_URL}" name="codeUrl" title="{L_URL_TITLE}" style="text-decoration: underline;">
		</div>
	</li>
	<li>
		<div class="btn-group">
		<input type="button" class="btn btn-sm btn-default" value="{L_CODE}" name="codeCode" title="{L_CODE_TITLE}">
		<input type="button" class="btn btn-sm btn-default" value="{L_LIST}" name="codeList" title="{L_LIST_TITLE}">
		<input type="button" class="btn btn-sm btn-default" value="1." name="codeOpt" title="{L_LIST_ITEM}">
		</div>
	</li>
	<li>
		<div class="btn-group">
		<input type="button" class="btn btn-sm btn-default" value="{L_QUOTE_SEL}" name="quoteselected" title="{L_QUOTE_SELECTED}" onclick="bbcode.onclickQuoteSel();" />
		</div>
	</li>
</ul>
</div>
</div>

<textarea
	class="form-control" name="message" id="message" rows="5"
	onfocus  = "storeCaret(this);"
	onselect = "storeCaret(this);"
	onclick  = "storeCaret(this);"
	onkeyup  = "storeCaret(this);"
>{MESSAGE}</textarea>

<div class="pull-right" style="margin-bottom: 10px; margin-top: 10px;">
	<div id="post-buttons-block" style="display: none;">
		<input onclick="submitted = true;" title="Ctrl+Enter" type="submit" name="post" class="btn btn-primary" value="{L_SUBMIT}" id="post-submit-btn">
		<input type="button" class="btn btn-default" value="{L_AJAX_PREVIEW}" onclick="ajax.exec({ action: 'posts', type: 'view_message', message: $('textarea#message').val()});">
		<input type="submit" class="btn btn-default" name="preview" value="{L_PREVIEW}" id="post-preview-btn" onclick="$('#post-submit').remove();">
		<div>{CAPTCHA_HTML}</div>
	</div>
	<div id="post-js-warn">{L_JAVASCRIPT_ON}</div>
</div>

</div></div>
<script type="text/javascript">
function dis_submit_btn ()
{
	$('#post-submit-btn').attr('disabled', 1);
}

function debounce (el_id, time_ms)
{
	var $el = $('#'+el_id);
	if ( $el.attr('disabled') == false ) {
		$el.attr('disabled', 1);
		setTimeout(function(){ $el.attr('disabled', 0); }, time_ms);
	}
}

$('#post-submit-btn').click(function(event){
	$('#post-submit-btn').after('<input id="post-submit" type="hidden" name="post" value="1" />');
});
$('#post-js-warn').hide();
$('#post-buttons-block').show();
$('#post-submit-btn').removeAttr('disabled');

// Called before form submitting.
var submitted = false;

function checkForm(form) {
	var formErrors = false;
	if (form.message.value.length < 2) {
		formErrors = "{L_EMPTY_MESSAGE}";
	}
	if (formErrors) {
		setTimeout(function() { alert(formErrors) }, 100);
		return false;
	}
<!-- IF QUICK_REPLY -->
<!-- IF IN_PM -->
<!-- ELSE -->
<!-- IF $bb_cfg['use_ajax_posts'] && !IS_GUEST -->
	if(form.message.value.length < 100 && submitted)
	{
		setTimeout(function() {
			if ($('input[name="notify"]').attr('checked') == 'checked') {
				var notify = 1;
			}

			ajax.exec({
				action   : 'posts',
				type     : 'add',
				message  : $('textarea#message').val(),
				topic_id : {TOPIC_ID},
				notify   : notify,
			});
		}, 100);
		return false;
	}
<!-- ENDIF -->
<!-- ENDIF -->
<!-- ENDIF -->
	return true;
}
</script>

<script type="text/javascript">
var bbcode = new BBCode("message");
var ctrl = "ctrl";

bbcode.addTag("codeB", "b", null, "B", ctrl);
bbcode.addTag("codeI", "i", null, "I", ctrl);
bbcode.addTag("codeU", "u", null, "U", ctrl);
bbcode.addTag("codeS", "s", null, "S", ctrl);

bbcode.addTag("codeQuote", "quote", null, "Q", ctrl);
bbcode.addTag("codeImg", "img", null, "R", ctrl);
bbcode.addTag("codeUrl", "url", "/url", "W", ctrl);

bbcode.addTag("codeCode", "code", null, "K", ctrl);
bbcode.addTag("codeList",  "list", null, "L", ctrl);
bbcode.addTag("codeOpt", "*", "", "0", ctrl);
</script>

<!-- IF QUICK_REPLY -->
<!-- ELSE -->
<script type="text/javascript">
bbcode.addTag("codeHR",      "hr",      "",   "8", ctrl);
bbcode.addTag("codeBR",      "br",      "",   "",  ctrl);
bbcode.addTag("codeSpoiler", "spoiler", null, "",  ctrl);

bbcode.addTag("fontFace", function(e) { var v=e.value; e.selectedIndex=0; return "font=\""+v+"\"" }, "/font");
bbcode.addTag("codeColor", function(e) { var v=e.value; e.selectedIndex=0; return "color="+v }, "/color");
bbcode.addTag("codeSize", function(e) { var v=e.value; e.selectedIndex=0; return "size="+v }, "/size");
bbcode.addTag("codeAlign", function(e) { var v=e.value; e.selectedIndex=0; return "align="+v }, "/align");
</script>
<!-- ENDIF -->