{% INCLUDECSS '@caforum_quickreply/quickreply.css' %}
{% INCLUDEJS '@caforum_quickreply/quickreply.js' %}

<script src="{{ T_ASSETS_PATH }}/javascript/editor.js"></script>

<script>
var form_name='qr_postform';
var text_name='message';

var bbtags=[
    '[b]','[/b]',
    '[i]','[/i]',
    '[u]','[/u]',
    '[quote]','[/quote]',
    '[code]','[/code]',
    '[list]','[/list]',
    '[list=]','[/list]',
    '[img]','[/img]',
    '[url]','[/url]',
    '[size=]','[/size]'
];

function change_palette()
{
    if(typeof phpbb!=='undefined')
    {
        phpbb.toggleDisplay('colour_palette');
    }
}
</script>

<div id="qr-lang"
    data-show="{L_QR_SHOW}"
    data-hide="{L_QR_HIDE}">
</div>

<div id="qr-config"
    data-toggle="{QR_TOGGLE_VALUE}">
</div>

<div id="colour_palette" style="display:none;">
    <dl>
        <dt><label>{L_QR_COLOR}{L_COLON}</label></dt>

        <dd id="color_palette_placeholder"
            class="color_palette_placeholder"
            data-color-palette="h"
            data-height="12"
            data-width="15"
            data-bbcode="true">
        </dd>
    </dl>
</div>

<div class="qr-editor <!-- IF not S_QR_SMILIES -->no-smilies<!-- ENDIF -->">

<div id="format-buttons" class="format-buttons">

    <button type="button"
        class="button button-icon-only bbcode-b"
        accesskey="b"
        name="addbbcode0"
        value=" B "
        onclick="bbstyle(0)"
        title="{L_QR_BBCODE_B}">
        <i class="icon fa fa-bold fa-fw"></i>
    </button>

    <button type="button"
        class="button button-icon-only bbcode-i"
        accesskey="i"
        name="addbbcode2"
        value=" i "
        onclick="bbstyle(2)"
        title="{L_QR_BBCODE_I}">
        <i class="icon fa fa-italic fa-fw"></i>
    </button>

    <button type="button"
        class="button button-icon-only bbcode-u"
        accesskey="u"
        name="addbbcode4"
        value=" u "
        onclick="bbstyle(4)"
        title="{L_QR_BBCODE_U}">
        <i class="icon fa fa-underline fa-fw"></i>
    </button>

    <button type="button"
        class="button button-icon-only bbcode-quote"
        accesskey="q"
        name="addbbcode6"
        value="Quote"
        onclick="bbstyle(6)"
        title="{L_QR_BBCODE_Q}">
        <i class="icon fa fa-quote-left fa-fw"></i>
    </button>

    <button type="button"
        class="button button-icon-only bbcode-code"
        accesskey="c"
        name="addbbcode8"
        value="Code"
        onclick="bbstyle(8)"
        title="{L_QR_BBCODE_C}">
        <i class="icon fa fa-code fa-fw"></i>
    </button>

    <button type="button"
        class="button button-icon-only bbcode-list"
        accesskey="l"
        name="addbbcode10"
        value="List"
        onclick="bbstyle(10)"
        title="{L_QR_BBCODE_L}">
        <i class="icon fa fa-list fa-fw"></i>
    </button>

    <button type="button"
        class="button button-icon-only bbcode-list-"
        accesskey="o"
        name="addbbcode12"
        value="List="
        onclick="bbstyle(12)"
        title="{L_QR_BBCODE_O}">
        <i class="icon fa fa-list-ol fa-fw"></i>
    </button>

    <button type="button"
        class="button button-icon-only bbcode-asterisk"
        accesskey="y"
        name="addlistitem"
        value="[*]"
        onclick="bbstyle(-1)"
        title="{L_QR_BBCODE_ITEM}">
        <i class="icon fa fa-asterisk fa-fw"></i>
    </button>

    <button type="button"
        class="button button-icon-only bbcode-img"
        accesskey="p"
        name="addbbcode14"
        value="Img"
        onclick="bbstyle(14)"
        title="{L_QR_BBCODE_IMG}">
        <i class="icon fa fa-image fa-fw"></i>
    </button>

    <button type="button"
        class="button button-icon-only bbcode-url"
        accesskey="w"
        name="addbbcode16"
        value="URL"
        onclick="bbstyle(16)"
        title="{L_QR_BBCODE_URL}">
        <i class="icon fa fa-link fa-fw"></i>
    </button>

    <button type="button"
        class="button button-icon-only bbcode-color"
        name="bbpalette"
        id="bbpalette"
        onclick="change_palette();"
        title="{L_QR_FONT_COLOR}">
        <i class="icon fa fa-tint fa-fw"></i>
    </button>

    <select name="addbbcode20"
        class="bbcode-size"
        onchange="bbfontstyle('[size=' + this.value + ']','[/size]');this.selectedIndex=2;"
        title="{L_QR_FONT_SIZE}">

        <option value="50">{L_QR_FONT_TINY}</option>
        <option value="85">{L_QR_FONT_SMALL}</option>
        <option value="100" selected>{L_QR_FONT_NORMAL}</option>
        <option value="150">{L_QR_FONT_LARGE}</option>
        <option value="200">{L_QR_FONT_HUGE}</option>

    </select>

</div>

<!-- IF S_QR_SMILIES -->

<div id="smiley-box" class="smiley-box">

    <!-- BEGIN smiley -->

    <a href="#"
        onclick="insert_text('{smiley.A_SMILEY_CODE}', true); return false;">

        <img src="{smiley.SMILEY_IMG}"
            width="{smiley.SMILEY_WIDTH}"
            height="{smiley.SMILEY_HEIGHT}"
            alt="{smiley.A_SMILEY_CODE}"
            title="{smiley.SMILEY_DESC}">

    </a>

    <!-- END smiley -->

</div>

<!-- ENDIF -->

</div>