<card-layout body-css="md-padding">

  <header-section>
    <div layout="row" layout-align="space-between-center" flex>
      <div class="card-title" flex>Access Control</div>
      <h2 class="card-sub-header">{{vm.stepNumber}} of {{vm.totalSteps}}</h2>
    </div>
    <div layout="row" layout-align="space-between-center" flex class="layout-padding-top">
      <div class="card-sub-header" flex>Define feed and data access control</div>
      <thinkbig-feed-errors-card-header></thinkbig-feed-errors-card-header>
    </div>
  </header-section>

  <body-section>

  <ng-form name="vm.feedAccessControlForm">

    <div layout="column">
    <entity-access-control entity="vm.model" entity-type="feed"  the-form="vm.feedAccessControlForm"></entity-access-control>
    </div>
    <div layout="column" ng-if="vm.securityGroupsEnabled == true">
      <div class="md-subhead">Data Access Control</div>

      <md-input-container class="md-block layout-padding-top-bottom flex-gt-sm condensed" flex-gt-sm="" style="" >
        <label class="label-small md-container-ignore">Hadoop Security Groups</label>
        <md-chips ng-model="vm.model.securityGroups" md-autocomplete-snap
                  md-transform-chip="vm.transformChip($chip)"
                  md-require-match="true" class="layout-padding-top-bottom">
          <md-autocomplete
              md-min-length="0"
              md-selected-item="vm.securityGroupChips.selectedItem"
              md-search-text="vm.securityGroupChips.searchText"
              md-items="item in vm.feedSecurityGroups.querySearch(vm.securityGroupChips.searchText)"
              md-item-text="item.name"
              md-no-cache="true"
              placeholder="Add a Hadoop Security Group">
            <span md-highlight-text="vm.securityGroupChips.searchText">{{item.name}}</span>
          </md-autocomplete>
          <md-chip-template>
                            <span>
                              <strong>{{$chip.name}}</strong>
                            </span>
          </md-chip-template>
        </md-chips>
      </md-input-container>

    </div>

    <br/><br/><br/>
    <thinkbig-step-buttons can-continue="vm.feedAccessControlForm.$valid" step-index="{{::vm.stepIndex}}"></thinkbig-step-buttons>

  </ng-form>

  </body-section>
</card-layout>