var editor_template = `
<style>

.active_editor_btn{
  background-color:red;
}

.active_editor_btn:hover{
  background-color:red;
}
.active_editor_btn:visited{
  background-color:red;
}

.active_editor_btn:active{
  background-color:red;
}

.active_editor_btn:focus{
  background-color:red;
}

</style>

<div id="editor_modal" class="modal top fade" style="z-index:10000;">

  <div class="modal-dialog modal-fullscreen p-0 p-md-3 p-xl-5">
    <div class="modal-content">

      <div class="modal-header">
        <h5 class="modal-title" id="editor_title">Bearbeiten</h5>
      </div>

      <div class="modal-body d-flex flex-column">

        <div id="editor_div" style="flex-grow: 1;">
          <canvas id="editor_canvas" ></canvas>
        </div>


        <div id="editor_toolbar_wrapper"  style="flex-shrink: 0;overflow-x:auto;">

          <div id="editor_toolbar" style="width:100%;min-width:700px;background-color:#b9b9b9" class="pt-2">

              <div id="btn_toolbar_wrapper"  style="display: flex; justify-content: center; align-items: center;">

                <div class="btn-toolbar">

                    <div class="btn-group" role="group" aria-label="First group">

                      <button id="line" type="button" class="btn btn-secondary" onclick="draw_line();"><span class="bi bi-slash-lg"></span> Gerade</button>

                      <button id="free_hand" type="button" class="btn btn-secondary" onclick="draw_free_hand();"><span class="bi bi-pen"></span> Stift</button>

                      <button id="insert_text" type="button" class="btn btn-secondary" onclick="insert_text()"><span class="bi bi-fonts"></span> Text</button>

                      <button id="show_obj" type="button" class="btn btn-secondary active_editor_btn" onclick="show_objects()" ><span class="bi bi-pin-map"></span> Objekte einfügen</button>

                    </div>

                    <div class="btn-group ps-2" role="group" aria-label="Second group">

                      <button id="del" type="button" class="btn btn-secondary" onclick="delete_obj();" disabled><span class="bi bi-trash"></span> Entfernen</button>

                    </div>

                    <div class="btn-group ps-2" role="group" aria-label="Third group">

                      <button id="zoomIn" type="button" class="btn btn-secondary" onclick="zoom_in()"><span class="bi bi-plus"></span></button>

                      <button id="zoomOut" type="button" class="btn btn-secondary" onclick="zoom_out()"><span class="bi bi-dash"></span></button>

                    </div>

                    <div class="btn-group ps-2" role="group">
                      <button id="redo" type="button" class="btn btn-secondary" onclick="redo()"><span class="bi bi-arrow-counterclockwise"></span></button>
                    </div>

                </div>

              </div>

              <div id="insert_wrapper" style="display: flex; justify-content: center; align-items: center;height:100px;overflow-y:hidden;">

                <div id="tools_images" style="display: inline-flex;" >
                    <div style="height:60px;margin-right: 20px;">
                        <img src="/img/editor/1.png" style="height:100%;" onclick="add_icon('/img/editor/1.png');" >
                    </div>
                    <div style="height:60px;margin-right: 20px;">
                        <img src="/img/editor/2.png" style="height:100%;" onclick="add_icon('/img/editor/2.png');" >
                    </div>
                    <div style="height:60px;margin-right: 20px;">
                        <img src="/img/editor/3.png" style="height:100%;" onclick="add_icon('/img/editor/3.png');" >
                    </div>
                    <div style="height:60px;margin-right: 20px;">
                        <img src="/img/editor/4.png" style="height:100%;" onclick="add_icon('/img/editor/4.png');" >
                    </div>
                    <div style="height:60px">
                        <img src="/img/editor/5.png" style="height:100%;" onclick="add_icon('/img/editor/5.png');" >
                    </div>
                </div>

              <div id="tools_color_bold" class="row justify-content-center align-items-center" style="display:none !important;width:100%">

                <div id="color_input" class="col-auto d-flex align-items-center">
                  <label for="editor_pen_color" class="form-label me-2" style="color:#000;font-weight:bold">Farbe:</label>
                  <input type="color" id="editor_pen_color" value="#DC143C" title="Farbe wählen" style="border:1px solid #ccc; border-radius: .2rem; width: 40px;" oninput="editor_change_color()">
                </div>

                <div id="size_input" class="col col-sm-8 col-md-8 col-xl-4 d-flex align-items-center">
                  <label id="editor_pen_size_label" class="form-label me-2" style="color:#000;font-weight:bold; white-space: nowrap;">Größe: 20</label>
                  <input type="range" class="form-range" min="1" max="100" id="editor_pen_size" onchange="change_editor_pen_size()" style="flex-grow: 1;" value="20">
                </div>

              </div>

            </div>

          </div>

        </div>

      </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-primary prev_pdf" onclick="save_image_from_editor(false);remove_imageeditor_instanz();open_viewer(window.current_pdf_page - 1);">Vorherige PDF Seite</button>
        <button type="button" class="btn btn-primary next_pdf" onclick="save_image_from_editor(false);remove_imageeditor_instanz();open_viewer(window.current_pdf_page + 1);">Nächste PDF Seite</button>

        <button type="button" class="btn btn-secondary back_to_pdf" onclick="back_to_pdf_overview();">Schließen</button>
        <button type="button" class="btn btn-secondary back_to_upload" onclick="back_to_upload_overview();">Schließen</button>

        <button type="button" class="btn btn-primary save_editor_btn" onclick="save_image_from_editor(true);">Speichern</button>
      </div>
    </div>
  </div>
</div>


`;