{% load static %}
<link rel="stylesheet" href="{% static 'company/css/md_editor.css' %}">
<div id="markdown-editor">
    <div class="toolbar">
        <div class="group">
            <button type="button" id="heading1">
                <i class="fa fa-header" aria-hidden="true"></i>1
            </button>
            <button type="button" id="heading2">
                <i class="fa fa-header" aria-hidden="true"></i>2
            </button>
            <button type="button" id="heading3">
                <i class="fa fa-header" aria-hidden="true"></i>3
            </button>
        </div>
        <div class="group">
            <button type="button" id="bold">
                <i class="fa fa-bold" aria-hidden="true"></i>
            </button>
            <button type="button" id="italic">
                <i class="fa fa-italic" aria-hidden="true"></i>
            </button>
        </div>
        <div class="group">
            <button type="button" id="link">
                <i class="fa fa-link" aria-hidden="true"></i>
            </button>
            <button type="button" id="list-ul">
                <i class="fa fa-list-ul" aria-hidden="true"></i>
            </button>
            <button type="button" id="list-ol">
                <i class="fa fa-list-ol" aria-hidden="true"></i>
            </button>
        </div>
        <button type="button" id="preview">Preview</button>
    </div>
    <div id="input-output">
        <textarea id="input-area" name="markdown-description" rows="30" cols="50">{{ markdown_value }}</textarea>
        <div id="output-area"></div>
        <p class="preview-message">Preview Mode</p>
    </div>
</div>
<script src="{% static 'company/js/md_editor.js' %}"></script>