<div class="header">
  <div class="title">
    <h1 translate>Settings</h1>
  </div>
</div>

<div class="details">
  <div os-perms="core.can_manage_config" class="panel-group" id="accordion"
      role="tablist" aria-multiselectable="true">
    <!-- generate config groups -->
    <div ng-repeat="group in configGroups">
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="heading-group{{ $index }}">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#group{{ $index }}"
                aria-expanded="false" aria-controls="group{{ $index }}">
              {{ group.name | translate }}
            </a>
          </h4>
        </div> <!-- heading -->
        <div id="group{{ $index }}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-group{{ $index }}">
          <div class="panel-body">
            <div ng-repeat="subgroup in group.subgroups">
              <h3>{{ subgroup.name }}</h3>
              <div ng-repeat="configOption in subgroup.items">
                <os-form-field field="configOption"></os-form-field>
              </div>
            </div>
          </div>
        </div> <!-- group.name -->
      </div>
    </div>
  </div>
</div>

