<!--
 -
 - Licensed to the Apache Software Foundation (ASF) under one
 - or more contributor license agreements.  See the NOTICE file
 - distributed with this work for additional information
 - regarding copyright ownership.  The ASF licenses this file
 - to you under the Apache License, Version 2.0 (the
 - "License"); you may not use this file except in compliance
 - with the License.  You may obtain a copy of the License at
 -
 -   http://www.apache.org/licenses/LICENSE-2.0
 -
 - Unless required by applicable law or agreed to in writing,
 - software distributed under the License is distributed on an
 - "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 - KIND, either express or implied.  See the License for the
 - specific language governing permissions and limitations
 - under the License.
 -
 -->
<div class="dijitHidden">
    <div data-dojo-type="dijit.Dialog" style="width:600px;" data-dojo-props="title:'Add'" id="addVirtualHostNodeAndVirtualHost">
      <div id="addVirtualHostNodeAndVirtualHost.contentPane">

        <!-- VHN Form -->
        <form id="addVirtualHostNode.form" method="post" data-dojo-type="dijit/form/Form">
            <div class="formBox">
              <fieldset>
                <legend>Virtual Host Node</legend>
                    <div class="clear">
                      <div class="formLabel-labelCell tableContainer-labelCell">Name*:</div>
                      <div class="formLabel-controlCell tableContainer-valueCell">
                          <input type="text" id="addVirtualHostNode.nodeName"
                                 data-dojo-type="dijit/form/ValidationTextBox"
                                 data-dojo-props="
                              name: 'name',
                              placeHolder: 'node name',
                              required: true,
                              promptMessage: 'Name of node, must be unique',
                              title: 'Enter a unique node name per broker'" />
                      </div>
                    </div>
                    <div class="clear">
                        <div class="formLabel-labelCell tableContainer-labelCell">Type*:</div>
                        <div class="tableContainer-valueCell formLabel-controlCell">
                            <select id="addVirtualHostNode.type" data-dojo-type="dijit/form/FilteringSelect"
                                data-dojo-props="
                                    name: 'type',
                                    required: true,
                                    disabled: true,
                                    placeHolder: 'select virtual host node type',
                                    promptMessage: 'Type of virtual host node',
                                    title: 'Select virtual host node type',
                                    searchAttr: 'name'">
                             </select>
                        </div>
                    </div>
                    <div class="clear"></div>

                    <div id="addVirtualHostNode.typeFields"></div>

                    <div id="addVirtualHostNode.uploadFields" class="clear">
                      <div class="formLabel-labelCell">
                          <label for="addVirtualHostNode.upload">Upload virtualhost configuration from file:</label>
                      </div>
                      <div class="formLabel-controlCell">
                          <input id="addVirtualHostNode.upload" type="checkbox"
                                 data-dojo-type="dijit.form.CheckBox"
                                 data-dojo-props="
                                  name: 'upload'" />
                      </div>
                      <div id="addVirtualHostNode.fileFields" class="clear">
                          <div class="formLabel-labelCell">
                              <label for="addVirtualHostNode.file">Select JSON file*:</label>
                          </div>
                          <div class="tableContainer-valueCell formLabel-controlCell">
                              <input type="file" id="addVirtualHostNode.file"
                                      multiple="false"
                                      data-dojo-type="dojox.form.Uploader"
                                      data-dojo-props="
                                      label: 'Select'"/>
                              <span id="addVirtualHostNode.selectedFile" class="infoMessage"></span>
                              <span id="addVirtualHostNode.selectedFileStatus"></span>
                          </div>
                      </div>
                    </div>

                    <div class="clear"></div>

                    <div data-dojo-type="dijit/TitlePane" data-dojo-props="title: 'Context variables',  open: false">
                        <div id="addVirtualHostNode.context"></div>
                    </div>


                </fieldset>
            </div>
        </form>

        <!-- VH Form -->
        <form id="addVirtualHost.form" method="post" data-dojo-type="dijit/form/Form">
            <div class="formBox">
              <fieldset>
                <legend>Virtual Host</legend>
                <div class="clear">
                    <div class="formLabel-labelCell tableContainer-labelCell">Type*:</div>
                    <div class="tableContainer-valueCell formLabel-controlCell">
                        <select id="addVirtualHost.type" data-dojo-type="dijit/form/FilteringSelect"
                                data-dojo-props="
                                name: 'type',
                                required: true,
                                disabled: true,
                                placeHolder: 'select virtual host type',
                                promptMessage: 'Type of virtual host',
                                title: 'Select virtual host type',
                                searchAttr: 'name'">
                        </select>
                    </div>
                </div>
                <div class="clear"></div>

                <div id="addVirtualHost.typeFields"></div>

                  <div data-dojo-type="dijit/TitlePane" data-dojo-props="title: 'Context variables',  open: false">
                      <div id="addVirtualHost.context"></div>
                  </div>

              </fieldset>
            </div>
        </form>
      </div>
      <div class="dijitDialogPaneActionBar qpidDialogPaneActionBar">
            <button data-dojo-type="dijit/form/Button" id="addVirtualHostNodeAndVirtualHost.addButton" data-dojo-props="label: 'Add'" type="submit"></button>
            <button data-dojo-type="dijit/form/Button" id="addVirtualHostNodeAndVirtualHost.cancelButton" data-dojo-props="label: 'Cancel'" ></button>
      </div>
    </div>
</div>