<div style="width:300px;">
  <form>
    <input
      type="url"
      name="url"
      autocomplete="off"
      placeholder="{{'importwms.choose_wms_url' | translate}}"
      ng-model="fileUrl"
      required
      class="form-control"
    />
    <div class="ga-import-wms-open icon-collapse"></div>
    <button
      type="button"
      class="btn btn-default ga-import-wms-connect"
      ng-click="handleFileUrl()"
      translate
    >
      importwms.connect
    </button>
    <!--div>{{wmsConstraintsMessage ? wmsConstraintsMessage : userMessage}}</div-->
  </form>
  <div class="ga-import-wms-container">
    <table class="table-header table table-condensed">
      <thead>
        <tr>
          <th></th>
          <th ng-click="reverse = !reverse">
            <span class="pull-left" translate> Import wfs</span>
            <i class="pull-right icon-sort-by-alphabet" ng-hide="reverse"></i>
            <i
              class="pull-right icon-sort-by-alphabet-alt"
              ng-show="reverse"
            ></i>
          </th>
        </tr>
      </thead>
    </table>
    <div class="ga-import-wms-content" style="overflow:auto; height:250px">
      <table class="table table-striped table-hover table-condensed">
        <tbody>
          <tr
            ng-repeat="layer in layers | orderBy:'Title':reverse"
            class="
              {{(layerSelected.Name == layer.Name) ? 'success ' : ''}}
              {{(layerHovered.Name == layer.Name) ? 'pending ' : ''}}"
          >
            <td>
              <div ng-if="layer.loaded" class="text-center">
                <div
                  class="btn btn-xs btn-default"
                  ng-click="setVisibilityLayer(layer)"
                  title="{{'layermanager.visibility' | translate}}"
                >
                  <i
                    class="fa"
                    ng-class=" layer.visible ? 'fa-eye' : 'fa-eye-slash' "
                  ></i>
                </div>
                <div
                  class="btn btn-xs btn-default"
                  ng-click="zoomOnLayer(layer)"
                  title="{{'layermanager.zoomonlayer' | translate}}"
                >
                  <i class="fa fa-location-arrow"></i>
                </div>
              </div>

              <!-- <div class="icon-zoom-in" ng-click="zoomOnLayerExtent(layer)"></div>-->
            </td>
            <td
              ng-mouseover="addPreviewLayer(layer)"
              ng-mouseleave="removePreviewLayer()"
              ng-click="toggleLayerSelected(layer)"
            >
              {{layer.Title}}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div
      class="modal-backdrop fade in"
      ng-show="progress > 0 && progress < 100"
    >
      <div class="progress progress-striped active">
        <div class="progress-bar" style="width: 100%;"></div>
      </div>
    </div>
  </div>
  <div class="ga-import-wms-descr">
    <!--    <label translate>importwms.description</label>
        <textarea  placeholder="{{'description_instructions' | translate}}" class="form-control" readonly>
    {{(layerSelected) ? layerSelected.Abstract : layerHovered.Abstract}}</textarea>-->
    <button
      type="button"
      class="btn btn-default ga-import-wms-add"
      ng-disabled="layerSelected && layerSelected.loaded"
      ng-click="addLayerSelected()"
      translate
    >
      importwms.add_layer
    </button>
  </div>
</div>
