portainer/app/components/createContainer/createcontainer.html

<rd-header>
  <rd-header-title title="Create container"></rd-header-title>
  <rd-header-content>
    <a ui-sref="containers">Containers</a> > Add container
  </rd-header-content>
</rd-header>

<div class="row">
  <div class="col-lg-12 col-md-12 col-xs-12">
    <rd-widget>
      <rd-widget-body>
        <form class="form-horizontal">
          <!-- name-input -->
          <div class="form-group">
            <label for="container_name" class="col-sm-1 control-label text-left">Name</label>
            <div class="col-sm-11">
              <input type="text" class="form-control" ng-model="config.name" id="container_name" placeholder="e.g. myContainer">
            </div>
          </div>
          <!-- !name-input -->
          <!-- image-and-registry-inputs -->
          <div class="form-group">
            <label for="container_image" class="col-sm-1 control-label text-left">Image</label>
            <div class="col-sm-7">
              <input type="text" class="form-control" ng-model="config.Image" id="container_image" placeholder="e.g. ubuntu:trusty">
            </div>
            <label for="image_registry" class="col-sm-1 control-label text-left">Registry</label>
            <div class="col-sm-3">
              <input type="text" class="form-control" ng-model="formValues.Registry" id="image_registry" placeholder="leave empty to use DockerHub">
            </div>
            <div class="col-sm-offset-1 col-sm-11">
              <div class="checkbox">
                <label>
                  <input type="checkbox" ng-model="formValues.alwaysPull"> Always pull image before creating
                </label>
              </div>
            </div>
          </div>
          <!-- !image-and-registry-inputs -->
          <!-- restart-policy -->
          <div class="form-group">
            <label class="col-sm-1 control-label text-left">Restart policy</label>
            <div class="col-sm-11">
              <label class="radio-inline">
                <input type="radio" name="container_restart_policy" ng-model="config.HostConfig.RestartPolicy.Name" value="no">
                Never
              </label>
              <label class="radio-inline">
                <input type="radio" name="container_restart_policy" ng-model="config.HostConfig.RestartPolicy.Name" value="always">
                Always
              </label>
              <label class="radio-inline">
                <input type="radio" name="container_restart_policy" ng-model="config.HostConfig.RestartPolicy.Name" value="on-failure">
                <span class="radio-value">On failure</span>
              </label>
              <label class="radio-inline">
                <input type="radio" name="container_restart_policy" ng-model="config.HostConfig.RestartPolicy.Name" value="unless-stopped">
                <span class="radio-value">Unless stopped</span>
              </label>
            </div>
          </div>
          <!-- !restart-policy -->
          <!-- port-mapping -->
          <div class="form-group">
            <label for="container_ports" class="col-sm-1 control-label text-left">Port mapping</label>
            <div class="col-sm-11">
              <div class="checkbox">
                <label>
                  <input type="checkbox" ng-model="config.HostConfig.PublishAllPorts"> Publish all exposed ports
                </label>
              </div>
              <span class="label label-default interactive" ng-click="addPortBinding()">
                <i class="fa fa-plus-circle" aria-hidden="true"></i> map port
              </span>
            </div>
            <!-- port-mapping-input-list -->
            <div class="col-sm-offset-1 col-sm-11 form-inline" style="margin-top: 10px;">
              <div ng-repeat="portBinding in config.HostConfig.PortBindings" style="margin-top: 2px;">
                <div class="input-group col-sm-5 input-group-sm">
                  <span class="input-group-addon">host</span>
                  <input type="text" class="form-control" ng-model="portBinding.hostPort" placeholder="e.g. 80 or 1.2.3.4:80 (optional)">
                </div>
                <div class="input-group col-sm-5 input-group-sm">
                  <span class="input-group-addon">container</span>
                  <input type="text" class="form-control" ng-model="portBinding.containerPort" placeholder="e.g. 80">
                </div>
                <div class="input-group col-sm-1 input-group-sm">
                  <select class="form-control" ng-model="portBinding.protocol">
                    <option value="tcp">tcp</option>
                    <option value="udp">udp</option>
                  </select>
                  <span class="input-group-btn">
                    <button class="btn btn-default" type="button" ng-click="removePortBinding($index)">
                      <i class="fa fa-minus" aria-hidden="true"></i>
                    </button>
                  </span>
                </div>
              </div>
            </div>
            <!-- !port-mapping-input-list -->
          </div>
          <!-- !port-mapping -->
          <!-- ownership -->
          <div class="form-group" ng-if="applicationState.application.authentication">
            <div class="col-sm-12">
              <label for="ownership" class="control-label text-left">
                Ownership
                <portainer-tooltip position="bottom" message="When setting the ownership value to private, only you and the administrators will be able to see and manage this object. When choosing public, everybody will be able to access it."></portainer-tooltip>
              </label>
              <div class="btn-group btn-group-sm" style="margin-left: 20px;">
                <label class="btn btn-default" ng-model="formValues.Ownership" uib-btn-radio="'private'">
                  <i class="fa fa-eye-slash" aria-hidden="true"></i>
                  Private
                </label>
                <label class="btn btn-default" ng-model="formValues.Ownership" uib-btn-radio="'public'">
                  <i class="fa fa-eye" aria-hidden="true"></i>
                  Public
                </label>
              </div>
            </div>
          </div>
          <!-- !ownership -->
        </form>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>

<div class="row">
  <div class="col-lg-12 col-md-12 col-xs-12">
    <rd-widget>
      <rd-widget-body>
        <ul class="nav nav-tabs">
          <li class="active interactive"><a data-target="#command" data-toggle="tab">Command</a></li>
          <li class="interactive"><a data-target="#volumes" data-toggle="tab">Volumes</a></li>
          <li class="interactive"><a data-target="#network" data-toggle="tab">Network</a></li>
          <li class="interactive"><a data-target="#labels" data-toggle="tab">Labels</a></li>
          <li class="interactive"><a data-target="#security" data-toggle="tab">Security/Host</a></li>
        </ul>
        <!-- tab-content -->
        <div class="tab-content">
          <!-- tab-command -->
          <div class="tab-pane active" id="command">
            <form class="form-horizontal" style="margin-top: 15px;">
              <!-- command-input -->
              <div class="form-group">
                <label for="container_command" class="col-sm-1 control-label text-left">Command</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" ng-model="config.Cmd" id="container_command" placeholder="e.g. /usr/bin/nginx -t -c /mynginx.conf">
                </div>
              </div>
              <!-- !command-input -->
              <!-- entrypoint-input -->
              <div class="form-group">
                <label for="container_entrypoint" class="col-sm-1 control-label text-left">Entry Point</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" ng-model="config.Entrypoint" id="container_entrypoint" placeholder="e.g. /bin/sh -c">
                </div>
              </div>
              <!-- !entrypoint-input -->
              <!-- workdir-user-input -->
              <div class="form-group">
                <label for="container_workingdir" class="col-sm-1 control-label text-left">Working Dir</label>
                <div class="col-sm-4">
                  <input type="text" class="form-control" ng-model="config.WorkingDir" id="container_workingdir" placeholder="e.g. /myapp">
                </div>
                <label for="container_user" class="col-sm-1 control-label text-left">User</label>
                <div class="col-sm-4">
                  <input type="text" class="form-control" ng-model="config.User" id="container_user" placeholder="e.g. nginx">
                </div>
              </div>
              <!-- !workdir-user-input -->
              <!-- console -->
              <div class="form-group">
                <label for="container_console" class="col-sm-1 control-label text-left">Console</label>
                <div class="col-sm-11">
                  <div class="col-sm-4">
                    <label class="radio-inline">
                      <input type="radio" name="container_console" ng-model="formValues.Console" value="both">
                      Interactive & TTY <span class="small text-muted">(-i -t)</span>
                    </label>
                  </div>
                  <div class="col-sm-4">
                    <label class="radio-inline">
                      <input type="radio" name="container_console" ng-model="formValues.Console" value="interactive">
                      Interactive <span class="small text-muted">(-i)</span>
                    </label>
                  </div>
                </div>
                <div class="col-sm-offset-1 col-sm-11">
                  <div class="col-sm-4">
                    <label class="radio-inline">
                      <input type="radio" name="container_console" ng-model="formValues.Console" value="tty">
                      TTY <span class="small text-muted">(-t)</span>
                    </label>
                  </div>
                  <div class="col-sm-4">
                    <label class="radio-inline">
                      <input type="radio" name="container_console" ng-model="formValues.Console" value="none">
                      None
                    </label>
                  </div>
                </div>
              </div>
              <!-- !console -->
              <!-- environment-variables -->
              <div class="form-group">
                <label for="container_env" class="col-sm-1 control-label text-left">Environment variables</label>
                <div class="col-sm-11">
                  <span class="label label-default interactive" ng-click="addEnvironmentVariable()">
                    <i class="fa fa-plus-circle" aria-hidden="true"></i> environment variable
                  </span>
                </div>
                <!-- environment-variable-input-list -->
                <div class="col-sm-offset-1 col-sm-11 form-inline" style="margin-top: 10px;">
                  <div ng-repeat="variable in config.Env" style="margin-top: 2px;">
                    <div class="input-group col-sm-5 input-group-sm">
                      <span class="input-group-addon">name</span>
                      <input type="text" class="form-control" ng-model="variable.name" placeholder="e.g. FOO">
                    </div>
                    <div class="input-group col-sm-5 input-group-sm">
                      <span class="input-group-addon">value</span>
                      <input type="text" class="form-control" ng-model="variable.value" placeholder="e.g. bar">
                      <span class="input-group-btn">
                        <button class="btn btn-default" type="button" ng-click="removeEnvironmentVariable($index)">
                          <i class="fa fa-minus" aria-hidden="true"></i>
                        </button>
                      </span>
                    </div>
                  </div>
                </div>
                <!-- !environment-variable-input-list -->
              </div>
              <!-- !environment-variables -->
            </form>
          </div>
          <!-- !tab-command -->
          <!-- tab-volume -->
          <div class="tab-pane" id="volumes">
            <form class="form-horizontal" style="margin-top: 15px;">
              <!-- volumes -->
              <div class="form-group">
                <label for="container_volumes" class="col-sm-1 control-label text-left">Volumes</label>
                <div class="col-sm-11">
                  <span class="label label-default interactive" ng-click="addVolume()">
                    <i class="fa fa-plus-circle" aria-hidden="true"></i> volume
                  </span>
                </div>
                <!-- volumes-input-list -->
                <div class="col-sm-offset-1 col-sm-11 form-inline" style="margin-top: 10px;">
                  <div ng-repeat="volume in formValues.Volumes" style="margin-top: 2px;">
                    <div class="input-group col-sm-1 input-group-sm">
                      <div class="checkbox">
                        <label>
                          <input type="checkbox" ng-model="volume.readOnly"> Read-only
                        </label>
                      </div>
                    </div>
                    <div class="input-group col-sm-5 input-group-sm">
                      <span class="input-group-addon"><input type="checkbox" ng-model="volume.isPath" ng-click="resetVolumePath($index)">Path</span>
                      <select class="form-control" ng-model="volume.name" ng-if="!volume.isPath">
                        <option selected disabled hidden value="">Select a volume</option>
                        <option ng-repeat="vol in availableVolumes" ng-value="vol.Name">{{ vol.Name|truncate:30}}</option>
                      </select>
                      <input ng-if="volume.isPath" type="text" class="form-control" ng-model="volume.name" placeholder="e.g. /path/on/host">
                    </div>
                    <div class="input-group col-sm-5 input-group-sm">
                      <span class="input-group-addon">container</span>
                      <input type="text" class="form-control" ng-model="volume.containerPath" placeholder="e.g. /path/in/container">
                      <span class="input-group-btn">
                        <button class="btn btn-default" type="button" ng-click="removeVolume($index)">
                          <i class="fa fa-minus" aria-hidden="true"></i>
                        </button>
                      </span>
                    </div>
                  </div>
                </div>
                <!-- !volumes-input-list -->
              </div>
            </form>
            <!-- !volumes -->
          </div>
          <!-- !tab-volume -->
          <!-- tab-network -->
          <div class="tab-pane" id="network">
            <form class="form-horizontal" style="margin-top: 15px;">
              <div class="form-group" ng-if="globalNetworkCount === 0 && applicationState.endpoint.mode.provider !== 'DOCKER_SWARM_MODE'">
                <div class="col-sm-12">
                  <span class="small text-muted">You don't have any shared network. Head over the <a ui-sref="networks">networks view</a> to create one.</span>
                </div>
              </div>
              <!-- network-input -->
              <div class="form-group">
                <label for="container_network" class="col-sm-1 control-label text-left">Network</label>
                <div class="col-sm-9">
                  <select class="form-control" ng-model="config.HostConfig.NetworkMode" id="container_network">
                    <option selected disabled hidden value="">Select a network</option>
                    <option ng-repeat="net in availableNetworks" ng-value="net.Name">{{ net.Name }}</option>
                  </select>
                </div>
              </div>
              <!-- !network-input -->
              <!-- container-name-input -->
              <div class="form-group" ng-if="config.HostConfig.NetworkMode == 'container'">
                <label for="container_network_container" class="col-sm-1 control-label text-left">Container</label>
                <div class="col-sm-9">
                  <select ng-if="applicationState.endpoint.mode.provider !== 'DOCKER_SWARM'" ng-options="container|containername for container in runningContainers" class="form-control" ng-model="formValues.NetworkContainer">
                    <option selected disabled hidden value="">Select a container</option>
                  </select>
                  <select ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM'" ng-options="container|swarmcontainername for container in runningContainers" class="form-control" ng-model="formValues.NetworkContainer">
                    <option selected disabled hidden value="">Select a container</option>
                  </select>
                </div>
              </div>
              <!-- !container-name-input -->
              <!-- hostname-input -->
              <div class="form-group">
                <label for="container_hostname" class="col-sm-1 control-label text-left">Hostname</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" ng-model="config.Hostname" id="container_hostname" placeholder="e.g. web01">
                </div>
              </div>
              <!-- !hostname-input -->
              <!-- domainname-input -->
              <div class="form-group">
                <label for="container_domainname" class="col-sm-1 control-label text-left">Domain Name</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" ng-model="config.Domainname" id="container_domainname" placeholder="e.g. example.com">
                </div>
              </div>
              <!-- !domainname -->
              <!-- extra-hosts-variables -->
              <div class="form-group">
                <label for="container_extrahosts" class="col-sm-1 control-label text-left">Extra Hosts</label>
                <div class="col-sm-11">
                  <span class="label label-default interactive" ng-click="addExtraHost()">
                    <i class="fa fa-plus-circle" aria-hidden="true"></i> extra host
                  </span>
                </div>
                <!-- extra-hosts-input-list -->
                <div class="col-sm-offset-1 col-sm-11 form-inline" style="margin-top: 10px;">
                  <div ng-repeat="variable in formValues.ExtraHosts" style="margin-top: 2px;">
                    <div class="input-group col-sm-5 input-group-sm">
                      <span class="input-group-addon">value</span>
                      <input type="text" class="form-control" ng-model="variable.value" placeholder="e.g. host:IP">
                      <span class="input-group-btn">
                        <button class="btn btn-default" type="button" ng-click="removeExtraHost($index)">
                          <i class="fa fa-minus" aria-hidden="true"></i>
                        </button>
                      </span>
                    </div>
                  </div>
                </div>
                <!-- !extra-hosts-input-list -->
              </div>
              <!-- !extra-hosts-variables -->
            </form>
          </div>
          <!-- !tab-network -->
          <!-- tab-labels -->
          <div class="tab-pane" id="labels">
            <form class="form-horizontal" style="margin-top: 15px;">
              <!-- labels -->
              <div class="form-group">
                <label for="container_labels" class="col-sm-1 control-label text-left">Labels</label>
                <div class="col-sm-11">
                  <span class="label label-default interactive" ng-click="addLabel()">
                    <i class="fa fa-plus-circle" aria-hidden="true"></i> label
                  </span>
                </div>
                <!-- labels-input-list -->
                <div class="col-sm-offset-1 col-sm-11 form-inline" style="margin-top: 10px;">
                  <div ng-repeat="label in formValues.Labels" style="margin-top: 2px;">
                    <div class="input-group col-sm-5 input-group-sm">
                      <span class="input-group-addon">name</span>
                      <input type="text" class="form-control" ng-model="label.name" placeholder="e.g. com.example.foo">
                    </div>
                    <div class="input-group col-sm-5 input-group-sm">
                      <span class="input-group-addon">value</span>
                      <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar">
                      <span class="input-group-btn">
                        <button class="btn btn-default" type="button" ng-click="removeLabel($index)">
                          <i class="fa fa-minus" aria-hidden="true"></i>
                        </button>
                      </span>
                    </div>
                  </div>
                </div>
                <!-- !labels-input-list -->
              </div>
              <!-- !labels-->
            </form>
          </div>
          <!-- !tab-labels -->
          <!-- tab-security -->
          <div class="tab-pane" id="security">
            <form class="form-horizontal" style="margin-top: 15px;">
              <!-- privileged-mode -->
              <div class="form-group">
                <div class="col-sm-12">
                  <div class="checkbox">
                    <label>
                      <input type="checkbox" ng-model="config.HostConfig.Privileged"> Privileged mode
                    </label>
                  </div>
                </div>
              </div>
              <!-- !privileged-mode -->
            </form>
          </div>
          <!-- !tab-security -->
        </div>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>

<div class="row">
  <div class="col-lg-12 col-md-12 col-xs-12" style="text-align: center;">
    <div>
      <i id="createContainerSpinner" class="fa fa-cog fa-3x fa-spin" style="margin-bottom: 5px; display: none;"></i>
    </div>
    <button type="button" class="btn btn-default btn-lg" ng-click="create()">Create</button>
    <a type="button" class="btn btn-default btn-lg" ui-sref="containers">Cancel</a>
  </div>
</div>