<!--
/**
 * 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="datasourceForm">
  <div class="col-xs-24">
    <div class="preview pullOver">
      <button  type="button" class="btn btn-default btn-md pull-right nextBtn" ng-click="toggleclick()" >Preview XML</button>
    </div>
    <br/>
    <div>
      <div class=" formBoxContainer detailsBox">
        <div class="datasourceProgressBox" ng-class="{
          general:isActive('forms.datasource.general'),
          summary:isActive('forms.datasource.summary')
          }">
          <div class="progressBar col-xs-24">
              <div class="text-center fir" ng-class="{
                active:isActive('forms.datasource.general'),
                completed:isCompleted('forms.datasource.general')}">General</div>
              <div class="text-center fif" ng-class="{
                active:isActive('forms.datasource.summary'),
                completed:isCompleted('forms.datasource.summary')}">Summary</div>
          </div>
        </div>
        <div class="row customContainer">
          <div class="col-xs-offset-1 col-xs-22">
            <fieldset ng-disabled="!editXmlDisabled">
              <div class="formViewContainer">
                <div class="col-xs-24">
                  <label class="title"><span class="entypo download icon-lg entypo-align-sub"></span> NEW DATA SOURCE</label>
                </div>
                <div ui-view></div>
              </div>
            </fieldset>
          </div>
        </div>
      </div>

      <div class="hide xmlPreviewContainer detailsBox">
        <div class="row dt">
          <div class="col-xs-24 pt15px">
            <div class="col-xs-13 noSpecial">
                <h5>XML Preview</h5>
                <label style="margin-top: -10px;margin-bottom: -2px;" ng-if="invalidXml" class="custom-danger">Invalid Xml</label>
            </div>

            <div class="pull-right">
              <button type="button"
                      id="datasource.editXML"
                      class="btn btn-default btn-xs"
                      ng-click="toggleEditXml()"
                      ng-class="{'btn-warning':!editXmlDisabled}"
                      ng-disabled="invalidXml">
                <div ng-if="editXmlDisabled">Edit XML</div>
                <div ng-if="!editXmlDisabled">Finish</div>
              </button>

              <button type="button"
                      class="btn btn-default btn-xs"
                      ng-if="invalidXml"
                      ng-click="revertXml()">
                  <div>Revert</div>
              </button>
            </div>
		  </div>
          <div class="col-sm-24 showValidationStyle">
            <textarea ng-model="prettyXml"
                      elastic
                      class="form-control"
                      ng-disabled="editXmlDisabled"
                      ng-class="{fakeInvalid:invalidXml}">
            </textarea>
            <!--{{xmlEditValidationError}}-->
          </div>

          </div>
        </div>
    </div>
  </div>
</div>