<div ng-if="vm.isModbusTab() || vm.isCanBusTab()">
  <div class="row">
    <div class="col-lg-12 col-lg-max">
      <div ng-if="vm.shouldShowSerialPanel()">
        <div class="card">
          <div class="card-header separator">
            <div class="card-title" translate>Serial communication</div>
          </div>
          <div class="card-block p-b-0">
            <form name="vm.serialCommunicationForm">
              <div class="row">
                <div class="col-xs-12 col-md-6">
                  <div
                    class="form-group"
                    ng-class="{ 'has-error': vm.invalid('serialCommunicationForm', 'baudRate') }"
                  >
                    <label for="serialCommunicationBaudRate" translate>Baud rate</label>
                    <div class="c8y-select-wrapper">
                      <select
                        class="form-control"
                        id="serialCommunicationBaudRate"
                        name="baudRate"
                        ng-model="vm.serialConfiguration.baudRate"
                        ng-options="baudRate for baudRate in vm.serialConfigurationOptions.baudRates"
                        ng-disabled="!vm.hasSerialConfigOperation"
                        required
                      ></select>
                    </div>
                  </div>
                  <div
                    ng-if="vm.isModbusTab()"
                    class="form-group"
                    ng-class="{ 'has-error': vm.invalid('serialCommunicationForm', 'dataBits') }"
                  >
                    <label for="dataBits" translate>Data bits</label>
                    <div class="c8y-select-wrapper">
                      <select
                        class="form-control"
                        id="dataBits"
                        name="dataBits"
                        ng-model="vm.serialConfiguration.dataBits"
                        ng-options="dataBit for dataBit in vm.serialConfigurationOptions.dataBits"
                        ng-disabled="!vm.hasSerialConfigOperation"
                        required
                      ></select>
                    </div>
                  </div>
                </div>
                <div class="col-xs-12 col-md-6">
                  <div
                    ng-if="vm.isModbusTab()"
                    class="form-group"
                    ng-class="{ 'has-error': vm.invalid('serialCommunicationForm', 'parity') }"
                  >
                    <label for="parity" translate>Parity</label>
                    <div class="c8y-select-wrapper">
                      <select
                        class="form-control"
                        id="parity"
                        name="parity"
                        ng-model="vm.serialConfiguration.parity"
                        ng-options="parity for parity in vm.serialConfigurationOptions.parities"
                        ng-disabled="!vm.hasSerialConfigOperation"
                        required
                      ></select>
                    </div>
                  </div>
                  <div
                    ng-if="vm.isModbusTab()"
                    class="form-group"
                    ng-class="{ 'has-error': vm.invalid('serialCommunicationForm', 'stopBits') }"
                  >
                    <label for="stopBits" translate>Stop bits</label>
                    <div class="c8y-select-wrapper">
                      <select
                        class="form-control"
                        id="stopBits"
                        name="stopBits"
                        ng-model="vm.serialConfiguration.stopBits"
                        ng-options="stopBit for stopBit in vm.serialConfigurationOptions.stopBits"
                        ng-disabled="!vm.hasSerialConfigOperation"
                        required
                      ></select>
                    </div>
                  </div>
                </div>
              </div>
            </form>
          </div>
          <div class="card-footer separator" ng-if="vm.hasSerialConfigOperation">
            <button
              title="{{ 'Save' | translate }}"
              class="btn btn-primary"
              ng-click="vm.saveSerialConfig()"
              ng-disabled="vm.serialCommunicationForm.$invalid || vm.serialCommunicationForm.$pristine"
            >
              {{ 'Save' | translate }}
            </button>
          </div>
        </div>
      </div>

      <div class="card">
        <div class="card-header separator">
          <div class="card-title">
            <span ng-if="vm.isModbusTab()" translate>Modbus communication</span>
            <span ng-if="!vm.isModbusTab()" translate>CAN Bus communication</span>
          </div>
        </div>
        <div class="card-block p-b-0">
          <form name="vm.fieldbusCommunicationForm">
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <div
                  class="form-group modbusComInputs"
                  ng-class="{
                    'has-error': vm.invalid('fieldbusCommunicationForm', 'transmitRate')
                  }"
                >
                  <label for="transmitRate" translate>Transmit rate</label>
                  <div class="input-group">
                    <input
                      class="form-control"
                      type="number"
                      id="transmitRate"
                      name="transmitRate"
                      ng-model="vm.fieldbusConfiguration.transmitRate"
                      ng-disabled="!vm.hasFieldBusConfigOperation"
                      ng-min="1"
                      placeholder="{{ 'e.g.' | translate }} 1"
                      required
                    />
                    <span class="input-group-addon units" translate>seconds</span>
                  </div>
                  <c8y-messages>
                    <c8y-message
                      class="form-control-feedback-message"
                      ng-if="vm.invalid('fieldbusCommunicationForm', 'transmitRate')"
                    >
                      {{ vm.getFieldValidationHints(vm.fieldbusCommunicationForm.transmitRate) }}
                    </c8y-message>
                  </c8y-messages>
                </div>
                <div
                  ng-if="vm.isModbusTab()"
                  class="form-group modbusComInputs"
                  ng-class="{ 'has-error': vm.invalid('fieldbusCommunicationForm', 'pollingRate') }"
                >
                  <label for="pollingRate" translate>Polling rate</label>
                  <div class="input-group">
                    <input
                      class="form-control"
                      type="number"
                      id="pollingRate"
                      name="pollingRate"
                      ng-model="vm.fieldbusConfiguration.pollingRate"
                      ng-disabled="!vm.hasFieldBusConfigOperation"
                      ng-min="1"
                      placeholder="{{ 'e.g.' | translate }} 1"
                      required
                    />
                    <span class="input-group-addon units" translate>seconds</span>
                  </div>
                  <c8y-messages>
                    <c8y-message
                      class="form-control-feedback-message"
                      ng-if="vm.invalid('fieldbusCommunicationForm', 'pollingRate')"
                    >
                      {{ vm.getFieldValidationHints(vm.fieldbusCommunicationForm.pollingRate) }}
                    </c8y-message>
                  </c8y-messages>
                </div>
              </div>
              <div class="col-xs-12 col-md-6">
                <div
                  ng-if="vm.isModbusTab() && vm.fieldbusConfiguration.maxFieldbusVersion"
                  class="form-group modbusComInputs"
                >
                  <label for="maxFieldbusVersion" translate>Supported fieldbus version</label>
                  <p class="form-control-static">
                    {{ vm.fieldbusConfiguration.maxFieldbusVersion }}
                  </p>
                </div>
                <div
                  ng-if="!vm.isModbusTab()"
                  class="form-group"
                  ng-class="{ 'has-error': vm.invalid('fieldbusCommunicationForm', 'baudRate') }"
                >
                  <label for="fieldbusCommunicationBaudRate" translate>Baud rate</label>
                  <div class="c8y-select-wrapper">
                    <select
                      class="form-control"
                      id="fieldbusCommunicationBaudRate"
                      name="baudRate"
                      ng-model="vm.fieldbusConfiguration.baudRate"
                      ng-options="baudRate for baudRate in vm.serialConfigurationOptions.baudRates"
                      ng-disabled="!vm.hasFieldBusConfigOperation"
                      required
                    ></select>
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
        <div class="card-footer separator">
          <button
            title="{{ 'Save' | translate }}"
            ng-if="vm.hasFieldBusConfigOperation"
            class="btn btn-primary"
            ng-click="vm.saveFieldbusConfig()"
            ng-disabled="vm.fieldbusCommunicationForm.$invalid || vm.fieldbusCommunicationForm.$pristine"
          >
            {{ 'Save' | translate }}
          </button>
        </div>
      </div>
    </div>

    <div class="col-lg-12 col-lg-max">
      <div ng-repeat="mode in ['TCP', 'RTU', 'CAN']">
        <c8y-fieldbus-device-list
          tab="{{ vm.tab }}"
          mode="{{ mode }}"
          field-errors="vm.fieldErrors"
          field-errors-to-messages="vm.fieldErrorsToMessages"
          device-configuration-options="vm.deviceConfigurationOptions"
          device="vm.device"
          devices="vm.devices"
          reload-devices="vm.reloadDevices"
          on-click-delete="(vm.onClickDelete)"
          navigate-to-detail="vm.navigateToDetail"
        ></c8y-fieldbus-device-list>
      </div>
    </div>
  </div>
</div>

<div ng-if="vm.isOPCUATab()">
  <div class="row">
    <div class="col-lg-12 col-lg-max">
      <div class="card">
        <div class="card-header separator">
          <div class="h4" translate>OPC UA communication</div>
        </div>
        <form class="card-block p-b-0" name="vm.fieldbusCommunicationForm">
          <div class="row">
            <div class="col-lg-4">
              <div
                class="form-group"
                ng-class="{ 'has-error': vm.invalid('fieldbusCommunicationForm', 'OPCUAUrl') }"
              >
                <label for="OPCUAUrl" translate>URL</label>
                <input
                  class="form-control"
                  id="OPCUAUrl"
                  name="OPCUAUrl"
                  ng-model="vm.fieldbusConfiguration.url"
                  placeholder="{{
                    'e.g.' | translate
                  }} http://opcua.demo-this.com:51211/UA/SampleServer"
                  required
                />
                <c8y-messages>
                  <c8y-message
                    class="form-control-feedback-message"
                    ng-if="vm.invalid('fieldbusCommunicationForm', 'OPCUAUrl')"
                  >
                    {{ vm.getFieldValidationHints(vm.fieldbusCommunicationForm.OPCUAUrl) }}
                  </c8y-message>
                </c8y-messages>
              </div>
            </div>

            <div class="col-lg-4">
              <div class="form-group">
                <label for="OPCUAUsername" translate>Username</label>
                <input
                  class="form-control"
                  id="OPCUAUsername"
                  name="OPCUAUsername"
                  ng-model="vm.fieldbusConfiguration.userIdentityName"
                />
              </div>
              <div class="form-group">
                <label for="OPCUAPassword" translate>Password</label>
                <input
                  class="form-control"
                  type="password"
                  id="OPCUAPassword"
                  name="OPCUAPassword"
                  ng-model="vm.fieldbusConfiguration.userIdentityPassword"
                  c8y-autocomplete="new-password"
                />
              </div>
            </div>
            <div class="col-lg-4">
              <div
                class="form-group modbusComInputs"
                ng-class="{ 'has-error': vm.invalid('fieldbusCommunicationForm', 'transmitRate') }"
              >
                <label for="transmitRate" translate>Transmit rate</label>
                <div class="input-group">
                  <input
                    class="form-control"
                    type="number"
                    id="transmitRate"
                    name="transmitRate"
                    ng-model="vm.fieldbusConfiguration.transmitRate"
                    ng-min="0"
                    required
                  />
                  <span class="input-group-addon units" translate>seconds</span>
                </div>
                <c8y-messages>
                  <c8y-message
                    class="form-control-feedback-message"
                    ng-if="vm.invalid('fieldbusCommunicationForm', 'transmitRate')"
                  >
                    {{ vm.getFieldValidationHints(vm.fieldbusCommunicationForm.transmitRate) }}
                  </c8y-message>
                </c8y-messages>
              </div>

              <div
                class="form-group modbusComInputs"
                ng-class="{ 'has-error': invalid('fieldbusCommunicationForm', 'pollingRate') }"
              >
                <label for="pollingRate" translate>Polling rate</label>
                <div class="input-group">
                  <input
                    class="form-control"
                    type="number"
                    id="pollingRate"
                    name="pollingRate"
                    ng-model="vm.fieldbusConfiguration.pollingRate"
                    ng-min="1"
                    required
                  />
                  <span class="input-group-addon units" translate>seconds</span>
                </div>
                <c8y-messages>
                  <c8y-message
                    class="form-control-feedback-message"
                    ng-if="vm.invalid('fieldbusCommunicationForm', 'pollingRate')"
                  >
                    {{ vm.getFieldValidationHints(vm.fieldbusCommunicationForm.pollingRate) }}
                  </c8y-message>
                </c8y-messages>
              </div>
            </div>
          </div>
        </form>
        <div ng-if="vm.hasFieldBusConfigOperation" class="card-footer separator">
          <button
            title="{{ 'Save' | translate }}"
            class="btn btn-primary"
            ng-click="vm.saveFieldbusConfig()"
            ng-disabled="vm.fieldbusCommunicationForm.$invalid || vm.fieldbusCommunicationForm.$pristine"
          >
            {{ 'Save' | translate }}
          </button>
        </div>
      </div>
    </div>

    <c8y-fieldbus-device-list
      tab="{{ vm.tab }}"
      mode="OPCUA"
      field-errors="vm.fieldErrors"
      field-errors-to-messages="vm.fieldErrorsToMessages"
      device-configuration-options="vm.deviceConfigurationOptions"
      device="vm.device"
      devices="vm.devices"
      reload-devices="vm.reloadDevices"
      on-click-delete="(vm.onClickDelete)"
      navigate-to-detail="vm.navigateToDetail"
    ></c8y-fieldbus-device-list>
  </div>
</div>

<div ng-if="vm.isProfibusTab()" class="row">
  <div class="col-lg-12 col-lg-max">
    <div class="card">
      <div class="card-header separator">
        <div class="card-title" translate>Profibus communication</div>
      </div>
      <div class="card-block p-b-0">
        <form name="vm.fieldbusCommunicationForm">
          <div class="row">
            <div class="col-xs-12 col-md-4">
              <div class="form-group">
                <label for="baudRate" translate>Baud rate</label>
                <input
                  class="form-control"
                  id="baudRate"
                  name="baudRate"
                  ng-value="vm.fieldbusConfiguration.baudRate | translate"
                  readonly
                />
              </div>
            </div>
            <div class="col-xs-12 col-md-4">
              <div
                class="form-group"
                ng-class="{ 'has-error': vm.invalid('fieldbusCommunicationForm', 'transmitRate') }"
              >
                <label for="transmitRate" translate>Transmit rate</label>
                <div class="input-group">
                  <input
                    class="form-control"
                    type="number"
                    id="transmitRate"
                    name="transmitRate"
                    ng-model="vm.fieldbusConfiguration.transmitRate"
                    ng-disabled="!vm.hasFieldBusConfigOperation"
                    ng-min="1"
                    required
                  />
                  <span class="input-group-addon units" translate>seconds</span>
                </div>
                <c8y-messages>
                  <c8y-message
                    class="form-control-feedback-message"
                    ng-if="vm.invalid('fieldbusCommunicationForm', 'transmitRate')"
                  >
                    {{ vm.getFieldValidationHints(vm.fieldbusCommunicationForm.transmitRate) }}
                  </c8y-message>
                </c8y-messages>
              </div>
            </div>
            <div class="col-xs-12 col-md-4">
              <div
                class="form-group"
                ng-class="{ 'has-error': vm.invalid('fieldbusCommunicationForm', 'slaveAddress') }"
              >
                <label for="slaveAddress" translate>Slave address</label>
                <input
                  class="form-control"
                  type="number"
                  id="slaveAddress"
                  name="slaveAddress"
                  ng-model="vm.fieldbusConfiguration.slaveAddress"
                  ng-disabled="!vm.hasFieldBusConfigOperation"
                  ng-min="1"
                  ng-max="128"
                  ng-step="1"
                  required
                />
                <c8y-messages>
                  <c8y-message
                    class="form-control-feedback-message"
                    ng-if="vm.invalid('fieldbusCommunicationForm', 'slaveAddress')"
                  >
                    {{ vm.getFieldValidationHints(vm.fieldbusCommunicationForm.slaveAddress) }}
                  </c8y-message>
                </c8y-messages>
              </div>
            </div>
          </div>
        </form>
      </div>
      <div class="card-footer separator">
        <button
          title="{{ 'Save' | translate }}"
          ng-if="vm.hasFieldBusConfigOperation"
          class="btn btn-primary"
          ng-click="vm.saveFieldbusConfig()"
          ng-disabled="vm.fieldbusCommunicationForm.$invalid || vm.fieldbusCommunicationForm.$pristine"
        >
          {{ 'Save' | translate }}
        </button>
      </div>
    </div>
  </div>
  <div class="col-lg-8 col-xs-12">
    <c8y-fieldbus-device-list
      tab="{{ vm.tab }}"
      mode="Profibus"
      field-errors="vm.fieldErrors"
      field-errors-to-messages="vm.fieldErrorsToMessages"
      device-configuration-options="vm.deviceConfigurationOptions"
      device="vm.device"
      devices="vm.devices"
      reload-devices="vm.reloadDevices"
      on-click-delete="(vm.onClickDelete)"
      navigate-to-detail="vm.navigateToDetail"
    ></c8y-fieldbus-device-list>
  </div>
</div>
<div ng-if="vm.isCanOpenTab()" class="row">
  <div class="col-lg-12 col-lg-max">
    <div class="card-group m-b-0">
      <div class="col-lg-12 col-xs-12">
        <div class="card">
          <div class="card-header separator">
            <div class="card-title">
              <span translate>CANopen communication</span>
            </div>
          </div>
          <div class="card-block p-b-0">
            <form name="vm.fieldbusCommunicationForm">
              <div class="row">
                <div class="col-xs-12 col-md-4">
                  <div
                    ng-if="vm.isCanOpenTab()"
                    class="form-group"
                    ng-class="{ 'has-error': vm.invalid('fieldbusCommunicationForm', 'baudRate') }"
                  >
                    <label for="fieldbusCommunicationBaudRate" translate>Baud rate</label>
                    <div class="c8y-select-wrapper">
                      <select
                        class="form-control"
                        id="fieldbusCommunicationBaudRate"
                        name="baudRate"
                        ng-model="vm.fieldbusConfiguration.baudRate"
                        ng-options="baudRate.value as baudRate.label for baudRate in vm.fieldbusConfigurationOptions.baudRates"
                        ng-disabled="!vm.hasFieldBusConfigOperation"
                        required
                      ></select>
                    </div>
                    <c8y-messages>
                      <c8y-message
                        class="form-control-feedback-message"
                        ng-if="vm.invalid('fieldbusCommunicationForm', 'baudRate')"
                      >
                        {{ vm.getFieldValidationHints(vm.fieldbusCommunicationForm.baudRate) }}
                      </c8y-message>
                    </c8y-messages>
                  </div>
                </div>
                <div class="col-xs-12 col-md-4">
                  <div
                    class="form-group modbusComInputs"
                    ng-class="{
                      'has-error': vm.invalid('fieldbusCommunicationForm', 'transmitRate')
                    }"
                  >
                    <label for="transmitRate" translate>Transmit rate</label>
                    <div class="input-group">
                      <input
                        class="form-control"
                        type="number"
                        id="transmitRate"
                        name="transmitRate"
                        ng-model="vm.fieldbusConfiguration.transmitRate"
                        ng-disabled="!vm.hasFieldBusConfigOperation"
                        ng-min="1"
                        placeholder="{{ 'e.g.' | translate }} 1"
                        required
                      />
                      <span class="input-group-addon units" translate>seconds</span>
                    </div>
                    <c8y-messages>
                      <c8y-message
                        class="form-control-feedback-message"
                        ng-if="vm.invalid('fieldbusCommunicationForm', 'transmitRate')"
                      >
                        {{ vm.getFieldValidationHints(vm.fieldbusCommunicationForm.transmitRate) }}
                      </c8y-message>
                    </c8y-messages>
                  </div>
                </div>
                <div class="col-xs-12 col-md-4">
                  <div
                    ng-if="vm.isCanOpenTab()"
                    class="form-group modbusComInputs"
                    ng-class="{
                      'has-error': vm.invalid('fieldbusCommunicationForm', 'pollingRate')
                    }"
                  >
                    <label for="pollingRate" translate>Polling rate</label>
                    <div class="input-group">
                      <input
                        class="form-control"
                        type="number"
                        id="pollingRate"
                        name="pollingRate"
                        ng-model="vm.fieldbusConfiguration.pollingRate"
                        ng-disabled="!vm.hasFieldBusConfigOperation"
                        ng-min="1"
                        placeholder="{{ 'e.g.' | translate }} 1"
                        required
                      />
                      <span class="input-group-addon units" translate>seconds</span>
                    </div>
                    <c8y-messages>
                      <c8y-message
                        class="form-control-feedback-message"
                        ng-if="vm.invalid('fieldbusCommunicationForm', 'pollingRate')"
                      >
                        {{ vm.getFieldValidationHints(vm.fieldbusCommunicationForm.pollingRate) }}
                      </c8y-message>
                    </c8y-messages>
                  </div>
                </div>
              </div>
            </form>
          </div>
          <div class="card-footer separator">
            <button
              title="{{ 'Save' | translate }}"
              ng-if="vm.hasFieldBusConfigOperation"
              class="btn btn-primary"
              ng-click="vm.saveFieldbusConfig()"
              ng-disabled="vm.fieldbusCommunicationForm.$invalid || vm.fieldbusCommunicationForm.$pristine"
            >
              {{ 'Save' | translate }}
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-lg-12 col-lg-max">
    <c8y-fieldbus-device-list
      tab="{{ vm.tab }}"
      mode="CANopen"
      field-errors="vm.fieldErrors"
      field-errors-to-messages="vm.fieldErrorsToMessages"
      device-configuration-options="vm.deviceConfigurationOptions"
      device="vm.device"
      devices="vm.devices"
      reload-devices="vm.reloadDevices"
      on-click-delete="(vm.onClickDelete)"
      navigate-to-detail="vm.navigateToDetail"
    ></c8y-fieldbus-device-list>
  </div>
</div>
