@(rootAccountName: String)(implicit request: play.api.mvc.Request[Any], customLinks: models.CustomLinks, meta: models.Meta)

@content = {
<!-- PAGE CONTENT -->
<div class="right_col" role="main" ng-init="batchChangeLimit = @meta.batchChangeLimit; defaultTtl = @meta.defaultTtl;
    manualReviewEnabled = @meta.manualBatchChangeReviewEnabled; maxGroupItemsDisplay = @meta.maxGroupItemsDisplay">

    <!-- BREADCRUMB -->
    <ul class="breadcrumb">
        <li><a href="/">Home</a></li>
        <li><a href="/dnschanges">DNS Changes</a></li>
        <li class="active">New DNS Change</li>
    </ul>
    <!-- END BREADCRUMB -->

    <!-- PAGE TITLE -->
    <div class="page-title"><h3><span class="fa fa-list-ol"></span> New DNS Change</h3></div>
    <!-- END PAGE TITLE -->


    <!-- PAGE CONTENT WRAPPER -->
    <div class="page-content-wrap">
        <div class="alert-wrapper">
            <div ng-repeat="alert in alerts">
                <notification ng-model="alert"></notification>
            </div>
        </div>

        <form novalidate name="createBatchChangeForm" class="createBatchChangeForm" ng-submit="createBatchChangeForm.$valid && createBatchChange(newBatch)">
            <div class="row">
                <div class="col-md-12">

                    <!-- SIMPLE DATABLE -->
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <div class="form-group">
                                <label class="h5">Description: </label>
                                <input type="text" class="form-control" ng-model="newBatch.comments">
                            </div>
                            @if(meta.sharedDisplayEnabled) {
                            <div class="form-group row" ng-class="{ownerGroupError: ownerGroupError}">
                                <div class="col-md-6">
                                    <label class="h5" for="recordOwnerGroup">Record Owner Group
                                        <span data-toggle="tooltip" data-placement="top" title="Record Owner Group is required if any records in the DNS change are in shared zones and not already owned.">
                                            <span class="fa fa-question-circle"></span>
                                        </span>
                                    </label>
                                    <select class="form-control" id="recordOwnerGroup" ng-model="newBatch.ownerGroupId" ng-options="group.id as group.name for group in myGroups | orderBy: 'name'">
                                    </select>
                                    <p ng-if="ownerGroupError"><strong>Record Owner Group is required for records in shared zones.</strong></p>
                                    <p class="help-block"><a href="/groups">Or you can create a new group from the Groups page.</a></p>
                                </div>
                            </div>
                            }
                            @if(meta.scheduledBatchChangesEnabled) {
                            <div class="form-group row">
                                <div class="col-md-4">
                                    <label class="h5">Request Date/Time:</label>
                                    <div class="radio no-top-margin">
                                        <label>
                                            <input type="radio" ng-model="scheduledOption" ng-value="false">
                                            Now
                                        </label><br/>
                                        <label>
                                            <input type="radio" ng-model="scheduledOption" ng-value="true">
                                            Later
                                        </label><br/>
                                    </div>
                                    <div ng-show="scheduledOption" class="form-group">
                                        <div class="input-group">
                                            <input type="text" name="scheduledTime" class="form-control" ng-model="newBatch.scheduledTime" />
                                            <div class="input-group-addon">{{ getLocalTimeZone() }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            }
                        </div>
                        <div class="panel-body">
                            <h4>Changes</h4>
                            <table class="table">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th class="col-md-2">Change Type</th>
                                    <th>Record Type</th>
                                    <th>Input Name
                                        <span data-toggle="tooltip" data-placement="top" title="Fully qualified domain name or IP address, depending on the record type.">
                                            <span class="fa fa-question-circle"></span>
                                        </span>
                                    </th>
                                    <th class="col-md-1">TTL (optional)</th>
                                    <th>Record Data</th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr ng-repeat="change in newBatch.changes track by $index" ng-class="{changeError: change.errors.length > 0 && !softErrors, softError: change.errors.length > 0 && softErrors}">
                                    <td><span>{{$index + 1}}</span></td>
                                    <td>
                                        <select class="form-control changeType" ng-model="change.changeType">
                                            <option value="Add">Add</option>
                                            <option value="DeleteRecordSet">DeleteRecordSet</option>
                                        </select>
                                    </td>
                                    <td>
                                        <select class="form-control" ng-model="change.type" ng-change="clearRecordData({{$index}})">
                                            <option value="A+PTR" selected>A+PTR</option>
                                            <option>AAAA+PTR</option>
                                            <option>A</option>
                                            <option>AAAA</option>
                                            <option>CNAME</option>
                                            <option>PTR</option>
                                            <option>TXT</option>
                                            <option>MX</option>
                                            <option>NS</option>
                                            <option>SRV</option>
                                            <option>NAPTR</option>
                                        </select>
                                    </td>
                                    <td>
                                        <input ng-if="change.type!=='PTR' && change.type!=='CNAME'" name="inputName_{{$index}}" type="text" ng-model="change.inputName" required="string" class="form-control" placeholder="e.g. test.example.com.">
                                        <input ng-if="change.type=='CNAME'" name="inputName_{{$index}}" type="text" ng-model="change.inputName" required="string" class="form-control" placeholder="e.g. alias.example.com.">
                                        <input ng-if="change.type=='PTR'" name="inputName_{{$index}}" type="text" ng-model="change.inputName" required="string" class="form-control" placeholder="e.g. 192.0.2.193">
                                        <p ng-show="createBatchChangeForm.$submitted">
                                            <span ng-show="createBatchChangeForm.inputName_{{$index}}.$error.required" class="batch-change-error-help">Input name is required!</span>
                                        </p>
                                    </td>
                                    <!--TTL based on change type-->
                                    <td ng-if="change.changeType=='Add'">
                                        <input name="ttl_{{$index}}" type="number" ng-model="change.ttl" min="30" max="2147483647" class="form-control" ng-disabled="change.changeType=='DeleteRecordSet'" placeholder="{{defaultTtl}}">
                                        <p ng-show="createBatchChangeForm.$submitted">
                                            <span ng-show="createBatchChangeForm.ttl_{{$index}}.$error.number || createBatchChangeForm.ttl_{{$index}}.$error.min || createBatchChangeForm.ttl_{{$index}}.$error.max" class="batch-change-error-help">TTL must be between 30 and 2147483647.</span>
                                        </p>
                                    </td>
                                    <td ng-if="change.changeType=='DeleteRecordSet'">
                                        <input class="form-control" disabled/>
                                    </td>
                                    <!--TTL based on change type-->
                                    <!--record data name based on record type and change type-->
                                    <td ng-if="change.type=='A+PTR'">
                                        <input name="record_address_{{$index}}" type="text" ng-model="change.record.address" required="string" class="form-control" placeholder="e.g. 1.1.1.1" ipv4>
                                        <p ng-show="createBatchChangeForm.$submitted">
                                            <span ng-show="createBatchChangeForm.record_address_{{$index}}.$error.required" class="batch-change-error-help">Record data is required!</span>
                                            <span ng-show="createBatchChangeForm.record_address_{{$index}}.$error.ipv4" class="batch-change-error-help">must be a valid IPv4 Address!</span>
                                        </p>
                                    </td>
                                    <td ng-if="change.type=='AAAA+PTR'">
                                        <input name="record_address_{{$index}}" type="text" ng-model="change.record.address" required="string" class="form-control" placeholder="e.g. fd69:27cc:fe91::60" ipv6>
                                        <p ng-show="createBatchChangeForm.$submitted">
                                            <span ng-show="createBatchChangeForm.record_address_{{$index}}.$error.required" class="batch-change-error-help">Record data is required!</span>
                                            <span ng-show="createBatchChangeForm.record_address_{{$index}}.$error.ipv6" class="batch-change-error-help">must be a valid IPv6 Address!</span>
                                        </p>
                                    </td>
                                    <td ng-if="change.type=='A'">
                                        <input name="record_address_{{$index}}" type="text" ng-model="change.record.address" ng-required="change.changeType=='Add'" class="form-control" placeholder="e.g. 1.1.1.1" ipv4>
                                        <p ng-show="createBatchChangeForm.$submitted">
                                            <span ng-show="createBatchChangeForm.record_address_{{$index}}.$error.required" class="batch-change-error-help">Record data is required!</span>
                                            <span ng-show="createBatchChangeForm.record_address_{{$index}}.$error.ipv4" class="batch-change-error-help">must be a valid IPv4 Address!</span>
                                        </p>
                                        <p class="help-block" ng-if="change.changeType=='DeleteRecordSet'">Record Data is optional.</p>
                                    </td>
                                    <td ng-if="change.type=='AAAA'">
                                        <input name="record_address_{{$index}}" type="text" ng-model="change.record.address" ng-required="change.changeType=='Add'" class="form-control" placeholder="e.g. fd69:27cc:fe91::60" ipv6>
                                        <p ng-show="createBatchChangeForm.$submitted">
                                            <span ng-show="createBatchChangeForm.record_address_{{$index}}.$error.required" class="batch-change-error-help">Record data is required!</span>
                                            <span ng-show="createBatchChangeForm.record_address_{{$index}}.$error.ipv6" class="batch-change-error-help">must be a valid IPv6 Address!</span>
                                        </p>
                                        <p class="help-block" ng-if="change.changeType=='DeleteRecordSet'">Record Data is optional.</p>
                                    </td>
                                    <td ng-if="change.type=='CNAME'">
                                        <input name="record_cname_{{$index}}" type="text" ng-model="change.record.cname" ng-required="change.changeType=='Add'" class="form-control" placeholder="e.g. target.example.com" ng-disabled="change.changeType=='DeleteRecordSet'" fqdn invalidip>
                                        <p ng-show="createBatchChangeForm.$submitted">
                                            <span ng-show="createBatchChangeForm.record_cname_{{$index}}.$error.required" class="batch-change-error-help">Record data is required!</span>
                                            <span ng-show="createBatchChangeForm.record_cname_{{$index}}.$error.fqdn" class="batch-change-error-help">CNAME data must be a fully qualified domain name!</span>
                                            <span ng-show="createBatchChangeForm.record_cname_{{$index}}.$error.invalidip" class="batch-change-error-help">CNAME data must be a fully qualified domain name, not an IP address!<br>Or you mean to create an A record, not a CNAME.</span>
                                        </p>
                                    </td>
                                    <td ng-if="change.type=='PTR'">
                                        <input name="record_ptr_{{$index}}" type="text" ng-model="change.record.ptrdname" ng-required="change.changeType=='Add'" class="form-control" placeholder="e.g. test.com.">
                                        <p ng-show="createBatchChangeForm.$submitted">
                                            <span ng-show="createBatchChangeForm.record_ptr_{{$index}}.$error.required" class="batch-change-error-help">Record data is required!</span>
                                        </p>
                                        <p class="help-block" ng-if="change.changeType=='DeleteRecordSet'">Record Data is optional.</p>
                                    </td>
                                    <td ng-if="change.type=='TXT'">
                                        <textarea name="record_txt_{{$index}}" type="text" ng-model="change.record.text" ng-required="change.changeType=='Add'" class="form-control" placeholder="e.g. attr=val"></textarea>
                                        <p class="help-block" ng-if="change.changeType=='DeleteRecordSet'">Record Data is optional.</p>
                                        <p ng-show="createBatchChangeForm.$submitted">
                                            <span ng-show="createBatchChangeForm.record_txt_{{$index}}.$error.required" class="batch-change-error-help">Record data is required!</span>
                                        </p>
                                    </td>
                                    <td ng-if="change.type=='MX'">
                                        <label class="batch-label">Preference</label>
                                        <input name="record_mx_preference_{{$index}}" type="number" ng-model="change.record.preference" ng-required="change.changeType=='Add' || change.record.exchange" class="form-control" placeholder="e.g. 1" ng-min="0" ng-max="65535">
                                        <p ng-show="createBatchChangeForm.$submitted">
                                            <span ng-show="createBatchChangeForm.record_mx_preference_{{$index}}.$error.required" class="batch-change-error-help">Preference is required!</span>
                                            <span ng-show="createBatchChangeForm.record_mx_preference_{{$index}}.$error.min" class="batch-change-error-help">Must be between 0 and 65535!</span>
                                            <span ng-show="createBatchChangeForm.record_mx_preference_{{$index}}.$error.max" class="batch-change-error-help">Must be between 0 and 65535!</span>

                                        </p>

                                        <br />

                                        <label class="batch-label">Exchange</label>
                                        <input name="record_mx_exchange_{{$index}}" type="text" ng-model="change.record.exchange" ng-required="change.changeType=='Add' || change.record.preference==0 || change.record.preference>0" class="form-control" placeholder="e.g. test.example.com." fqdn>
                                        <p ng-show="createBatchChangeForm.$submitted">
                                            <span ng-show="createBatchChangeForm.record_mx_exchange_{{$index}}.$error.required" class="batch-change-error-help">Exchange data is required!</span>
                                            <span ng-show="createBatchChangeForm.record_mx_exchange_{{$index}}.$error.fqdn" class="batch-change-error-help">Exchange data must be absolute!</span>
                                        </p>
                                        <p class="help-block" ng-if="change.changeType=='DeleteRecordSet'">Record Data is optional.</p>
                                    </td>
                                    <td ng-if="change.type=='NS'">
                                        <input name="record_address_{{$index}}" type="text" ng-model="change.record.nsdname" ng-required="change.changeType=='Add'" class="form-control" placeholder="e.g. 1.1.1.1">
                                        <p ng-show="createBatchChangeForm.$submitted">
                                            <span ng-show="createBatchChangeForm.record_address_{{$index}}.$error.required" class="batch-change-error-help">Record data is required!</span>
                                        </p>
                                        <p class="help-block" ng-if="change.changeType=='DeleteRecordSet'">Record Data is optional.</p>
                                    </td>
                                    <td ng-if="change.type=='SRV'">
                                        <label class="batch-label">Priority</label>
                                        <input name="record_srv_priority_{{$index}}" type="number" ng-model="change.record.priority" ng-required="change.changeType=='Add'" class="form-control" placeholder="e.g. 1" ng-min="0" ng-max="65535">
                                        <p ng-show="createBatchChangeForm.$submitted">
                                            <span ng-show="createBatchChangeForm.record_srv_priority_{{$index}}.$error.required" class="batch-change-error-help">Priority is required!</span>
                                            <span ng-show="createBatchChangeForm.record_srv_priority_{{$index}}.$error.min" class="batch-change-error-help">Must be between 0 and 65535!</span>
                                            <span ng-show="createBatchChangeForm.record_srv_priority_{{$index}}.$error.max" class="batch-change-error-help">Must be between 0 and 65535!</span>
                                        </p>
                                        <p class="help-block" ng-if="change.changeType=='DeleteRecordSet'">Record Data is optional.</p>
                                        <br />

                                        <label class="batch-label">Weight</label>
                                        <input name="record_srv_weight_{{$index}}" type="number" ng-model="change.record.weight" ng-required="change.changeType=='Add'" class="form-control" placeholder="e.g. 1" ng-min="0" ng-max="65535">
                                        <p ng-show="createBatchChangeForm.$submitted">
                                            <span ng-show="createBatchChangeForm.record_srv_weight_{{$index}}.$error.required" class="batch-change-error-help">Weight is required!</span>
                                            <span ng-show="createBatchChangeForm.record_srv_weight_{{$index}}.$error.min" class="batch-change-error-help">Must be between 0 and 65535!</span>
                                            <span ng-show="createBatchChangeForm.record_srv_weight_{{$index}}.$error.max" class="batch-change-error-help">Must be between 0 and 65535!</span>
                                        </p>
                                        <p class="help-block" ng-if="change.changeType=='DeleteRecordSet'">Record Data is optional.</p>

                                        <br />

                                        <label class="batch-label">Port</label>
                                        <input name="record_srv_port_{{$index}}" type="number" ng-model="change.record.port" ng-required="change.changeType=='Add'" class="form-control" placeholder="e.g. 1" ng-min="0" ng-max="65535">
                                        <p ng-show="createBatchChangeForm.$submitted">
                                            <span ng-show="createBatchChangeForm.record_srv_port_{{$index}}.$error.required" class="batch-change-error-help">Port is required!</span>
                                            <span ng-show="createBatchChangeForm.record_srv_port_{{$index}}.$error.min" class="batch-change-error-help">Must be between 0 and 65535!</span>
                                            <span ng-show="createBatchChangeForm.record_srv_port_{{$index}}.$error.max" class="batch-change-error-help">Must be between 0 and 65535!</span>
                                        </p>
                                        <p class="help-block" ng-if="change.changeType=='DeleteRecordSet'">Record Data is optional.</p>

                                        <br />

                                        <label class="batch-label">Target</label>
                                        <input name="record_srv_target_{{$index}}" type="text" ng-model="change.record.target" ng-required="change.changeType=='Add'" class="form-control" placeholder="e.g. test.com">
                                        <p ng-show="createBatchChangeForm.$submitted">
                                            <span ng-show="createBatchChangeForm.record_srv_target_{{$index}}.$error.required" class="batch-change-error-help">Target is required!</span>
                                        </p>
                                        <p class="help-block" ng-if="change.changeType=='DeleteRecordSet'">Record Data is optional.</p>
                                    </td>
                                    <td ng-if="change.type=='NAPTR'">
                                        <label class="batch-label">Order</label>
                                        <input name="record_naptr_order_{{$index}}" type="number" ng-model="change.record.order" ng-required="change.changeType=='Add'" class="form-control" placeholder="e.g. 1" ng-min="0" ng-max="65535">
                                        <p ng-show="createBatchChangeForm.$submitted">
                                            <span ng-show="createBatchChangeForm.record_naptr_order_{{$index}}.$error.required" class="batch-change-error-help">Order is required!</span>
                                            <span ng-show="createBatchChangeForm.record_naptr_order_{{$index}}.$error.min" class="batch-change-error-help">Must be between 0 and 65535!</span>
                                            <span ng-show="createBatchChangeForm.record_naptr_order_{{$index}}.$error.max" class="batch-change-error-help">Must be between 0 and 65535!</span>
                                        </p>
                                        <p class="help-block" ng-if="change.changeType=='DeleteRecordSet'">Record Data is optional.</p>

                                        <br />

                                        <label class="batch-label">Preference</label>
                                        <input name="record_naptr_preference_{{$index}}" type="number" ng-model="change.record.preference" ng-required="change.changeType=='Add'" class="form-control" placeholder="e.g. 1" ng-min="0" ng-max="65535">
                                        <p ng-show="createBatchChangeForm.$submitted">
                                            <span ng-show="createBatchChangeForm.record_naptr_preference_{{$index}}.$error.required" class="batch-change-error-help">Preference is required!</span>
                                            <span ng-show="createBatchChangeForm.record_naptr_preference_{{$index}}.$error.min" class="batch-change-error-help">Must be between 0 and 65535!</span>
                                            <span ng-show="createBatchChangeForm.record_naptr_preference_{{$index}}.$error.max" class="batch-change-error-help">Must be between 0 and 65535!</span>
                                        </p>
                                        <p class="help-block" ng-if="change.changeType=='DeleteRecordSet'">Record Data is optional.</p>

                                        <br />

                                        <label class="batch-label">Flags</label>
                                        <select name="record_naptr_flags_{{$index}}" type="text" ng-model="change.record.flags" ng-required="change.changeType=='Add'" ng-options="flag for flag in naptrFlags" class="form-control" placeholder="e.g. U, S, A or P"></select>
                                        <p ng-show="createBatchChangeForm.$submitted">
                                            <span ng-show="createBatchChangeForm.record_naptr_flags_{{$index}}.$error.required" class="batch-change-error-help">Flags is required!</span>
                                        </p>
                                        <p class="help-block" ng-if="change.changeType=='DeleteRecordSet'">Record Data is optional.</p>

                                        <br />

                                        <label class="batch-label">Service</label>
                                        <input name="record_naptr_service_{{$index}}" type="text" ng-model="change.record.service" ng-required="change.changeType=='Add'" class="form-control" placeholder="e.g. someservice">
                                        <p ng-show="createBatchChangeForm.$submitted">
                                            <span ng-show="createBatchChangeForm.record_naptr_service_{{$index}}.$error.required" class="batch-change-error-help">Service is required!</span>
                                        </p>
                                        <p class="help-block" ng-if="change.changeType=='DeleteRecordSet'">Record Data is optional.</p>

                                        <br />

                                        <label class="batch-label">Regexp</label>
                                        <input name="record_naptr_regexp_{{$index}}" type="text" ng-model="change.record.regexp" class="form-control" placeholder="e.g. someregex">
                                        <p class="help-block" ng-if="change.changeType=='DeleteRecordSet'">Record Data is optional.</p>

                                        <br />

                                        <label class="batch-label">Replacement</label>
                                        <input name="record_naptr_replacement_{{$index}}" type="text" ng-model="change.record.replacement" ng-required="change.changeType=='Add'" class="form-control" placeholder="e.g. somerep">
                                        <p ng-show="createBatchChangeForm.$submitted">
                                            <span ng-show="createBatchChangeForm.record_naptr_replacement_{{$index}}.$error.required" class="batch-change-error-help">Replacement is required!</span>
                                        </p>
                                        <p class="help-block" ng-if="change.changeType=='DeleteRecordSet'">Record Data is optional.</p>
                                    </td>
                                    <!--end record data name based on record type and change type-->
                                    <td class="col-md-3" ng-if="batchChangeErrors">
                                        <p ng-repeat="batchError in change.errors">
                                            {{batchError}}
                                        </p>
                                    </td>
                                    <td><button type="button" class="btn btn-danger batch-change-delete" ng-click="deleteSingleChange($index)">Delete</button></td>
                                </tr>
                                </tbody>
                            </table>
                            <div class="form-group">
                                <button type="button" id="addChange" class="btn btn-default" ng-click="addSingleChange()" ng-disabled="newBatch.changes.length >= batchChangeLimit"><span class="glyphicon glyphicon-plus"></span> Add a Change</button>
                                <label class="batch-change-csv-label btn btn-default" for="batchChangeCsv" id="batchChangeCsvImportLabel">
                                    <span><span class="glyphicon glyphicon-import"></span> Import CSV</span>
                                </label>
                                <input type="file" id="batchChangeCsv" ng-model="csvInput" name="batchChangeCsv" class="batchChangeCsv" ng-change="uploadCSV(createBatchChangeForm.batchChangeCsv.$viewValue, batchChangeLimit )" batch-change-file>
                                <p><a href="https://www.vinyldns.io/portal/dns-changes#dns-change-csv-import" target="_blank" rel="noopener noreferrer">See documentation for sample CSV</a></p>
                            </div>
                            <p ng-if="newBatch.changes.length >= batchChangeLimit">Limit reached. Cannot add more than {{batchChangeLimit}} records per DNS change.</p>
                        </div>
                        <div class="panel-footer clearfix">
                            <div ng-if="formStatus=='pendingSubmit'" class="pull-right">
                                <button type="button" id="create-batch-changes-button" class="btn btn-primary" ng-click="submitChange(manualReviewEnabled)">Submit</button>
                            </div>
                            <div ng-if="formStatus=='pendingConfirm'" class="pull-right">
                                <div class="modal fade" id="loader" tabindex="-1" role="dialog" >
                                    <div class="spinner" ></div>
                                </div>
                                <span ng-if="!batchChangeErrors">{{ confirmationPrompt }}</span>
                                <span ng-if="batchChangeErrors" class="batch-change-error-help">There were errors, please review the highlighted rows and then proceed.</span>
                                <button class="btn btn-default" ng-click="cancelSubmit()">Cancel</button>
                                <button class="btn btn-success" type="submit" ng-click="confirmSubmit(createBatchChangeForm)">Confirm</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
}

@plugins = {}

@main(rootAccountName)("DnsChangeNewController")("New DNS Change")(content)(plugins)
