<div class="controller-section" ng-controller="Fabric.CreateContainerController">

  <div class="fabric-page-header row-fluid">
    <h2 class="inline-block">Create New Container</h2>
    <!--
    <div class="pull-right">
    </div>
    -->
  </div>

  <div class="create-container-body" hawtio-auto-columns=".create-column">

    <div class="create-column">
      <p ng-hide="forms.create_container.$valid">The following fields must be corrected before this container can be created and started.</p>
      <h4 ng-show="forms.create_container.$error.required">Required Fields</h4>
      <ol class="zebra-list">
        <li ng-repeat="field in forms.create_container.$error.required">
          <strong class="red" >{{massage(field.$name) | humanize}}</strong>
        </li>
      </ol>
      <h4 ng-show="forms.create_container.$error.pattern">Invalid Fields</h4>
      <ol class="zebra-list">
        <li ng-repeat="field in forms.create_container.$error.pattern">
          <strong class="red">{{massage(field.$name) | humanize}}</strong>
          <span ng-switch="field.$name">
            <span ng-switch-when="name">can only contain letters, numbers, '-' and '_'</span>
          </span>
        </li>
      </ol>
      <div ng-show="forms.create_container.$valid">
        <p>Clicking this button will configure and start the container.  It may take some time for the new container to appear on the container list page depending on the creation method.</p>
        <p class="centered">
          <button class='btn btn-success' hawtio-submit='create_container'
                  ng-disabled="!forms.create_container.$valid">
            <i class="icon-ok"></i> Create and start container
          </button>
        </p>
      </div>
      <h4>Selected Profiles</h4>
      <p class="alert" ng-hide="selectedProfiles.length > 0">
        No profiles selected
      </p>
      <ol class="zebra-list" ng-show="selectedProfiles.length > 0">
        <li ng-repeat="profile in selectedProfiles">
            <strong class="green">{{profile.id}}</strong> [<i class="red clickable icon-remove" title="Remove profile" ng-click="deselect(profile)"></i>]
        </li>
      </ol>
    </div>


    <div class="create-column">
      <form id="container-create-form" class="form-inline">
        <label class="control-label">Container type: </label>
        <select ng-model="selectedProvider" ng-options="key for (key, value) in providers"></select>
      </form>
      <div id="create-form">
        <div simple-form name="create_container" data="schema" entity="entity"></div>
      </div>
    </div>


    <div class="create-column">
      <div class="control-group">
        <form class="form-inline">
          <label class="control-label">Version: </label>
          <div fabric-version-selector='selectedVersion'></div>
        </form>
      </div>

      <div class="control-group">
        <label class="control-label">Profiles: </label>
        <div class="controls">
          <div fabric-profile-selector='selectedProfiles'
               version-id='selectedVersion.id'
               no-links="true"></div>
        </div>
      </div>
    </div>


  </div>

</div>
