<tal:i18n omit-tag=""
          i18n:domain="ploneintranet"
>
  <textarea class="pat-tiptap"
            name="${view/name}"
            placeholder="${view/get_placeholder}"
            data-pat-tiptap="
        ${view/encoded_pattern_options}
        toolbar-external: #texteditor-toolbar-${view/name};
        link-panel: #pat-modal .link-panel;
        link-menu: #tiptap-context-menu-hyperlink--fieldname-${view/name};
        ${python: 'source-panel: #pat-modal .source-panel;' if view.show_source_button else ''}
        ${python: 'image-panel: #pat-modal.image-picker;' if view.show_image_button else ''}
        ${python: 'embed-panel: #pat-modal .embed-panel;' if view.show_embed_button else ''}
    "
  >${view/get_text}</textarea>

  <!-- modal source editor -->
  <template id="tiptap-modal-source-editor--fieldname-${view/name}"
        tal:condition="view/show_source_button">
    <h1>Edit Link</h1>
    <div class="panel-body source-panel">
      <div class="container">
        <div class="html-source-panel-content">
          <form>
            <textarea class="pat-autofocus"
                      name="tiptap-source"
            ></textarea>
          </form>
        </div>
        <div class="buttons button-bar pat-bumper"
             id="modal-button-bar"
        >
          <button class="pat-button default close-panel icon-ok-circle"
                  name="tiptap-confirm"
                  type="button"
                  i18n:translate=""
          >Apply</button>
          <button class="pat-button close-panel icon-cancel-circle"
                  type="button"
                  i18n:translate=""
          >Cancel</button>
        </div>
      </div>
    </div>
  </template>

  <!-- modal link editor -->
  <template id="tiptap-modal-hyperlink--fieldname-${view/name}">
    <h1>Edit Link</h1>
    <div class="panel-body link-panel">
      <div class="container">
        <form class="pat-form">
          <fieldset class="vertical">
            <fieldset class="group url">
              <legend i18n:translate="">URL</legend>
              <span class="button-field type-url">
                <input class="pat-autofocus"
                       name="tiptap-href"
                       oninput="if (this.value) { this.nextElementSibling.href = this.value; } else { this.nextElementSibling.removeAttribute('href'); }"
                       type="url"
                       value=""
                />
                <a class="follow"
                   id="event-url-follow-button"
                   href=""
                   target="_blank"
                   title="Visit linked web page"
                   i18n:attributes="title"
                   i18n:translate=""
                >Follow</a>
              </span>
            </fieldset>
            <label>
              <tal:i18n i18n:translate="">Link text</tal:i18n>
              <input name="tiptap-text"
                     type="text"
              />
            </label>
          </fieldset>
        </form>
        <div class="buttons button-bar pat-bumper"
             id="modal-button-bar"
        >
          <button class="pat-button default close-panel icon-ok-circle"
                  name="tiptap-confirm"
                  type="submit"
                  i18n:translate=""
          >Insert</button>
          <button class="pat-button close-panel icon-cancel-circle"
                  type="button"
                  i18n:translate=""
          >Cancel</button>
        </div>
      </div>
    </div>
  </template>

  <!-- context menu link -->
  <template id="tiptap-context-menu-hyperlink--fieldname-${view/name}">
    <ul class="menu tiptap-link-context-menu">
      <li>
        <a class="icon-link close-panel tiptap-open-new-link"
           href=""
           target="_blank"
           i18n:translate=""
        >Visit linked web page</a>
      </li>
      <li>
        <a class="icon-pencil close-panel tiptap-edit-link"
           i18n:translate=""
        >Edit link</a>
      </li>
      <li>
        <a class="icon-unlink close-panel tiptap-unlink"
           i18n:translate=""
        >Unlink</a>
      </li>
    </ul>
  </template>

  <template id="tiptap-modal-embed--fieldname-${view/name}"
        tal:condition="view/show_embed_button">
    <h1 i18n:translate="">Video</h1>
    <div class="panel-body embed-panel">
      <div class="container">
        <div class="embed-panel-content">
          <form class="pat-form">
            <fieldset class="vertical focus">
                <label>
                    <span tal:omit-tag="" i18n:translate="label_video_url_from_youtube_or_vimeo">Video URL from YouTube or Vimeo</span>
                    <input class="pat-autofocus" type="url" name="tiptap-src">
                </label>
                <label>
                    <span tal:omit-tag="" i18n:translate="label_caption">Caption</span>
                    <textarea
                        maxlength="200"
                        name="tiptap-caption"
                        placeholder="Write a caption for this video. (Optional)"
                        i18n:translate="message_write_caption_for_video"></textarea>
                </label>
              </fieldset>
            </form>
        </div>
        <div class="buttons button-bar pat-bumper"
             id="modal-button-bar"
        >
          <button class="pat-button default close-panel icon-ok-circle"
                  name="tiptap-confirm"
                  type="button"
                  i18n:translate=""
          >Apply</button>
          <button class="pat-button close-panel icon-cancel-circle"
                  type="button"
                  i18n:translate=""
          >Cancel</button>
        </div>
      </div>
    </div>
  </template>

</tal:i18n>
