<!--
* 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.
-->
<form class="form-horizontal" role="form" name="form.instanceCreateForm" novalidate>
<div class="modal-header">
  <h3 class="modal-title">Create View Instance</h3>
</div>
<div class="modal-body createViewModal">
  <div class="view-header">
    <img src="http://placehold.it/64x64" alt="" class="icon-big">
    <img src="http://placehold.it/32x32" alt="" class="icon-small">
    <div class="description">
      <h3>{{view.ViewVersionInfo.view_name}}</h3>
      <span>{{view.ViewVersionInfo.label}} | Version: {{view.ViewVersionInfo.version}}</span>
    </div>
  </div>
  
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Details</h3>
      </div>
      <div class="panel-body">
        <div class="form-group" 
        ng-class="{'has-error' : ( (form.instanceCreateForm.instanceNameInput.$error.required || form.instanceCreateForm.instanceNameInput.$error.pattern) && form.instanceCreateForm.submitted) || instanceExists }"
        >
          <label for="" class="control-labe col-sm-2">Instance name</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" name="instanceNameInput" ng-pattern="nameValidationPattern" required ng-model="instance.instance_name">

            <div class="alert alert-danger no-margin-bottom top-margin" ng-show='form.instanceCreateForm.instanceNameInput.$error.required && form.instanceCreateForm.submitted'>
              Field requried!
            </div>
            <div class="alert alert-danger no-margin-bottom top-margin" ng-show='form.instanceCreateForm.instanceNameInput.$error.pattern && form.instanceCreateForm.submitted'>
              Must no contain special characters!
            </div>
            <div class="alert alert-danger no-margin-bottom top-margin" ng-show='instanceExists'>
              Instance with this name already exists.
            </div>
          </div>
        </div>
        <div class="form-group"
        ng-class="{'has-error' : ( (form.instanceCreateForm.displayLabel.$error.required || form.instanceCreateForm.displayLabel.$error.pattern) && form.instanceCreateForm.submitted)}">
          <label for="" class="control-labe col-sm-2">Display label</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" name="displayLabel" ng-model="instance.label" required ng-pattern="nameValidationPattern">

            <div class="alert alert-danger no-margin-bottom top-margin" ng-show='form.instanceCreateForm.displayLabel.$error.required && form.instanceCreateForm.submitted'>
              Field requried!
            </div>
            <div class="alert alert-danger no-margin-bottom top-margin" ng-show='form.instanceCreateForm.displayLabel.$error.pattern && form.instanceCreateForm.submitted'>
              Must no contain special characters!
            </div>
          </div>
        </div>
      </div>
      <div class="form-group">
          <div class="col-sm-10 col-sm-offset-2">
            <button class="btn btn-default" ng-click="isAdvancedClosed = !isAdvancedClosed">Advanced</button>
          </div>
      </div>
      <div collapse="isAdvancedClosed">
        <div class="form-group">
          <div class="col-sm-10 col-sm-offset-2">
            <div class="checkbox">
              <label>
                <input type="checkbox" ng-model='instance.visible'> Visible
              </label>
            </div>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-10 col-sm-offset-2">
            <label for="" class="control-label col-sm-2">Icon</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" name="iconUrl" ng-model="instance.icon_path">
            </div>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-10 col-sm-offset-2">
            <label for="" class="control-label col-sm-2">Icon64</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" name="icon64Url" ng-model="instance.icon64_path">
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Configuration</h3>
      </div>
      <div class="panel-body">
      <div class="form-group" ng-repeat="parameter in instance.properties"
        ng-class="{'has-error' : (form.instanceCreateForm[parameter.name].$error.required && form.instanceCreateForm.submitted)}" >
        <label for="" class="col-sm-3 control-label">{{parameter.description}}</label>
        <div class="col-sm-9">
          <input type="text" class="form-control"  name="{{parameter.name}}" ng-required="parameter.required" ng-model="parameter.value">
          <div class="alert alert-danger no-margin-bottom top-margin" ng-show='form.instanceCreateForm[parameter.name].$error.required && form.instanceCreateForm.submitted'>
            Field requried!
          </div>
        </div>
      </div>
      </div>
    </div>
  
</div>
<div class="modal-footer">
  <button class="btn btn-default" ng-click="cancel()">Cancel</button>
  <button class="btn btn-primary" ng-click="save()" type="submit">Save</button>
</div>
</form>