
<div class="modal-map">
  <leaflet
    width="100%"
    height="600"
    bounds="map.bounds"
    center="map.center"
    markers="map.markers"
    paths="map.paths"
    event-broadcast="map.events"
    defaults="map.defaults"
  ></leaflet>

  <div class="panel-map">
    <h3 id="modal-title" class="m-b-8">{{ title }}</h3>
    <p>
      <i c8y-icon="info-circle text-primary"></i>
      <translate>
        Click to add points and set the area. Drag the points to adjust.
      </translate>
    </p>
    <hr />
    <div class="form-group" id="modal-body">
      <form name="searchAddressForm" novalidate ng-submit="gotoAddress(searchAddress)">
        <div class="input-group input-group-search">
          <input
            type="text"
            ng-model="searchAddress"
            placeholder="{{ 'Enter address' | translate }}"
            class="form-control"
          />
          <span class="input-group-btn">
            <button class="btn btn-link" type="submit">
              <i c8y-icon="search"></i>
            </button>
          </span>
        </div>
      </form>
    </div>
    <button
      title="{{ 'Center map' | translate }}"
      class="btn btn-default btn-block"
      ng-click="centerMap()"
      ng-show="map.paths.geofencePath.latlngs.length > 0"
    >
      <i c8y-icon="dot-circle-o"></i>
      <translate>Center map</translate>
    </button>
    <button
      title="{{ 'Clear geofence' | translate }}"
      class="btn btn-danger btn-block"
      ng-click="clearGeofence()"
      ng-show="map.paths.geofencePath.latlngs.length > 0"
    >
      <i c8y-icon="delete"></i>
      <translate>Clear geofence</translate>
    </button>
    <hr />
    <button
      title="{{ 'Cancel' | translate }}"
      class="btn btn-default btn-block"
      ng-click="cancel()"
      translate
    >
      Cancel
    </button>
    <button
      title="{{ 'Save' | translate }}"
      class="btn btn-primary btn-block"
      ng-click="chooseGeofence()"
      ng-disabled="map.paths.geofencePath.latlngs === undefined || map.paths.geofencePath.latlngs.length < 3"
      translate
    >
      Save
    </button>
  </div>
</div>
