<!--
#   Copyright © 2021,2022 IsardVDI S.L.
#
#   This file is part of DD
#
#   DD is free software: you can redistribute it and/or modify
#   it under the terms of the GNU Affero General Public License as published by
#   the Free Software Foundation, either version 3 of the License, or (at your
#   option) any later version.
#
#   DD is distributed in the hope that it will be useful, but WITHOUT ANY
#   WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
#   FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
#   details.
#
#   You should have received a copy of the GNU Affero General Public License
#   along with DD. If not, see <https://www.gnu.org/licenses/>.
#
# SPDX-License-Identifier: AGPL-3.0-or-later
-->
<div class="form-group row">
  <div id="alerts"></div>
  <div
    class="btn-toolbar editor"
    data-role="editor-toolbar_{{ type }}"
    data-target="#editor-{{ type }}"
  >

    <div class="col-md-1 col-sm-1 ">
      <select id="{{type}}-lang" class="form-control">
        {% for lang in [{'text': 'Español', 'code': 'es'}, {'text': 'English', 'code': 'en'}, {'text': 'Català', 'code': 'ca'}, {'text': 'Français', 'code': 'fr'}] %}
        <option value="{{ lang['code'] }}">{{ lang['text'] }}</option>
        {% endfor %}
      </select>
    </div>

    <div class="btn-group">
      <a class="btn dropdown-toggle" data-toggle="dropdown" title="Font Size"
        ><i class="fa fa-text-height"></i>&nbsp;<b class="caret"></b
      ></a>
      <ul class="dropdown-menu">
        <li>
          <a data-edit="fontSize 5">
            <p style="font-size: 17px">Huge</p>
          </a>
        </li>
        <li>
          <a data-edit="fontSize 3">
            <p style="font-size: 14px">Normal</p>
          </a>
        </li>
        <li>
          <a data-edit="fontSize 1">
            <p style="font-size: 11px">Small</p>
          </a>
        </li>
      </ul>
    </div>

    <div class="btn-group">
      <a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"
        ><i class="fa fa-bold"></i
      ></a>
      <a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"
        ><i class="fa fa-italic"></i
      ></a>
      <a class="btn" data-edit="strikethrough" title="Strikethrough"
        ><i class="fa fa-strikethrough"></i
      ></a>
      <a class="btn" data-edit="underline" title="Underline (Ctrl/Cmd+U)"
        ><i class="fa fa-underline"></i
      ></a>
    </div>

    <div class="btn-group">
      <a class="btn" data-edit="insertunorderedlist" title="Bullet list"
        ><i class="fa fa-list-ul"></i
      ></a>
      <a class="btn" data-edit="insertorderedlist" title="Number list"
        ><i class="fa fa-list-ol"></i
      ></a>
      <a class="btn" data-edit="outdent" title="Reduce indent (Shift+Tab)"
        ><i class="fa fa-dedent"></i
      ></a>
      <a class="btn" data-edit="indent" title="Indent (Tab)"
        ><i class="fa fa-indent"></i
      ></a>
    </div>

    <div class="btn-group">
      <a class="btn" data-edit="justifyleft" title="Align Left (Ctrl/Cmd+L)"
        ><i class="fa fa-align-left"></i
      ></a>
      <a class="btn" data-edit="justifycenter" title="Center (Ctrl/Cmd+E)"
        ><i class="fa fa-align-center"></i
      ></a>
      <a class="btn" data-edit="justifyright" title="Align Right (Ctrl/Cmd+R)"
        ><i class="fa fa-align-right"></i
      ></a>
      <a class="btn" data-edit="justifyfull" title="Justify (Ctrl/Cmd+J)"
        ><i class="fa fa-align-justify"></i
      ></a>
    </div>

    <div class="btn-group">
      <a class="btn" data-edit="undo" title="Undo (Ctrl/Cmd+Z)"
        ><i class="fa fa-undo"></i
      ></a>
      <a class="btn" data-edit="redo" title="Redo (Ctrl/Cmd+Y)"
        ><i class="fa fa-repeat"></i
      ></a>
    </div>
  </div>

  <div id="editor-{{ type }}" type="{{ type }}" class="editor-wrapper"></div>

  <textarea name="descr" id="descr" style="display: none"></textarea>
</div>
