<c8y-ui-title-set>
  <h1 class="title text-truncate">
    <span ng-if="vm.connector.name">{{ vm.connector.name }}</span>
    <span ng-if="!vm.connector.name" translate>New data connector</span>
  </h1>
</c8y-ui-title-set>

<c8y-breadcrumbs-set>
  <c8y-breadcrumbs-item
    path="#/connectors/"
    label="{{ 'Data connectors' | translate }}"
    icon="c8y-data-broker"
  ></c8y-breadcrumbs-item>
  <c8y-breadcrumbs-item
    label="{{ 'Data broker' | translate }}"
    icon="c8y-data-broker"
  ></c8y-breadcrumbs-item>
</c8y-breadcrumbs-set>

<form name="vm.connectorForm" novalidate>
  <!-- Void button, used to prevent angular from clicking first available button that doesn't have type="button" attribute  -->
  <button class="hide"></button>

  <div class="row">
    <div class="col-md-8 col-xs-12">
      <div class="card card--fullpage">
        <div class="card-header separator">
          <div class="card-title">
            <span>{{ 'Settings' | translate }}</span>
          </div>
        </div>
        <div class="inner-scroll">
          <div class="card-block">
            <div class="form-group">
              <label for="connectorName" translate>Title</label>
              <input
                id="connectorName"
                name="connectorName"
                type="text"
                class="form-control"
                ng-model="vm.connector.name"
                placeholder="{{ 'e.g. My connector' | translate }}"
                required
              />
              <c8y-error-feedback field="vm.connectorForm.connectorName"></c8y-error-feedback>
            </div>

            <div class="form-group">
              <label for="instanceUrl" translate>Target URL for data connector</label>
              <input
                aria-label="{{ 'Instance URL' | translate }}"
                id="instanceUrl"
                name="instanceUrl"
                type="url"
                class="form-control"
                ng-model="vm.connector.instanceUrl"
                ng-if="!vm.connector.id"
                placeholder="{{ 'e.g. https://target-tenant.com' | translate }}"
                required
              />
              <input
                aria-label="{{ 'Instance URL' | translate }}"
                name="instanceUrl"
                type="text"
                class="form-control"
                ng-model="vm.connector.instanceUrl"
                ng-if="vm.connector.id"
                disabled
              />
              <c8y-error-feedback field="vm.connectorForm.instanceUrl">
                <span ng-message="url" translate>Valid URL required.</span>
              </c8y-error-feedback>
            </div>

            <div class="form-group">
              <label for="description" translate>Description</label>
              <textarea
                id="description"
                name="description"
                class="form-control"
                style="height: 100px"
                ng-maxlength="1000"
                ng-model="vm.connector.description"
                placeholder="{{ 'e.g. Forwarding measurements' | translate }}"
              ></textarea>
              <c8y-error-feedback field="vm.connectorForm.description"></c8y-error-feedback>
            </div>

            <fieldset>
              <div class="legend form-block" translate>Data filters</div>
              <div class="card bg-level-2" ng-if="vm.connector.filters.length === 0">
                <div class="c8y-empty-state p-l-8">
                  <h1 c8y-icon="c8y-connector-out" class="c8y-icon-duocolor"></h1>
                  <p>
                    <strong translate>No data filters defined.</strong>
                    <br />
                    <span translate>
                      Data filters define the set of data to be forwarded. You must set at least one
                      filter.
                    </span>
                  </p>
                </div>
              </div>

              <uib-accordion close-others="false">
                <div
                  uib-accordion-group
                  ng-repeat="filter in vm.connector.filters"
                  template-url=":::PLUGIN_PATH:::/connectors/connectorFilterAccordionGroup.html"
                  class="panel-default"
                  is-open="filter.isOpen"
                >
                  <uib-accordion-heading>
                    <div class="col-sm-4 col-xs-12" ng-if="filter.selectedGroupOrDevice.name">
                      <div class="text-truncate">
                        {{ filter.selectedGroupOrDevice.name }}
                      </div>
                    </div>
                    <div class="col-sm-4 col-xs-12" ng-if="!filter.selectedGroupOrDevice.name">
                      {{ 'All objects' | translate }}
                    </div>

                    <div class="col-sm-6 col-xs-8">
                      <div
                        class="text-muted text-truncate"
                        title="{{ vm.getFilterFragmentsSummary(filter) }}"
                      >
                        <i c8y-icon="filter"></i>
                        <span ng-bind="vm.getFilterFragmentsSummary(filter)"></span>
                      </div>
                    </div>

                    <div class="col-sm-2 col-xs-4 text-right">
                      <button
                        class="showOnHover btn btn-dot btn-dot--danger"
                        ng-class="{ open: popoverIsOpen }"
                        ng-click="$event.stopPropagation()"
                        title="{{ 'Remove' | translate }}"
                        type="button"
                        uib-popover-template="'confirmDelete.html'"
                        popover-trigger="'focus'"
                        popover-placement="left"
                        popover-is-open="popoverIsOpen"
                      >
                        <i c8y-icon="minus-circle"></i>
                      </button>
                      <button title="{{ 'Expand' | translate }}" type="button" class="collapse-btn">
                        <i c8y-icon="chevron-down"></i>
                      </button>
                    </div>
                  </uib-accordion-heading>

                  <div class="row">
                    <div class="col-md-2">
                      <label class="text-left visible-sm visible-xs" translate>
                        Group or device
                      </label>
                      <label class="text-right hidden-sm hidden-xs" translate>
                        Group or device
                      </label>
                    </div>
                    <div class="col-md-10">
                      <c8y-device-selector-combo
                        selected-child-device="filter.selectedGroupOrDevice"
                        groups-selectable="true"
                        empty-selection-available="true"
                        empty-selection-icon="'object-group'"
                        empty-selection-label="'All objects' | translate"
                      ></c8y-device-selector-combo>
                      <div
                        class="alert alert-warning max-width-100"
                        ng-class="{ 'sr-only': closealert }"
                        ng-if="!filter.selectedGroupOrDevice"
                      >
                        <button
                          class="close"
                          ng-click="closealert = !closealert"
                          title="{{ 'Dismiss' | translate }}"
                          type="button"
                        >
                          &times;
                        </button>
                        <div class="p-r-24" translate>
                          Selecting the "All objects" option will synchronize all types of objects,
                          including internal and technical ones (not exclusively groups and
                          devices). This may cause issues on the target tenant.
                        </div>
                      </div>
                    </div>
                  </div>
                  <hr />

                  <div class="row">
                    <div class="col-md-2">
                      <div class="text-left visible-sm visible-xs">
                        <label translate>API</label>
                        <p class="text-muted small" translate>Select at least one</p>
                      </div>
                      <div class="text-right hidden-sm hidden-xs">
                        <label translate>API</label>
                        <p class="text-muted small" translate>Select at least one</p>
                      </div>
                    </div>
                    <div class="col-md-10">
                      <div class="d-flex">
                        <div
                          class="flex-grow m-b-auto"
                          ng-repeat="api in vm.apis"
                          ng-if="!api.hidden"
                        >
                          <div class="d-flex d-col a-i-center">
                            <i c8y-icon="{{ api.icon }}"></i>
                            <div
                              title="{{ api.label | translate }}"
                              ng-bind="api.label | translate"
                            ></div>
                            <label for="{{ api.value }}-{{ $parent.$parent.$index }}" class="c8y-checkbox flex-center">
                              <input
                                id="{{ api.value }}-{{ $parent.$parent.$index }}"
                                type="checkbox"
                                ng-model="filter.apis[api.value]"
                              />
                              <span></span>
                            </label>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <hr />

                  <div class="row fragments">
                    <div class="col-md-2">
                      <label class="text-left visible-sm visible-xs" translate>
                        Fragments to filter
                      </label>
                      <label class="text-right hidden-sm hidden-xs" translate>
                        Fragments to filter
                      </label>
                    </div>
                    <div class="col-md-10">
                      <script type="text/ng-template" id="confirmDelete.html">
                          <div class="text-pre-normal">
                            <h4 class="popover-title m-b-8 p-0">
                              <i c8y-icon="exclamation-circle" class="text-danger m-r-4"></i>
                              {{ 'Remove filter' | translate}}
                            </h4>
                            <p class="m-b-16" translate>
                              Do you want to remove this filter? This operation is irreversible.
                            </p>
                          <div class="d-flex">
                            <button
                              class="btn btn-default btn-sm m-r-4"
                              title="{{ 'Cancel' | translate }}"
                              type="button"
                              ng-click="popoverIsOpen = !popoverIsOpen; $event.stopPropagation();"
                            >
                              {{ 'Cancel' | translate }}
                            </button>
                            <button
                              class="btn btn-danger btn-sm"
                              title="{{ 'Remove' | translate}}"
                              type="button" ng-click='vm.removeFilter(filter)'
                            >
                              {{ 'Remove' | translate }}
                            </button>
                          </div>
                        </div>
                      </script>
                      <div class="row" ng-repeat="fragmentToFilter in filter.fragmentsToFilter">
                        <ng-form name="fragmentToFilterForm">
                          <div class="col-xs-12">
                            <div class="form-group">
                              <label class="sr-only" translate>Fragment</label>
                              <div class="input-group typeahead">
                                <input
                                  aria-label="{{ 'Fragment to filter' | translate }}"
                                  class="form-control"
                                  autocomplete="off"
                                  name="fragment"
                                  type="text"
                                  ng-model="fragmentToFilter.fragment"
                                  placeholder="{{ 'e.g. c8y_FragmentToFilter' | translate }}"
                                  uib-typeahead="suggestedFragment as suggestedFragment for suggestedFragment in vm.getSuggestedFragments(filter) | filter:$viewValue"
                                  typeahead-show-hint="true"
                                  typeahead-min-length="0"
                                  c8y-check-dirty="fragmentToFilter.fragment"
                                />
                                <div class="input-group-btn">
                                  <button
                                    class="btn btn-dot btn-dot--danger"
                                    ng-if="filter.fragmentsToFilter.length > 1"
                                    ng-click="vm.removeFragment(filter, 'fragmentsToFilter', fragmentToFilter)"
                                    title="{{ 'Remove' | translate }}"
                                    type="button"
                                  >
                                    <i class="text-danger" c8y-icon="minus-circle"></i>
                                  </button>
                                  <button
                                    class="btn btn-link"
                                    ng-if="$last"
                                    ng-disabled="!fragmentToFilter.fragment"
                                    ng-click="vm.addFragment(filter, 'fragmentsToFilter')"
                                    title="{{ 'Add' | translate }}"
                                    type="button"
                                  >
                                    <i c8y-icon="plus-circle"></i>
                                  </button>
                                </div>
                              </div>
                              <c8y-error-feedback
                                field="fragmentToFilterForm.fragment"
                              ></c8y-error-feedback>
                            </div>
                          </div>
                        </ng-form>
                      </div>
                    </div>
                  </div>
                  <hr />

                  <div class="row fragments">
                    <div class="col-md-2">
                      <label class="text-left visible-sm visible-xs" translate>
                        Fragments to copy
                      </label>
                      <label class="text-right hidden-sm hidden-xs" translate>
                        Fragments to copy
                      </label>
                    </div>
                    <div class="col-md-10">
                      <div class="form-group">
                        <label class="c8y-checkbox" title="{{ 'Copy all fragments' | translate }}">
                          <input
                            aria-label="{{ 'Copy all fragments' | translate }}"
                            type="checkbox"
                            ng-model="filter.copyAllFragments"
                          />
                          <span></span>
                          <span>
                            {{ 'Copy all fragments' | translate }}
                          </span>
                        </label>
                      </div>
                      <div class="row" ng-repeat="fragmentToCopy in filter.fragmentsToCopy">
                        <ng-form name="fragmentToCopyForm">
                          <div class="col-xs-12">
                            <div class="form-group">
                              <label class="sr-only" translate>Fragment</label>
                              <div class="input-group typeahead" ng-if="!filter.copyAllFragments">
                                <input
                                  aria-label="{{ 'Fragment to copy' | translate }}"
                                  autocomplete="off"
                                  name="fragment"
                                  type="text"
                                  class="form-control"
                                  ng-model="fragmentToCopy.fragment"
                                  placeholder="{{ 'e.g. c8y_FragmentToCopy' | translate }}"
                                  uib-typeahead="suggestedFragment as suggestedFragment for suggestedFragment in vm.getSuggestedFragments(filter) | filter:$viewValue"
                                  typeahead-show-hint="true"
                                  typeahead-min-length="0"
                                  c8y-check-dirty="fragmentToCopy.fragment"
                                />
                                <div class="input-group-btn">
                                  <button
                                    class="btn btn-dot btn-dot--danger"
                                    ng-if="filter.fragmentsToCopy.length > 1"
                                    ng-click="vm.removeFragment(filter, 'fragmentsToCopy', fragmentToCopy)"
                                    title="{{ 'Remove' | translate }}"
                                    type="button"
                                  >
                                    <i c8y-icon="minus-circle"></i>
                                  </button>

                                  <button
                                    class="btn btn-link"
                                    ng-if="$last"
                                    ng-disabled="!fragmentToCopy.fragment"
                                    ng-click="vm.addFragment(filter, 'fragmentsToCopy')"
                                    title="{{ 'Add' | translate }}"
                                    type="button"
                                  >
                                    <i c8y-icon="plus-circle"></i>
                                  </button>
                                </div>
                              </div>
                              <c8y-error-feedback
                                field="fragmentToCopyForm.fragment"
                              ></c8y-error-feedback>
                            </div>
                          </div>
                        </ng-form>
                      </div>
                    </div>
                  </div>
                  <hr />

                  <div class="row">
                    <div class="col-md-2 text-right">
                      <label class="text-left visible-sm visible-xs" translate>Type filter</label>
                      <label class="text-right hidden-sm hidden-xs" translate>Type filter</label>
                    </div>
                    <div class="col-md-10">
                      <div class="form-group">
                        <input
                          name="typeFilter"
                          type="text"
                          class="form-control"
                          ng-model="filter.typeFilter"
                          placeholder="{{ 'e.g. c8y_Linux' | translate }}"
                        />
                        <c8y-error-feedback field="filterForm.typeFilter"></c8y-error-feedback>
                      </div>
                    </div>
                  </div>
                </div>
              </uib-accordion>

              <button
                class="btn btn-default"
                title="{{ 'Add filter' | translate }}"
                type="button"
                ng-click="vm.addFilter()"
              >
                <i c8y-icon="plus-circle"></i>
                {{ 'Add filter' | translate }}
              </button>
            </fieldset>
          </div>

          <div class="card-block bg-level-2" ng-if="vm.connector.code">
            <div class="form-group">
              <label translate>Security code</label>
              <span class="input-group" c8y-copy-to-clipboard>
                <input
                  aria-label="{{ 'Security code' | translate }}"
                  c8y-copy-to-clipboard-input
                  type="text"
                  class="form-control"
                  ng-model="vm.connector.code"
                  readonly
                />
                <span class="input-group-btn">
                  <button
                    title="{{ 'Copy' | translate }}"
                    type="button"
                    c8y-copy-to-clipboard-button
                    class="btn btn-dot"
                  >
                    <i c8y-icon="copy"></i>
                  </button>
                </span>
              </span>
            </div>
            <div>
              <i c8y-icon="info-circle" class="text-info"></i>
              <span translate>
                Security code will be requested on the target tenant to establish connection.
              </span>
            </div>
          </div>
        </div>
        <div class="card-footer separator">
          <div class="row" changed="vm.connectorForm.$dirty">
            <div class="col-md-8">
              <button
                class="btn btn-default"
                title="{{ 'Cancel' | translate }}"
                type="button"
                ng-click="vm.cancel()"
              >
                {{ 'Cancel' | translate }}
              </button>
              <button
                class="btn btn-danger"
                title="{{ 'Remove' | translate }}"
                type="button"
                ng-if="vm.connector.id"
                ng-click="vm.remove()"
              >
                {{ 'Remove' | translate }}
              </button>
              <button
                class="btn btn-primary"
                title="{{ 'Save' | translate }}"
                type="submit"
                ng-disabled="!vm.canSave()"
                ng-click="vm.save()"
              >
                {{ 'Save' | translate }}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>
