<form class="row container" name="editForm" auto-save-form auto-save-watch="myform" auto-save-callback="update">

    <div class="col-xs-2 col-sm-4 col-md-5 add-field">

        <div class="row add-field-title">
            <h3 class="col-md-12 hidden-sm hidden-xs">Click to Add New Field</h3>
            <h4 class="col-sm-12 hidden-xs hidden-md hidden-lg">Add New Field</h5>
            <h5 class="col-sm-12 hidden-sm hidden-md hidden-lg">Add Field</h5>
        </div>
        <div class="panel-group row" class="draggable" ng-model="addField.types">

            <div class="col-xs-12 col-sm-12 col-md-6" ng-repeat="type in addField.types" style="padding-top:7.5px;">
                <div class="panel panel-default" style="background-color:#f5f5f5;">
                    <div class="panel-heading" ng-click="addNewField(true, type.name)" style="cursor: pointer; font-size:14px;">
                        <span>
                            <field-icon-directive type-name="{{type.name}}">
                            </field-icon-directive>
                        </span>
                        
                        <span class="hidden-xs" style="padding-left:0.3em;">{{type.value}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

	<div class="col-xs-10 col-sm-8 col-md-7 current-fields container">
        <div class="row">
            <div class="col-sm-12 col-md-10">
                <div class="panel panel-default startPage">
                    <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-target="#collapseStart">
                        <h4 class="text-center">
                            Start Page
                            <span class="pull-right">
                                <i class="fa fa-chevron-right" ng-hide="startPage.isOpen">
                                </i>
                                <i class="fa fa-chevron-down" ng-show="startPage.isOpen">
                                </i>
                            </span>
                        </h4>
                    </div>

                    <div id="collapseStart" class="panel-collapse collapse">
                        <div class="panel-body">                      

                            <div class="row hidden-sm hidden-xs">
                                <div class="col-md-12">
                                    <h4>Preview Start Page</h4>
                                </div>
                                <ul class="col-md-12 container" style="list-style:none;border:2px lightgray solid;">
   
                                    <div class="field row">
                                        <div class="col-xs-12 text-center" style="overflow-wrap: break-word;">
                                            <h1>{{myform.startPage.introTitle}}</h1>
                                        </div>
                                        <div class="col-xs-10 col-xs-offset-1 text-left" style="overflow-wrap: break-word;">
                                            <p style="color:#ddd;">{{myform.startPage.introParagraph}}</p>
                                        </div>
                                    </div>
                                    <div class="row form-actions" style="padding-bottom:3em; padding-left: 1em; padding-right: 1em;">
                                        <p ng-repeat="button in myform.startPage.buttons" class="text-center" style="display:inline;">
                                            <button class="btn btn-info" type="button" ng-style="{'background-color':button.bgColor, 'color':button.color}">
                                                <a href="{{button.url}}" style="font-size: 1.6em; text-decoration: none; color: inherit;" > 
                                                    {{button.text}}
                                                </a>
                                            </button>
                                        </p>
                                    </div>
                                    <div class="row form-actions">
                                        <button ng-click="exitStartPage()" class="btn btn-info col-md-8 col-md-offset-2 col-lg-4 col-lg-offset-4" type="button">
                                            <a style="color:white; font-size: 1.6em; text-decoration: none;">
                                                Continue to Form
                                            </a>
                                        </button>
                                    </div>
                                </ul>
                            </div>

                            <div class="row">
                                <div class="col-xs-12">
                                    <h4>Edit Start Page</h4>
                                    <br>
                                </div>
                            </div> 

                            <div class="row question">
                                <div class="col-md-4 col-sm-12">Intro Title:</div>
                                <div class="col-md-8 col-sm-12">
                                    <input type="text" 
                                    ng-model="myform.startPage.introTitle" 
                                    name="introTitleStartPage" 
                                    value="{{myform.startPage.introTitle}}" required>
                                </div>
                            </div>

                            <div class="row question">
                                <div class="col-md-4 col-sm-12">Intro Paragraph:</div>
                                <div class="col-md-8 col-sm-12">
                                    <textarea type="text"
                                    ng-model="myform.startPage.introParagraph" 
                                    name="introParagraphStartPage"/>
                                </div>
                            </div>

                            <div class="row"><br><br></div>

                            <div class="row options buttons">
                                <div class="col-md-3 col-xs-12">Buttons:</div>
                                <div class="col-md-9 col-xs-12">
                                    <div ng-repeat="button in myform.startPage.buttons track by button._id" class="row" style="padding-bottom:1em;">

                                        <div class="col-xs-5">
                                            <span>Text</span>
                                            <input type="text" 
                                            name="{{button.text}}_buttonText_startPage" 
                                            ng-model="button.text" 
                                            value="{{button.text}}" 
                                            placeholder="Button Text">
                                        </div>


                                        <div class="col-xs-5">
                                            <span>Link</span>
                                            <input type="text" 
                                            name="{{button.url}}_url_startPage" 
                                            ng-model="button.url" 
                                            value="{{button.url}}" 
                                            placeholder="http://aeouaou.com/aoeuoa">
                                        </div>

                                        <div class="col-xs-2">  
                                            <a class="btn btn-danger btn-mini right" type="button" ng-click="deleteButton(button)">
                                                <i class="fa fa-trash-o"></i>
                                            </a>
                                        </div>
                                    </div>

                                    <div class="row"><br></div> 
                                    <div class="row">                                   
                                        <button class="btn btn-primary btn-small col-md-offset-6 col-md-6 col-sm-4 col-sm-offset-8 col-xs-4 col-xs-offset-8" type="button" ng-click="addButton()">
                                            <i class="icon-plus icon-white"></i> Add Button
                                        </button>
                                    </div>
                                </div>
                            </div> 
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12 col-md-10"><hr></div>
        </div>
        <div class="row">
            <div class="col-sm-12 col-md-8 dropzoneContainer">
                <accordion close-others="accordion.oneAtATime" ui-sortable="dropzone" ng-model="myform.form_fields" class="dropzone">

                    <accordion-group data-ng-repeat="field in myform.form_fields track by field._id" is-open="accordion[$index].isOpen" on-finish-render="editFormFields" ng-if="!field.deletePreserved">

                        <accordion-heading>

                            <div class="handle">

                                <span class="pull-left" ng-switch="field.fieldType">
                                    <field-icon-directive type-name="{{field.fieldType}}"></field-icon-directive>
                                </span>
                                <span style="padding-left:1.2em;">
                                    {{field.title}} 
                                    <span ng-show="field.required">*</span>
                                </span>
                                <span class="pull-right">
                                    <i class="fa fa-chevron-right" ng-hide="accordion[$index].isOpen">
                                    </i>
                                    <i class="fa fa-chevron-down" ng-show="accordion[$index].isOpen">
                                    </i>
                                </span>
                            </div>
                        </accordion-heading>
                        <div class="accordion-edit container">

                            <div class="row hidden-sm hidden-xs">
                                <div class="col-md-12">
                                    <h4>Preview Field</h4>
                                </div>
                                <ul class="col-md-12 container" style="list-style:none;border:2px lightgray solid;">
                                    <field-directive field="field" validate="false">
                                    </field-directive>
                                </ul>
                                <hr>
                            </div>

                            <div class="row">
                                <div class="col-xs-12">
                                    <h4>Edit Field</h4>
                                    <br>
                                </div>
                            </div> 

                            <div class="row question">
                                <div class="col-md-4 col-sm-12">Question Title:</div>
                                <div class="col-md-8 col-sm-12">
                                <input type="text" ng-model="field.title" name="title{{field._id}}" value="{{field.title}}" required></div>
                            </div>

                            <div class="row"><br></div> 

                            <div class="row description">
                                <div class="col-md-4 col-sm-12">Description:</div>
                                <div class="col-md-8 col-sm-12"><textarea type="text" ng-model="field.description" name="description{{field._id}}"value="{{field.description}}"></textarea> </div>
                            </div>

                            <div class="row" ng-show="showAddOptions(field)"><br></div>
                            <div class="row options" ng-show="showAddOptions(field)">
                                <div class="col-md-4 col-xs-12">Options:</div>
                                <div class="col-md-8 col-xs-12">
                                    <div ng-repeat="option in field.fieldOptions track by option.option_id" class="row">
                                        <input type="text" name="{{option.option_value}}{{field._id}}" ng-model="option.option_value" class="col-xs-5">

                                        <a class="btn btn-danger btn-mini right" type="button" ng-click="deleteOption(field, option)" class="col-xs-3">
                                            <i class="fa fa-trash-o"></i>
                                        </a>
                                    </div>
                                    <div class="row">                                                
                                        <button class="btn btn-primary btn-small col-md-offset-0 col-md-6 col-sm-4 col-sm-offset-4 col-xs-6 col-xs-offset-6" type="button" ng-click="addOption(field)">
                                            <i class="icon-plus icon-white"></i> Add Option
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <div class="row"><br></div> 

                            <div class="row">
                                <div class="col-md-4 col-xs-12 field-title">Required:</div>
                                <div class="col-md-8 col-xs-12 field-input">
                                    <label class="btn col-xs-5">
                                        <input type="radio" ng-value="true" ng-model="field.required" name="required{{field._id}}"/>
                                        <span> &nbsp; Yes</span>
                                    </label>

                                    <label class="btn col-xs-5 col-xs-offset-1">
                                        <input type="radio" ng-value="false" ng-model="field.required" name="required{{field._id}}"/>
                                        <span> &nbsp; No</span>
                                    </label>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-4 col-xs-12 field-input">Disabled:</div>
                                <div class="col-md-8 col-xs-12 field-input">
                                    <label class="btn col-xs-5">
                                        <input type="radio" ng-value="true" 
                                        ng-model="field.disabled" name="disabled{{field._id}}"/>
                                        <span> &nbsp; Yes</span>
                                    </label>

                                    <label class="btn col-xs-5 col-xs-offset-1">
                                        <input type="radio" ng-value="false" 
                                        ng-model="field.disabled" name="disabled{{field._id}}"/>
                                        <span> &nbsp; No</span>
                                    </label>
                                </div>
                            </div>

                        </div>
                    </accordion-group>

                    <div class="panel panel-default" style="border-style: dashed; border-color: #a9a9a9;">
                        <div class="panel-heading">
                            <h4 class="panel-title text-center" style="color: #a9a9a9;">
                                Click on Fields to add them here
                            </h4>
                        </div>
                    </div>

                    <hr>
                </accordion>
            </div>

            <div class="col-md-1 hidden-xs hidden-sm" style="padding:0 5px;" >
                <div class="panel-group tool-panel text-center">
                    <div class="panel panel-default" ng-repeat="field in myform.form_fields track by field._id" ng-if="!field.deletePreserved">
                        <div class="panel-heading" style="padding: 10px 10px; height: 37px;" ng-click="deleteField($index)">
                            <span class="text-center">
                                <a href="" class="fa fa-trash-o"></a>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-1 hidden-xs hidden-sm" style="padding:0 5px;">
                <div class="panel-group tool-panel text-center">
                    <div class="panel panel-default" ng-repeat="field in myform.form_fields track by field._id" ng-if="!field.deletePreserved">
                        <div class="panel-heading" style="padding: 10px 10px; height: 37px;" ng-click="duplicateField($index)">
                            <span class="text-center">
                                <a href="" class="fa fa-files-o"></a>
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-2 hidden-xs hidden-sm" style="padding:0 5px;" ng-if="myform.plugins.oscarhost.baseUrl">
                <div class="panel-group text-center">
                    <div class="panel panel-default" ng-repeat="field in myform.form_fields track by field._id" ng-if="!field.deletePreserved" style="border: none;">
                    
                        <select ng-model="myform.plugins.oscarhost.settings.fieldMap[field._id]" style="height:39.2px">
                            <option value="">N/A</option>
                            <option ng-repeat="oscarhost_field in oscarFieldsLeft(field._id)"
                                    ng-selected="oscarhost_field == myform.plugins.oscarhost.settings.fieldMap[field._id]"
                                    ng-value="oscarhost_field">
                                {{oscarhost_field}}
                            </option>
                        </select>    
                    </div>
                </div>
            </div>
        </div>
    </div>

</form>
