<div class="row-fluid">
  <div class="span6">
    <h1>{$ vm.cp.humanReadableName $}</h1>
  </div>
  <div class="span6 text-right">
    <cp-actions id="vm.cp.id"></cp-actions>
  </div>
</div>
<hr>
<div class="row-fluid">
  <div ng-show="vm.cp.id" class="span2">
    <div ng-include="'templates/cp_side_nav.html'"></div>
  </div>
  <div ng-class="{span10: vm.cp.id, span12: !vm.cp.id}">
  <!-- TODO hide form on not found -->
    <form ng-submit="vm.saveContentProvider(vm.cp)">
      <fieldset>
        <div class="row-fluid">
          <div class="span6">
            <label>Name:</label>
            <input type="text" ng-model="vm.cp.humanReadableName" required/>
          </div>
          <div class="span6">
            <label class="checkbox">
              <input type="checkbox" ng-model="vm.cp.enabled" /> Enabled
            </label>
          </div>
        </div>
        <div class="row-fluid">
          <div class="span12">
            <label>Description</label>
            <textarea style="width: 100%" ng-model="vm.cp.description"></textarea>
          </div>
        </div>
        <div class="row-fluid">
          <div class="span12">
            <label>Service provider</label>
            <select required ng-model="vm.cp.serviceProvider" ng-options="sp.id as sp.humanReadableName for sp in vm.sp"></select>
          </div>
        </div>
        <div class="row-fluid">
          <div class="span12">
            <button class="btn btn-success">
              <span ng-show="vm.cp.id">Save</span>
              <span ng-show="!vm.cp.id">Create</span>
            </button>
          </div>
        </div>
      </fieldset>
    </form>
    <div class="alert" ng-show="vm.result" ng-class="{'alert-success': vm.result.status === 1,'alert-error': vm.result.status === 0}">
      {$ vm.result.msg $}
    </div>
  </div>
</div>