{% extends "forms/form.html" %}
{% load exfiltry %}
{% load exsyntax %}
{% block content %}
        <ptig-wysiwygedit width="100%" height="600px" namespace="{{uuid}}_c1">
                <div class="toolbar" slot="toolbar" style="display: flex; flex-wrap: wrap; gap: 6px; align-items: center;">
                        <button type="button" class="my-btn btn btn-outline-secondary" data-command="undo"><i class="fa fa-undo"></i></button>
                        <button type="button" class="my-btn btn btn-outline-secondary" data-command="redo">
                        <i class="fa fa-repeat"></i>
                        </button>
                        <div class="divider">
                        </div>
                        <button type="button" class="my-btn btn btn-outline-secondary" data-command="toggleBold" style="font-weight: bold;"><i class="fa fa-bold"></i></button>
                        <button type="button" class="my-btn btn btn-outline-secondary" data-command="toggleItalic" style="font-style: italic;"><i class="fa fa-italic"></i></button>
                        <button type="button" class="my-btn btn btn-outline-secondary" data-command="toggleStrike" style="text-decoration: line-through;"><i class="fa fa-strikethrough"></i></button>
                        <button type="button" class="my-btn btn btn-outline-secondary" data-command="toggleLink">
                        <i class="fa fa-link"></i>
                        </button>
                        <div class="divider">
                        </div>
                        <button type="button" class="my-btn btn btn-outline-secondary" data-command="toggleHeading" data-level="1"><i class="fa fa-header"></i>1</button>
                        <button type="button" class="my-btn btn btn-outline-secondary" data-command="toggleHeading" data-level="2">
                        <i class="fa fa-header"></i>2
                        </button>
                        <div class="divider">
                        </div>
                        <button type="button" class="my-btn btn btn-outline-secondary" data-command="toggleBulletList"><i class="fa fa-list-ul"></i></button>
                        <button type="button" class="my-btn btn btn-outline-secondary" data-command="toggleOrderedList">
                        <i class="fa fa-list-ol"></i>
                        </button>
                        <div class="divider">
                        </div>
                        <label class="color-picker">
                                <i class="fa fa-paint-brush"></i>: <input type="color" data-command-input="setColor" value="#000000">
                        </label>
                        <label class="color-picker">
                                <i class="fa fa-tint"></i>: <input type="color" data-command-input="setHighlight" value="#ffff00">
                        </label>
                        <div class="divider">
                        </div>
                        <label class="my-btn file-upload">
                                <i class="fa fa-folder-open-o"></i>
                                <input type="file" accept="image/*" data-command-file="insertImageFile">
                                </input>
                        </label>
                        <div class="divider">
                        </div>
                        <button type="button" class="my-btn btn btn-outline-secondary" data-command="insertTable"><i class="fa fa-table"></i></button>
                        <button type="button" class="my-btn btn btn-outline-secondary" data-command="addColumnAfter"><i class="fa fa-columns"></i>+</button>
                        <button type="button" class="my-btn btn btn-outline-secondary" data-command="deleteColumn"><i class="fa fa-columns"></i>-</button>
                        <button type="button" class="my-btn btn btn-outline-secondary" data-command="addRowAfter"><i class="fa fa-bars"></i>+</button>
                        <button type="button" class="my-btn btn btn-outline-secondary" data-command="deleteRow"><i class="fa fa-bars"></i>-</button>
                        <button type="button" class="my-btn btn btn-outline-secondary" data-command="deleteTable" style="color: red;">
                        <i class="fa fa-trash"></i>
                        </button>
                </div>
                <textarea name="text">Abracadabra abracadabra</textarea>
        </ptig-wysiwygedit>
        <br>
        </br>
        <ptig-wysiwygedit width="100%" height="600px" namespace="{{uuid}}_c2">
                <div class="toolbar" slot="toolbar" style="display: flex; flex-wrap: wrap; gap: 6px; align-items: center;">
                        <ptig-action-btn event-name="save_click" label="Save" namespace="{{uuid}}_c2"></ptig-action-btn>
                        <ptig-log-handler event-name="save" namespace="{{uuid}}_c2">
                        </ptig-log-handler>
                        <button type="button" class="my-btn btn btn-outline-secondary" data-command="undo"><i class="fa fa-undo"></i></button>
                        <button type="button" class="my-btn btn btn-outline-secondary" data-command="redo">
                        <i class="fa fa-repeat"></i>
                        </button>
                        <div class="divider">
                        </div>
                        <button type="button" class="my-btn btn btn-outline-secondary" data-command="toggleBold" style="font-weight: bold;"><i class="fa fa-bold"></i></button>
                        <button type="button" class="my-btn btn btn-outline-secondary" data-command="toggleItalic" style="font-style: italic;"><i class="fa fa-italic"></i></button>
                        <button type="button" class="my-btn btn btn-outline-secondary" data-command="toggleStrike" style="text-decoration: line-through;"><i class="fa fa-strikethrough"></i></button>
                </div>
        </ptig-wysiwygedit>
{% endblock %}