<div
  id="{{iddiv}}"
  class="popup popupContainer gcPopup"
  ng-class="options.className"
  role="tablist"
  aria-multiselectable="true"
>
  <div
    ng-mousemove="checkElement($event)"
    ng-mouseenter="activateDrag($event);"
    ng-mousedown="makeItFocused()"
    class="panel popupPanel ga-draggable"
    style="min-width: 200px; position: absolute; margin: 0px;"
    ga-draggable
    drag-active="{{!isMaximized && !resizeEnabled && isHeader}}"
    ga-draggable-zone="#{{iddiv}}zone"
    drag-popup="dragPopup"
    ng-style="popupInitStyle"
  >
    <div
      ng-if="(!isMaximized && !isTab) && options.resizable"
      ng-mouseleave="toggleResize($event, false)"
      ng-mouseenter="toggleResize($event, true)"
      class="resizeSide topResize"
    ></div>
    <div
      ng-if="(!isMaximized && !isTab) && options.resizable"
      ng-mouseleave="toggleResize($event, false)"
      ng-mouseenter="toggleResize($event, true)"
      class="resizeSide rightResize"
    ></div>
    <div
      ng-if="(!isMaximized && !isTab) && options.resizable"
      ng-mouseleave="toggleResize($event, false)"
      ng-mouseenter="toggleResize($event, true)"
      class="resizeSide bottomResize"
    ></div>
    <div
      ng-if="(!isMaximized && !isTab) && options.resizable"
      ng-mouseleave="toggleResize($event, false)"
      ng-mouseenter="toggleResize($event, true)"
      class="resizeSide leftResize"
    ></div>
    <div class="headerpopup ga-draggable-zone" role="tab" id="{{iddiv}}zone">
      <span class="popupName" ng-bind-html="options.title"></span>
      <div class="buttonsContainer" ng-if="options.showClose || options.minimizeMaximize">
        <button
          class="btn btn-xs closebtn"
          ng-if="options.showClose"
          ng-click="close(iddiv);options.onClose()"
        >
          <span>
            <i class="fa fa-close"></i>
          </span>
        </button>

        <button
          ng-if="!isMaximized && options.minimizeMaximize"
          class="btn btn-xs reducebtn minMaxButton"
          ng-click="maximize()"
        >
          <span>▢</span>
        </button>

        <button
          ng-if="isMaximized && options.minimizeMaximize"
          class="btn btn-xs reducebtn minMaxButton"
          ng-click="normalize()"
        >
          <span>❐</span>
        </button>

        <button
          ng-if="options.minimizeMaximize"
          ng-click="makeItTab()"
          class="btn btn-xs reducebtn"
        >
          <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
        </button>
      </div>
    </div>
    <div class="panel-collapse" role="tabpanel">
      <div class="panel-body">
        <div
          ng-if="options.template"
          ng-include="options.template"
          class="popup-template"
        ></div>
        <div
          class="popupContent"
          ng-if="options.content"
          ng-style="{'min-width': (options.minWidth - 30) + 'px', 'min-height':(options.minHeight - 30) + 'px', 'max-width': (options.maxWidth -30) + 'px', 'max-height': (options.maxHeight - 30) + 'px'}"
        ></div>
      </div>
    </div>
  </div>
</div>
