<div class="helptool-edit" id="helptool-popover">
  <h3 class="popover-title">
    <i class="fa fa-external-link"></i>
    <translate ng-if="editingHelpTool">portals.help.editTitle</translate>
    <translate ng-if="!editingHelpTool">portals.help.addTitle</translate>
  </h3>
  <div class="popover-content">
    <div class="title">
      <label for="helpTool-title">
        <translate>common.title</translate>
      </label>
      <input
        id="helpTool-title"
        ng-model="helpTool.title"
        type="text"
        class="form-control"
      />
    </div>
    <div class="titlefirst">
      <label>
        <translate>portals.help.titleFirst</translate>
      </label>
      <div class="radio-container">
        <div>
          <input
            id="titlefirst"
            name="titlePosition"
            ng-model="helpTool.titleFirst"
            ng-value="true"
            type="radio"
          />
          <label for="titlefirst">
            <translate>portals.help.above</translate>
          </label>
        </div>
        <div>
          <input
            id="titlelast"
            name="titlePosition"
            ng-model="helpTool.titleFirst"
            ng-value="false"
            type="radio"
          />
          <label for="titlelast">
            <translate>portals.help.below</translate>
          </label>
        </div>
      </div>
    </div>
    <div class="dropzone-image">
      <div
        class="dropzone-container"
        drop-action="/services/{portalid}/file/uploadProcess"
        dropzone-mem-share="dzMemShare"
        dropzone-title="ngDropZone.impImgJasperTitle"
        extension=".png,.jpg,.jpeg,.gif"
        max-filesize="6000"
        ng-drop-zone
        process-id="uploadProcessID"
        remove-action="/services/{portalid}/file/removeUploaded"
      ></div>
      <div
        class="image-name-container"
        ng-if="dzMemShare.dropzoneComponent.files && dzMemShare.dropzoneComponent.files.length === 1"
      >
        <span>
          <translate>portals.help.uploadedImage</translate>
        </span>
        <span class="image-name">
          {{dzMemShare.dropzoneComponent.files.length === 1
          ? dzMemShare.dropzoneComponent.files[0].name : ''}}
        </span>
      </div>
    </div>
    <div class="url">
      <label>
        <translate>model.featuretypes.actions.url</translate>
      </label>
      <input
        class="form-control"
        id="helptoolurl"
        ng-model="helpTool.url"
        type="text"
      />
    </div>
    <div class="buttons">
      <button
        class="btn btn-default"
        ng-click="cancelEditHelpTool()"
        title="{{'portals.help.cancelEdit' | translate}}"
      >
        <translate>common.cancel</translate>
      </button>
      <button
        class="btn btn-primary"
        ng-click="appendHelpTool()"
        ng-disabled="!helpTool.url || !helpTool.title"
        title="{{'portals.help.saveEdit' | translate}}"
      >
        <translate>common.save</translate>
      </button>
    </div>
  </div>
</div>