<div class="map-model-mgr">
  <div
    class="row"
    ng-if="lasteditedMapModel && lasteditedMapModel.data && lasteditedMapModel.data.name"
  >
    <div class="col-md-12">
      <label translate>layermanager.defaultMapModel</label>&nbsp; {{lasteditedMapModel.data.name }}
    </div>
  </div>

  <div>
    <div class="header">
      <div class="new-map-model">
        <input
          type="text"
          ng-model="currentMapModel.name"
          placeholder="{{ 'layermanager.mapModelName' | translate }}"
          class="form-control"
        />
      </div>
      <div>
        <button
          type="button"
          ng-click="addMapModel()"
          ng-disabled="!currentMapModel.name || ( mapModels && mapModels.length > 0 && nameexists() ) "
          title="{{ 'layermanager.addMapModel' | translate }}"
          class="btn btn-success btn-md"
        >
          <i class="fa fa-save"></i>
        </button>
      </div>
    </div>
    <div
      class="col-md-12"
      ng-if="mapModels && mapModels.length > 0 && nameexists()"
    >
      <div
        class="alert inlinealert alert-danger"
        ng-if="mapModels && mapModels.length > 0 && nameexists()"
      >
        <p>
          <translate>layermanager.name_exists</translate>
        </p>
      </div>
    </div>
  </div>

  <br />

  <div class="row" style="max-height:300px;overflow-y:auto;">
    <div class="col-md-12" ng-repeat="mapModel in mapModels | orderBy:'name'">
      <div class="input-group" style="padding:0;">
        <input
          type="text"
          ng-model="mapModel.data.name"
          ng-disabled="true"
          placeholder="{{ 'layermanager.mapModelName' | translate }}"
          class="form-control"
          ng-class="{ 'mapmodel-active' : activeModel === mapModel.data.id}"
        />
        <span class="input-group-btn">
          <button
            type="button"
            ng-click="setDefaultMapModel(mapModel)"
            title="{{ 'layermanager.setDefaultMpdel' | translate }}"
            class="btn btn-default btn-md"
          >
            <i
              class="fa"
              ng-class="mapModel.data.id === lasteditedMapModel.data.id ? 'fa-check' : 'fa-close'"
              aria-hidden="true"
            ></i>
          </button>
          <span
            publish-param
            ng-hide="currentuser.login != mapModel.login"
            param="mapModel"
          ></span>

          <button
            type="button"
            ng-click="setMapModel(mapModel)"
            ng-disabled="!mapModel.data.name || activeModel === mapModel.data.id"
            title="{{ 'layermanager.getMapModel' | translate }}"
            class="btn btn-default btn-md"
          >
            <i class="fa fa-eye" aria-hidden="true"></i>
          </button>
          <button
            type="button"
            ng-click="updateMapModel(mapModel)"
            ng-hide="currentuser.login != mapModel.login"
            ng-disabled="!mapModel.data.name"
            title="{{ 'layermanager.upadateMapModel' | translate }}"
            class="btn btn-default btn-md"
          >
            <i class="fa fa-floppy-o" aria-hidden="true"></i>
          </button>
          <button
            type="button"
            ng-click="removeMapModel(mapModel)"
            ng-hide="currentuser.login != mapModel.login"
            ng-disabled="!mapModel.data.name"
            title="{{ 'common.delete' | translate }}"
            class="btn btn-danger btn-md"
          >
            <i class="fa fa-trash" aria-hidden="true"></i>
          </button>
        </span>
      </div>
    </div>
  </div>
</div>
