<div class="modal-body" ng-show="vm.allSynced()">
  <div class="card">
    <div class="c8y-empty-state text-left">
      <h3><i c8y-icon="check" class="text-success"></i></h3>
      <p>
        <strong translate>No unsynced properties found.</strong><br />
        <span translate>Click on "Show synced properties" to display all properties.</span>
      </p>
    </div>
  </div>
</div>

<div class="list-group">
  <div
    class="list-group-item collapsible"
    ng-class="{'expanded': !schemaMatch.closed}"
    ng-repeat="schemaMatch in vm.schemaMatches | filter:vm.isSchemaMatchVisible"
  >
    <div class="d-flex" style="min-height: 32px;">
      <div class="list-item-actions m-r-8 ">
        <button
          type="button"
          title="{{ 'Expand' | translate }}"
          class="collapse-btn"
          ng-class="{active: !schemaMatch.closed}"
          ng-click="schemaMatch.closed=!schemaMatch.closed"
        >
          <i c8y-icon="chevron-down"></i>
        </button>

        <label class="c8y-checkbox input-sm m-r-8">
          <input
            type="checkbox"
            id="audit-select-all"
            ng-model="schemaMatch[vm.SELECTED]"
            ng-disabled="vm.allValuesMatch(schemaMatch)"
            ng-change="vm.onSelectChangeMatchSchema(schemaMatch)"
          />
          <span></span>
        </label>
      </div>
      <div class="list-item-icon text-gray-medium">
        <i c8y-icon="c8y-modules"></i>
      </div>
      <div class="list-item-body tight-grid">
        <p class="col-xs-8">{{ schemaMatch.title }}</p>
        <div class="col-xs-1">
          <div class="badge badge-danger">{{ vm.countUnsyncedProperties(schemaMatch) }}</div>
          <div class="badge badge-success">{{ vm.countSyncedProperties(schemaMatch) }}</div>
        </div>
      </div>
    </div>
    <div uib-collapse="schemaMatch.closed" class="m-t-8">
      <div class="list-group m-b-8">
        <div class="list-group-item bg-level-2 d-flex">
          <div class="list-item-actions">
            <label class="m-t-8 m-r-8 m-b-0" translate>Sync</label>
          </div>
          <div class="list-item-body">
            <div class="d-flex tight-grid">
              <div class="col-xs-4 col-sm-5">
                <label class="m-b-0" translate>Property</label>
              </div>
              <div class="col-xs-3 text-right">
                <label class="m-b-0" translate>Reference device</label>
              </div>
              <div class="col-xs-2 col-sm-1 text-center"></div>
              <div class="col-xs-3">
                <label class="m-b-0" translate>Current device</label>
              </div>
            </div>
          </div>
        </div>
        <div
          class="list-group-item d-flex"
          ng-repeat="property in schemaMatch.properties | filter:vm.isPropertyVisible"
        >
          <div class="list-item-actions  a-s-center">
            <label class="c8y-checkbox input-sm m-r-16">
              <input
                type="checkbox"
                id="audit-select-all"
                ng-model="property[vm.SELECTED]"
                ng-change="vm.onSelectChangeProperty(property)"
                ng-disabled="vm.valuesMatch(schemaMatch.key, property.key)"
              />
              <span></span>
            </label>
          </div>
          <div class="list-item-body">
            <div class="d-flex tight-grid">
              <div class="col-xs-4 col-sm-5">
                <p class="text-truncate" title="{{::property.title}}">
                  {{::property.title}}
                </p>
              </div>
              <div class="col-xs-3">
                <p
                  class="text-right text-truncate"
                  title="{{ vm.getValueReference(property.schemaMatchKey, property.key) }}"
                >
                  {{ vm.getValueReference(property.schemaMatchKey, property.key) }}
                </p>
              </div>
              <div class="col-xs-2 col-sm-1 text-center">
                <div
                  class="dot small"
                  ng-class="vm.valuesMatch(property.schemaMatchKey, property.key) ? 'dot-success' : 'dot-danger'"
                >
                  {{ vm.valuesMatch(property.schemaMatchKey, property.key) ? '=' : '≠' }}
                </div>
              </div>
              <div class="col-xs-3">
                <p
                  class="text-truncate"
                  title="{{ vm.getValueContext(property.schemaMatchKey, property.key) }}"
                >
                  {{ vm.getValueContext(property.schemaMatchKey, property.key) }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
