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

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

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

    <div class="create-column align-left">
      <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">
                <span ng-show="selectedProvider.id == 'openshift'">can only contain lowercase letters and numbers</span>
                <span ng-hide="selectedProvider.id == 'openshift'">can only contain letters, numbers, '-' and '_'</span>
              </span>
            </span>
        </li>
        <li ng-repeat="field in forms.create_container.$error.taken">
          <strong class="red">{{massage(field.$name) | humanize}}</strong>
            <span ng-switch="field.$name">
              <span ng-switch-when="name">is already in use</span>
            </span>
        </li>
      </ol>
      <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 pull-right"
               ng-hide="hideProfileSelector"
               title="Remove profile" 
               ng-click="deselect(profile)"></i>
        </li>
      </ol>
    </div>


    <div class="create-column align-left">
      <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>
        <p></p>
        <div class="align-right">
          <button class='btn btn-success' hawtio-submit='create_container'
              ng-disabled="!forms.create_container.$valid" title="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.">
            <i class="icon-ok"></i> Create and start container
          </button>
          <button class='btn'
              ng-click='goBack()'>
            <i class="icon-remove"></i> Cancel</button>
        </div>
      </div>
    </div>

    <div class="create-column align-left"
         ng-hide="hideProfileSelector">
      <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>
