@**
* Yona, 21st Century Project Hosting SW
*
* Copyright Yona & Yobi Authors & NAVER Corp. & NAVER LABS Corp.
* https://yona.io
**@
@(editorName:String, textValue:String="", additionalAttr:String="", editorMode:String="content-body", viaEmail:Boolean=false)

@import org.apache.commons.lang3.RandomStringUtils._
@import utils.TemplateHelper._

@wrapIdGen = @{
    var split = editorName.split("-")
    if (split.length > 1) {
        split(1)
    } else {
        randomAlphabetic(8)
    }
}

@textareaName = @{
    var split = editorName.split("-")
    split(0)
}

@defining(wrapIdGen){ wrapId =>
<div data-toggle="markdown-editor" class="mt10">
    <ul class="nav nav-tabs nm small">
        <li class="active">
            <a href="#edit-@wrapId" data-toggle="tab" data-mode="edit">@Messages("common.editor.edit")</a>
        </li>
        <li>
            <a href="#preview-@wrapId" data-toggle="tab" data-mode="preview">@Messages("common.editor.preview")</a>
        </li>
        <li>
            <div class="task-list-button"><button type="button" class="add-task-list-button ybtn ybtn-small ybtn-danger-no-outline"><i class="yobicon-list task-list-icon"></i> @Messages("button.add.checklist")</button></div>
        </li>
        <li>
            <div class="editor-clear-temporary">
                <div class="editor-clear-temporary-button"><button type="button" id="button-clear-temporary" class="ybtn ybtn-small ybtn-warning">@Messages("button.clear.temporary")</button></div>
            </div>
        </li>
        <li>
            <div class="editor-notice-label"></div>
        </li>
    </ul>

    <div class="tab-content" style="position:relative;overflow: visible;">
        @help.markdown()

        <div id="edit-@wrapId" class="tab-pane active">
            <div class="textarea-box">
                <textarea name="@textareaName" class="editorSeries content comment nm" data-editor-mode="@editorMode" markdown="true" id="editor-@textareaName-@wrapId"
                    @additionalAttr>@textValue</textarea>
            </div>
        </div>

        <div id="preview-@wrapId" class="tab-pane">
            <div class="markdown-preview markdown-wrap @editorMode" data-via-email="@viaEmail"></div>
        </div>
        <div class="notification-receiver">
            <span class="notification-receiver-title">@Messages("notification.receiver.list.title")</span>
            <span class="notification-receiver-list"></span>
        </div>
    </div>
</div>
}