<div class="config-form container">
    <div class="row">

        <!-- PDF Generation/EMR Settings -->
        <div class="col-md-6 col-sm-12 container">
            <div class="row">
                <div class="col-sm-12">
                    <h2 class="hidden-sm hidden-xs">PDF Generation/EMR</h2>
                    <h3 class="hidden-lg hidden-md">PDF Generation/EMR</h3>
                </div>
            </div>

            <!-- autofillPDFs yes/no field -->
            <div class="row field">
                <div class="field-title col-sm-6">
                    <h5>Save Submissions as PDFs?</h5>
                </div>

                <div class="field-input col-sm-6">

                    <label>
                        <input type="radio" data-ng-value="true" ng-model="myform.autofillPDFs"  ng-required="true" />
                        &nbsp;<span>Yes</span>
                    </label>

                    <label>
                        <input type="radio" data-ng-value="false" ng-model="myform.autofillPDFs"  ng-required="true" />
                        &nbsp;<span>No</span>
                    </label>

                    <!-- <span class="required-error" ng-show="field.required && !field.fieldValue">* required</span> -->
                </div>
            </div>

            <!-- Upload PDF Field -->
            <div class="row field" ng-if="myform.autofillPDFs || myform.isGenerated">
                <div class="col-sm-6 field-title">
                    <h5>Upload Your PDF Template</h5>
                </div>
                <div class="col-sm-6 field-input">
                    <div class="input-group ">
                        <div tabindex="-1" class="form-control file-caption">
                            <span class="file-caption-ellipsis" ng-if="!myform.pdf">…</span>
                            <div class="file-caption-name" ng-if="myform.pdf">
                                {{myform.pdf.originalname}}
                            </div>
                        </div>
                        <div class="input-group-btn">
                            <button type="button"  ng-if="myform.pdf" ng-click="removePDF();" title="Clear selected files" class="btn btn-danger fileinput-remove fileinput-remove-button">
                                <i class="glyphicon glyphicon-trash"  ></i> 
                                Delete
                            </button>

                            <button type="button" ng-if="pdfLoading" title="Abort ongoing upload" class="btn btn-default" ng-click="cancelUpload()">
                                <i class="glyphicon glyphicon-ban-circle"></i> 
                                Cancel
                            </button>

                            <div class="btn btn-success btn-file" ngf-select ngf-change="uploadPDF($files)" ng-if="!myform.pdf"> 
                                <i class="glyphicon glyphicon-upload"></i>
                                Upload your PDF
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Generate form from PDF yes/no field -->
            <div class="row field">
                <div class="col-sm-6 field-title">
                    <h5>Autogenerate Form?</h5>
                </div>
                <div class="col-sm-6 field-input">

                    <label>
                        <input type="radio" data-ng-value="true" ng-model="myform.isGenerated"  ng-required="true" />
                        &nbsp;<span>Yes</span>
                    </label>

                    <label>
                        <input type="radio" data-ng-value="false" ng-model="myform.isGenerated"  ng-required="true" />
                        &nbsp;<span>No</span>
                    </label>
                </div>
            </div>

            <!-- activate oscarhost API yes/no field -->
            <div class="row field">
                <div class="field-title col-sm-6">
                    <h5>Use Oscarhost API?</h5>
                </div>

                <div class="field-input col-sm-6">

                    <label>
                        <input type="radio" data-ng-value="true" ng-model="oscarhostAPI"  ng-required="true" />
                        &nbsp;<span>Yes</span>
                    </label>

                    <label>
                        <input type="radio" data-ng-value="false" ng-model="oscarhostAPI"  ng-required="true" />
                        &nbsp;<span>No</span>
                    </label>

                    <!-- <span class="required-error" ng-show="field.required && !field.fieldValue">* required</span> -->
                </div>
            </div>
            <div class="row field" ng-if="oscarhostAPI">
                <div class="field-title col-sm-4">
                    <h5>Oscarhost API Username</h5>
                </div>

                <div class="col-sm-8">
                    <input type="text" 
                        ng-model="myform.plugins.oscarhost.auth.user" 
                        value="{{myform.plugins.oscarhost.auth.user}}"
                        style="width: 100%;"
                        required>
                </div>
            </div>
            <div class="row field" ng-if="oscarhostAPI">
                <div class="field-title col-sm-4">
                    <h5>Oscarhost API Password</h5>
                </div>

                <div class="col-sm-8">
                    <input type="password" 
                        ng-model="myform.plugins.oscarhost.auth.pass" 
                        value="{{myform.plugins.oscarhost.auth.pass}}"
                        style="width: 100%;"
                        required>
                </div>
            </div>
            <div class="row field" ng-if="oscarhostAPI">
                <div class="field-title col-sm-4">
                    <h5>Oscarhost API URL</h5>
                </div>

                <div class="col-sm-8">
                    <input type="link" 
                        ng-model="myform.plugins.oscarhost.baseUrl" 
                        value="{{myform.plugins.oscarhost.baseUrl}}"
                        style="width: 100%;"
                        required>
                </div>
            </div>
            <div class="row field" ng-if="oscarhostAPI">
                <div class="field-title col-sm-4">
                    <h5>Oscarhost API Update Type</h5>
                </div>

                <div class="col-sm-8">
                    <select ng-model="myform.plugins.oscarhost.settings.updateType">
                        <option ng-repeat="updateType in myform.plugins.oscarhost.settings.validUpdateTypes" ng-selected="myform.plugins.oscarhost.settings.updateType == updateType" ng-value="updateType">
                            {{updateType}}
                        </option>
                    </select> 
                </div>
            </div>


            <!-- Generate typeform from TellForm yes/no field -->
            <!-- <div class="row field">
                <div class="col-sm-6 field-title">
                    <h5>Autogenerate into Typeform?</h5>
                </div>
                <div class="col-sm-6 field-input">
                    <label>
                        <input type="radio" data-ng-value="true" ng-model="myform.Typeform.isGenerated"  ng-required="true" />
                        &nbsp;<span>Yes</span>
                    </label>

                    <label>
                        <input type="radio" data-ng-value="false" ng-model="myform.Typeform.isGenerated"  ng-required="true" />
                        &nbsp;<span>No</span>
                    </label>
                </div>
            </div>
            <div class="row field" ng-if="myform.Typeform.isGenerated">
                <div class="field-title col-sm-4">
                    <h5>Typeform.IO Build API Key</h5>
                </div>

                <div class="col-sm-8">
                    <input type="text" 
                        ng-model="myform.Typeform.build_api_key" 
                        value="{{myform.Typeform.build_api_key}}"
                        style="width: 100%;">
                </div>
            </div>
            <div class="row field" ng-if="myform.Typeform.isGenerated">
                <div class="field-title col-sm-4">
                    <h5>Generated Typeform URL</h5>
                </div>

                <div class="col-sm-8">
                    <span type="text" ng-bind="myform.Typeform.url"></span>
                </div>
            </div> -->


            <!-- !!!!!!DAVID: TODO: Finish this so we can upload pdfFieldMap!!!!!!!!! -->
           
            <!-- Map form inputs to PDF inputs Field -->
            <!-- <div class="textfield field row" ng-if="myform.pdf">
                <div class="col-xs-2 field-title field-title">Map Form Fields to PDF Fields </div>
                <div class="col-xs-4 field-input field-input">
                    <div class="row" ng-repeat="field in formFields">
                        <div class="col-xs-4">
                            {{field.name}}
                        </div>
                        <div class="col-xs-8">
                            <label style="display:inline" ng-repeat="unbindedPdfField in getUnbindedPdfFields[{{field.fieldType}}]">
                                <input type="radio" value="unbindedPdfField._id" ng-model="field"/>
                                &nbsp;<span ng-bind="field.pdfField"></span>
                            </label>
                        </div>
                    </div>
                </div>
            </div> -->
        </div>

        <div class="col-sm-12 hidden-md hidden-lg">
            <br>
            <hr>
        </div>

        <!-- Advanced Settings -->
        <div class="col-md-5 col-md-offset-1 col-sm-12 container">
            <div class="row">
                <div class="col-sm-12">
                    <h2 class="hidden-sm hidden-xs">Advanced Settings</h2>
                    <h3 class="hidden-lg hidden-md">Advanced Settings</h3>
                </div>
            </div>

            <div class="row field">
                <div class="field-title col-sm-4">
                    <h5>Form Name</h5>
                </div>

                <div class="col-sm-8">
                    <input type="text" 
                        ng-model="myform.title" 
                        value="{{myform.title}}"
                        style="width: 100%;"
                        ng-minlength="4"
                        ng-pattern="/^[a-zA-Z0-9 \-.]*$/">
                </div>
            </div>

            <div class="row field">
                <div class="field-title col-sm-6">
                    <h5>Form Status</h5>
                </div>

                <div class="field-input col-sm-6">

                    <label>
                        <input type="radio" data-ng-value="true" ng-model="myform.isLive"  ng-required="true" style="background-color:#33CC00;"/>
                        &nbsp;<span>Public</span>
                    </label>

                    <label>
                        <input type="radio" data-ng-value="false" ng-model="myform.isLive"  ng-required="true" />
                        &nbsp;<span>Private</span>
                    </label>

                    <!-- <span class="required-error" ng-show="field.required && !field.fieldValue">* required</span> -->
                </div>
            </div>
            
            <div class="row field">
                <div class="col-xs-6 field-title">Language</div>
                <div class="col-xs-4 field-input">
                    <select ng-model="myform.language">
                        <option ng-repeat="language in languages" 
                                ng-selected="language == myform.language"
                                value="{{language}}">
                            {{language}}
                        </option>
                    </select>    
                    <span class="required-error" ng-show="field.required && !field.fieldValue">* required</span>
                </div>
            </div>
            <div class="row field">
                <div class="field-title col-sm-6">
                    <h5>Display Form Footer?</h5>
                </div>

                <div class="field-input col-sm-6">
                    <label>
                        <input type="radio" data-ng-value="false" ng-model="myform.hideFooter"  ng-required="true" />
                        &nbsp;<span>Yes</span>
                    </label>

                    <label>
                        <input type="radio" data-ng-value="true" ng-model="myform.hideFooter"  ng-required="true" />
                        &nbsp;<span>No</span>
                    </label>
                </div>
            </div>

            <div class="row field">
                <div class="field-title col-sm-6">
                    <h5>Display Start Page?</h5>
                </div>

                <div class="field-input col-sm-6">

                    <label>
                        <input type="radio" data-ng-value="true" ng-model="myform.startPage.showStart"  ng-required="true" style="background-color:#33CC00;"/>
                        &nbsp;<span>Yes</span>
                    </label>

                    <label>
                        <input type="radio" data-ng-value="false" ng-model="myform.startPage.showStart"  ng-required="true" />
                        &nbsp;<span>No</span>
                    </label>

                    <!-- <span class="required-error" ng-show="field.required && !field.fieldValue">* required</span> -->
                </div>
            </div>
        </div>
    </div>
    <div class="row">
            <div class="col-sm-offset-4 col-sm-2">
                <button class="btn btn-primary btn-large" type="button" ng-click="update(false, null)"><i class="icon-arrow-left icon-white"></i> Save Changes</button>
            </div>
            <div class="col-sm-1">
                <button class="btn btn-default" type="button" ng-click="resetForm()"><i class="icon-eye-open icon-white"></i> Cancel</button>
            </div>
    </div>
</div>