<div
  class="deviceNetwork row"
  ng-controller="deviceNetworkCtrl"
>
  <div class="col-lg-12 col-lg-max">
    <form name="wanForm">
      <div class="card">
        <div class="card-header separator">
          <div class="card-title">{{ 'WAN' | translate }}</div>
        </div>

        <div class="card-block p-b-0">
          <div class="row">
            <div class="col-xs-12 col-md-4">
              <div class="form-group">
                <label>{{ 'SIM status' | translate }}</label>
                <p class="form-control-static">
                  {{ device.c8y_Network.c8y_WAN.simStatus }}
                </p>
              </div>
            </div>
            <div class="col-xs-12 col-md-4">
              <div class="form-group">
                <label for="apn">{{ 'APN' | translate }}</label>
                <input
                  class="form-control"
                  id="apn"
                  type="text"
                  ng-model="device.c8y_Network.c8y_WAN.apn"
                  data-cy="network--WAN-apn"
                />
              </div>
              <div class="form-group">
                <label for="authType">{{ 'Auth type' | translate }}</label>
                <div class="c8y-select-wrapper">
                  <select
                    class="form-control"
                    id="authType"
                    ng-model="device.c8y_Network.c8y_WAN.authType"
                    data-cy="network--WAN-authType"
                    ng-options="authType.value as (authType.label | translate) for authType in authTypes"
                  ></select>
                  <span></span>
                </div>
              </div>
            </div>
            <div class="col-xs-12 col-md-4">
              <div class="form-group">
                <label for="user">{{ 'User' | translate }}</label>
                <input
                  class="form-control"
                  id="user"
                  type="text"
                  ng-model="device.c8y_Network.c8y_WAN.username"
                  data-cy="network--WAN-username"
                />
              </div>
              <div class="form-group">
                <label for="password">{{ 'Password' | translate }}</label>
                <input
                  class="form-control"
                  id="password"
                  type="text"
                  ng-model="device.c8y_Network.c8y_WAN.password"
                  data-cy="network--WAN-password"
                />
              </div>
            </div>
          </div>
        </div>

        <div class="card-footer separator">
          <button
            class="btn btn-primary"
            title="{{ 'Save' | translate }}"
            type="submit"
            ng-disabled="wanForm.$invalid || wanForm.$pristine"
            ng-click="saveWANviaIP(device)"
            data-cy="network--save-WAN-viaIP"
          >
            {{ 'Save' | translate }}
          </button>
          <button
            class="btn btn-primary"
            title="{{ 'Save (SMS)' | translate }}"
            type="submit"
            data-cy="network--save-WAN-viaSMS"
            ng-disabled="wanForm.$invalid || !smsEnabled || wanForm.$pristine"
            ng-click="saveWANviaSMS(device)"
          >
            {{ 'Save (SMS)' | translate }}
            <i
              c8y-icon="question-circle-o"
              uib-tooltip="{{
                'Messaging provider must be configured to send WAN settings to device via SMS.'
                  | translate
              }}"
              tooltip-popup-delay="500"
              tooltip-append-to-body="true"
              ng-if="!smsEnabled"
              data-cy="network--tooltip-for-WAN"
            ></i>
          </button>
        </div>
      </div>
    </form>
  </div>

  <div class="col-lg-12 col-lg-max">
    <form
      name="lanDhcpForm"
      ng-submit="saveLANandDHCP(device)"
    >
      <div class="card m-b-0">
        <div class="card-header separator">
          <div class="card-title">{{ 'LAN' | translate }}</div>
        </div>

        <div class="card-block">
          <div class="row">
            <div class="col-xs-12 col-md-4">
              <div class="form-group">
                <label>{{ 'Name' | translate }}</label>
                <p class="form-control-static">
                  {{ device.c8y_Network.c8y_LAN.name }}
                </p>
              </div>

              <div class="form-group">
                <label>{{ 'MAC address' | translate }}</label>
                <p class="form-control-static">
                  {{ device.c8y_Network.c8y_LAN.mac | uppercase }}
                </p>
              </div>
            </div>

            <div class="col-xs-12 col-md-4">
              <div
                class="form-group"
                ng-class="{ 'has-error': invalid('lanDhcpForm', 'ip') }"
              >
                <label for="ip">{{ 'IP Address' | translate }}</label>
                <input
                  class="form-control"
                  id="ip"
                  placeholder="{{ 'e.g.' | translate }} 192.168.0.1"
                  name="ip"
                  type="text"
                  required
                  validate-ip
                  ng-model="device.c8y_Network.c8y_LAN.ip"
                  data-cy="network--LAN-ip"
                  ng-change="onLanIpChanged(device.c8y_Network.c8y_LAN)"
                  maxlength="15"
                />
                <c8y-messages>
                  <c8y-message
                    class="form-control-feedback-message"
                    ng-if="invalid('lanDhcpForm', 'ip')"
                  >
                    {{ 'Invalid IP address.' | translate }}
                  </c8y-message>
                </c8y-messages>
              </div>

              <div
                class="form-group"
                ng-class="{ 'has-error': invalid('lanDhcpForm', 'netmask') }"
              >
                <label for="netmaskLan">{{ 'Subnet mask' | translate }}</label>
                <input
                  class="form-control"
                  id="netmaskLan"
                  placeholder="{{ 'e.g.' | translate }} 255.255.255.0"
                  name="netmask"
                  type="text"
                  required
                  validate-ip
                  ng-model="device.c8y_Network.c8y_LAN.netmask"
                  data-cy="network--LAN-netmask"
                  maxlength="15"
                />
                <c8y-messages>
                  <c8y-message
                    class="form-control-feedback-message"
                    ng-if="invalid('lanDhcpForm', 'netmask')"
                  >
                    {{ 'Invalid subnet mask.' | translate }}
                  </c8y-message>
                </c8y-messages>
              </div>
            </div>

            <div class="col-xs-12 col-md-2">
              <div class="form-group"></div>
              <button
                class="btn"
                type="button"
                ng-model="device.c8y_Network.c8y_LAN.enabled"
                data-cy="network--LAN-enable-button"
                uib-btn-checkbox
              >
                <i
                  class="text-danger"
                  c8y-icon="minus-circle"
                  ng-show="!device.c8y_Network.c8y_LAN.enabled"
                  data-cy="network--LAN-disabled"
                ></i>
                <i
                  class="text-success"
                  c8y-icon="check-circle"
                  ng-show="device.c8y_Network.c8y_LAN.enabled"
                ></i>
                <span
                  title="{{ 'Enabled' | translate }}"
                  ng-show="device.c8y_Network.c8y_LAN.enabled"
                >
                  {{ 'Enabled' | translate }}
                </span>
                <span
                  title="{{ 'Disabled' | translate }}"
                  ng-show="!device.c8y_Network.c8y_LAN.enabled"
                >
                  {{ 'Disabled' | translate }}
                </span>
              </button>
            </div>
          </div>
          <div
            class="row"
            ng-model="device.c8y_Network.c8y_DHCP.enabled"
          >
            <label class="c8y-checkbox input-sm p-l-16 col-md-3">
              <input
                type="checkbox"
                ng-model="device.c8y_Network.c8y_DHCP.enabled"
                ng-disabled="!device.c8y_Network.c8y_LAN.enabled"
                data-cy="network--DHCP-enabled-checkbox"
              />
              <span></span>
              <span>
                {{ 'Enable DHCP' | translate }}
              </span>
            </label>
          </div>
        </div>

        <div
          class="collapse"
          uib-collapse="!device.c8y_Network.c8y_DHCP.enabled"
        >
          <div
            class="card-block bg-level-1"
            ng-show="device.c8y_Network.c8y_LAN.enabled"
          >
            <fieldset
              class="c8y-fieldset"
              name="lanDhcpForm"
              ng-model="device.c8y_Network.c8y_LAN.enabled"
              data-cy="network--LAN-enabled"
            >
              <legend class="m-b-8">{{ 'DHCP' | translate }}</legend>
              <div class="row">
                <div class="col-xs-12 col-md-4">
                  <div class="form-group form-group-sm">
                    <label for="addressRangeStart">{{ 'Address range' | translate }}</label>
                    <div class="row tight-grid">
                      <div class="form-group">
                        <div
                          class="col-sm-6"
                          ng-class="{ 'has-error': invalid('lanDhcpForm', 'addressRangeStart') }"
                        >
                          <input
                            class="form-control"
                            id="addressRangeStart"
                            placeholder="{{ 'e.g.' | translate }} 192.168.0.1"
                            name="addressRangeStart"
                            type="text"
                            validate-ip
                            ng-model="device.c8y_Network.c8y_DHCP.addressRange.start"
                            data-cy="network--DHCP-addressRange-start"
                            ng-disabled="!device.c8y_Network.c8y_LAN.enabled"
                            maxlength="15"
                            ng-required="device.c8y_Network.c8y_DHCP.enabled"
                          />
                          <c8y-messages>
                            <c8y-message
                              class="form-control-feedback-message"
                              ng-if="invalid('lanDhcpForm', 'addressRangeStart')"
                            >
                              {{ 'Invalid IP address range start.' | translate }}
                            </c8y-message>
                          </c8y-messages>
                        </div>

                        <div
                          class="col-sm-6"
                          ng-class="{ 'has-error': invalid('lanDhcpForm', 'addressRangeEnd') }"
                        >
                          <input
                            class="form-control"
                            id="addressRangeEnd"
                            placeholder="{{ 'e.g.' | translate }} 192.168.0.10"
                            name="addressRangeEnd"
                            type="text"
                            validate-ip
                            ng-model="device.c8y_Network.c8y_DHCP.addressRange.end"
                            data-cy="network--DHCP-addressRange-end"
                            ng-disabled="!device.c8y_Network.c8y_LAN.enabled"
                            maxlength="15"
                            ng-required="device.c8y_Network.c8y_DHCP.enabled"
                          />
                          <c8y-messages>
                            <c8y-message
                              class="form-control-feedback-message"
                              ng-if="invalid('lanDhcpForm', 'addressRangeEnd')"
                            >
                              {{ 'Invalid IP address range end.' | translate }}
                            </c8y-message>
                          </c8y-messages>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="form-group form-group-sm">
                    <label for="domainName">{{ 'Domain name' | translate }}</label>
                    <input
                      class="form-control"
                      id="domainName"
                      type="text"
                      ng-model="device.c8y_Network.c8y_DHCP.domainName"
                      data-cy="network--DHCP-domainName"
                      ng-disabled="!device.c8y_Network.c8y_LAN.enabled"
                    />
                  </div>
                </div>
                <div class="col-xs-12 col-md-4">
                  <div
                    class="form-group form-group-sm"
                    ng-class="{ 'has-error': invalid('lanDhcpForm', 'dns1') }"
                  >
                    <label for="dns1">{{ 'DNS' | translate }}</label>
                    <input
                      class="form-control"
                      id="dns1"
                      placeholder="{{ 'e.g.' | translate }} 192.168.0.1"
                      name="dns1"
                      type="text"
                      validate-ip
                      ng-model="device.c8y_Network.c8y_DHCP.dns1"
                      data-cy="network--DHCP-dns1"
                      ng-disabled="!device.c8y_Network.c8y_LAN.enabled"
                      maxlength="15"
                    />
                    <c8y-messages>
                      <c8y-message
                        class="form-control-feedback-message"
                        ng-if="invalid('lanDhcpForm', 'dns1')"
                      >
                        {{ 'Invalid IP address.' | translate }}
                      </c8y-message>
                    </c8y-messages>
                  </div>

                  <div
                    class="form-group form-group-sm"
                    ng-class="{ 'has-error': invalid('lanDhcpForm', 'dns2') }"
                  >
                    <label for="dns2">{{ 'DNS 2' | translate }}</label>
                    <input
                      class="form-control"
                      id="dns2"
                      placeholder="{{ 'e.g.' | translate }} 192.168.0.2"
                      name="dns2"
                      type="text"
                      validate-ip
                      ng-model="device.c8y_Network.c8y_DHCP.dns2"
                      data-cy="network--DHCP-dns2"
                      ng-disabled="!device.c8y_Network.c8y_LAN.enabled"
                      maxlength="15"
                    />

                    <c8y-messages>
                      <c8y-message
                        class="form-control-feedback-message"
                        ng-if="invalid('lanDhcpForm', 'dns2')"
                      >
                        {{ 'Invalid IP address.' | translate }}
                      </c8y-message>
                    </c8y-messages>
                  </div>
                </div>
              </div>
            </fieldset>
          </div>
        </div>

        <div class="card-footer separator">
          <button
            class="btn btn-primary"
            title="{{ 'Save' | translate }}"
            type="submit"
            data-cy="network--save"
            ng-disabled="lanDhcpForm.$invalid || lanDhcpForm.$pristine"
          >
            {{ 'Save' | translate }}
          </button>
        </div>
      </div>
    </form>
  </div>
</div>
