<div style="margin-left: 14px;">
  <div
    class="row"
    ng-class="[widthOfDiv]"
    ng-if="defaultDbParam && defaultDbParam.data && defaultDbParam.data.name"
  >
    <div class="col-md-12" ng-class="[sizeOfText]">
      <label ng-class="[sizeOfText]">{{message.default}}</label>&nbsp; {{
      defaultDbParam.data.name }}
      <!--                <label translate ng-class="[sizeOfText]">layermanager.defaultMapModel</label>&nbsp; {{ defaultDbParam.data.name }}
-->
    </div>
  </div>

  <div class="row" ng-class="[widthOfDiv]">
    <div class="col-md-12">
      <div class="col-md-10" style="padding:0;">
        <input
          type="text"
          ng-model="paramDataName"
          placeholder="{{messages.dbParamName}}"
          ng-class="[sizeOfText]"
          class="form-control"
        />
      </div>
      <div class="col-md-2" style="padding:0;">
        <button
          type="button"
          ng-click="addDbParam()"
          ng-disabled="!paramDataName || ( dbParams && dbParams.length > 0 && nameexists(paramDataName) ) "
          title="{{messages.addDbParam}}"
          class="btn btn-success btn-md"
        >
          <i class="fa fa-save"></i>
        </button>
      </div>
    </div>
    <div
      class="col-md-12"
      ng-if="dbParams && dbParams.length > 0 && nameexists(paramDataName)"
    >
      <div
        class="alert inlinealert alert-danger"
        ng-if="dbParams && dbParams.length > 0 && nameexists(paramDataName)"
      >
        <p>message.name_exists</p>
      </div>
    </div>
  </div>

  <br />

  <div
    class="row"
    ng-class="[widthOfDiv]"
    style="max-height:300px;overflow-y:auto;"
  >
    <div class="col-md-12" ng-repeat="paramData in dbParams | orderBy:'name'">
      <div
        class="input-group"
        style="padding:0; background-color: #e6e6e6;"
        ng-class="{ 'mapmodel-default' : paramData.id === selected.id }"
      >
        <span ng-class="{ 'mapmodel-default' : paramData.id === selected.id }">
          <label ng-class="[sizeOfText]">{{paramData.name}} </label>
        </span>
        <!--
                        <input type="text"
                               ng-model="paramData.name"
                               placeholder="{{ 'layermanager.mapModelName' | translate }}"
                               class="form-control"
                               ng-class="[sizeOfText]">
                           -->
        <span class="input-group-btn">
          <span
            ng-class="{ 'mapmodel-default' : paramData.id === selected.id }"
          >
            <button
              type="button"
              ng-click="setDefaultDbParam(paramData)"
              title="{{messages.setDefault}}"
              ng-class="[cmdHorizPadding]"
              class="btn btn-default btn-md"
            >
              <!--
                                    ng-class="[cmdHorizPadding,{ 'mapmodel-default' : paramData.id === selected.id }]"
                                    -->
              <i
                class="fa"
                ng-class="{ 'fa-check' : paramData.id === defaultDbParam.data.id,
                                        'fa-close' : paramData.id !== defaultDbParam.data.id
                                        }"
              ></i>
            </button>
          </span>
          <span
            publish-param
            ng-hide="currentuser.login != paramData.login"
            gcclass="{{cmdHorizPadding}}"
            param="paramData"
            ng-class="{ 'mapmodel-default' : paramData.id === selected.id }"
          >
          </span>

          <span
            ng-class="{ 'mapmodel-default' : paramData.id === selected.id }"
          >
            <!--
                                <button type="button" ng-click="getOriginalParamData(paramData.id);setParamData({paramData:paramData.data});selected.id = paramData.id;"
                                -->
            <button
              type="button"
              ng-click="thisSetParam(paramData.id);"
              ng-disabled="!paramData.name"
              title="{{messages.getDbParam}}"
              ng-class="[cmdHorizPadding]"
              class="btn btn-default btn-md"
            >
              <i class="fa fa-arrows"></i>
            </button>
          </span>
          <span
            ng-class="{ 'mapmodel-default' : paramData.id === selected.id }"
          >
            <button
              type="button"
              ng-click="updateParamData(paramData)"
              ng-hide="currentuser.login != paramData.login"
              ng-disabled="!paramData.name"
              title="{{messages.updateDbParam}}"
              ng-class="[cmdHorizPadding]"
              class="btn btn-default btn-md"
            >
              <i class="fa fa-save"></i>
            </button>
          </span>
          <button
            type="button"
            ng-click="removeDbParam(paramData)"
            ng-hide="currentuser.login != paramData.login"
            ng-disabled="!paramData.name"
            title="{{ 'common.delete' | translate }}"
            ng-class="[cmdHorizPadding]"
            class="btn btn-danger btn-md"
          >
            <i class="fa fa-trash"></i>
          </button>
        </span>
      </div>
    </div>
  </div>
</div>
