<form name="requestForm" novalidate="novalidate" class="form-overflow-scroll">
    <div class="modal-header">
        <h3><span translate>cases.newRequest.requestTitle</span></h3>
    </div>
    <div class="modal-body">
        <div id="accordion" class="panel-group">
            <div class="row">
                <div class="col-sm-2 form-group">
                    <label for="requestType" translate>cases.newRequest.requestType.label</label>
                </div>
                <div class="col-sm-4 form-group">
                    <select id="requestType" ng-model="config.data.requestType"
                            ng-options="requestType.key as requestType.value | translate for requestType in requestTypes"
                            class="form-control input-md" ng-change="setPerson(blankPerson); config.data.originalRequestNumber = null">
                    </select>
                </div>
                <div class="col-sm-2 form-group">
                    <label for="subject" translate>cases.newRequest.receivedDate.label</label>
                </div>
                <div class="col-sm-4 form-group">
                    <date-time-picker data="config.data.receivedDate" show-time="true" max-date="maxDate"></date-time-picker>
                </div>
            </div>
            <div class="row" ng-if="!isNewRequestType()">
                <div class="col-sm-2 form-group">
                    <label for="originalRequestNumber" translate>cases.newRequest.originalRequestNumber.label </label>
                    <span class="required-asterisk">*</span>
                </div>
                <div class="col-sm-4 form-group">
                    <input type="text" class="form-control" id="originalRequestNumber" ng-model="config.data.originalRequestNumber"
                            placeholder="{{'cases.newRequest.originalRequestNumber.placeholder' | translate}}" name="originalRequestNumber"
                            ng-blur="populateAppeal()" ng-click="requestInReleaseStatusSearch()" required="required" onkeydown="return event.keyCode !== 13;">
                </div>
            </div>
            <div class="panel panel-default" id="topSection1">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <span translate>cases.newRequest.section1</span></h4>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-sm-3 form-group">
                            <label for="requesterCategory" translate>cases.comp.main.category.label </label>
                            <span class="required-asterisk">*</span>
                        </div>
                        <div class="col-sm-5 form-group">
                            <select name="requesterCategory" id="requesterCategory" ng-model="config.data.requestCategory"
                                    ng-options="category.key as category.value | translate for category in categories"
                                    class="form-control input-md" required="required">
                            </select>
                            <span class="text-danger" ng-if="!config.data.requestCategory && formInvalid" translate>cases.newRequest.requestCategory.validation.error</span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-3 form-group">
                            <label for="deliveryMethodOfResponse" translate>cases.comp.main.deliveryMethodOfResponse.label </label>
                            <span class="required-asterisk-delivery-method">*</span>
                        </div>
                        <div class="col-sm-5 form-group">
                            <select name="deliveryMethodOfResponse" id="deliveryMethodOfResponse"
                                    ng-model="config.data.deliveryMethodOfResponse"
                                    ng-options="deliveryMethodOfResponse.key as deliveryMethodOfResponse.value | translate for deliveryMethodOfResponse in deliveryMethodOfResponses"
                                    class="form-control input-md" required="required">
                            </select>
                            <span class="text-danger" ng-if="!config.data.deliveryMethodOfResponse && formInvalid" translate>cases.newRequest.deliveryMethodOfResponse.validation.error</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <span translate>cases.newRequest.section2</span>
                </h4>
            </div>
            <div class="panel-body" ng-show="config.data.requestCategory && config.data.deliveryMethodOfResponse">
                <div class="row" ng-hide="!isNewRequestType()">
                    <div class="col-sm-12 form-group">
                        <div class="col-sm-4">
                            <label>
                                <input type="radio" ng-model="isPickExistingPerson" ng-value="false" ng-change="pickExistingUserChange()">
                                <translate>cases.newRequest.addNewPerson</translate>
                            </label>
                        </div>
                        <div class="col-sm-4">
                            <label>
                                <input type="radio" ng-model="isPickExistingPerson" ng-value="true" ng-change="pickExistingUserChange()">
                                <translate>cases.newRequest.useExistingPerson</translate>
                            </label>
                        </div>
                        <div class="col-sm-4">
                            <label>
                                <div class="pull-right" ng-if="isPickExistingPerson">
                                    <button class="btn btn-primary btn-sm" ng-click="searchPerson()" translate>
                                        cases.newRequest.searchPerson
                                    </button>
                                </div>
                            </label>
                        </div>
                    </div>
                </div>

                <div ng-show="isExistingPerson || !isPickExistingPerson">
                    <div class="row form-group">
                        <div class="col-sm-2">
                            <label for="prefix" translate>cases.newRequest.prefix.label</label>
                            <span class="required-asterisk">*</span>
                        </div>
                        <div class="col-sm-4">
                            <select ng-model="config.data.originator.person.title" id="prefix" name="prefix"
                                    ng-options="prefix.key as prefix.value | translate for prefix in prefixes" class="form-control input-md"
                                    required ng-disabled="isExistingPerson && existingPerson.title">
                                <option value='' selected ng-value="null" translate>core.lookups.personTitles.selectPrefix</option>
                            </select>
                            <span class="text-danger" ng-if="!config.data.originator.person.title && formInvalid" translate>
                            cases.newRequest.prefix.validation.error</span>
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col-sm-2">
                            <label for="firstName" translate>cases.newRequest.firstName.label</label>
                            <span class="required-asterisk">*</span>
                        </div>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="firstName" name="firstName"
                                    ng-model="config.data.originator.person.givenName"
                                    placeholder="{{'cases.newRequest.firstName.placeholder' | translate}}" required="required"
                                    ng-disabled="isExistingPerson && existingPerson.givenName">
                            <span class="text-danger" ng-if="!config.data.originator.person.givenName && formInvalid" translate>
                                cases.newRequest.firstName.validation.error</span>
                        </div>
                        <div class="col-sm-2">
                            <label for="middleName" translate>cases.newRequest.middleName.label</label>
                        </div>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="middleName" ng-model="config.data.originator.person.middleName"
                                    placeholder="{{'cases.newRequest.middleName.placeholder' | translate}}" name="middleName"
                                    ng-disabled="isExistingPerson">
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col-sm-2">
                            <label for="lastName" translate>cases.newRequest.lastName.label</label>
                            <span class="required-asterisk">*</span>
                        </div>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="lastName" ng-model="config.data.originator.person.familyName"
                                    placeholder="{{'cases.newRequest.lastName.placeholder' | translate}}" name="lastName"
                                    required="required" ng-disabled="isExistingPerson && existingPerson.familyName">
                            <span class="text-danger" ng-if="!config.data.originator.person.familyName && formInvalid" translate>
                                cases.newRequest.lastName.validation.error</span>
                        </div>
                        <div class="col-sm-2">
                            <label for="phone" translate>cases.newRequest.phone.label </label>
                        </div>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="phone" pattern="^\d{3}[\-]\d{3}[\-]\d{4}"
                                    ng-model="config.data.originator.person.defaultPhone.value"
                                    placeholder="{{'cases.newRequest.phone.placeholder' | translate}}" name="phone"
                                    ng-disabled="isExistingPerson && existingPerson.defaultPhone.value">
                            <span class="text-danger"
                                    ng-if="!config.data.originator.person.defaultPhone.value && formInvalid && !phoneEmpty" translate>
                                cases.newRequest.phone.validation.errorInvalid</span>
                        </div>

                    </div>
                    <div class="row form-group">
                        <div class="col-sm-2">
                            <label for="organization" translate>cases.newRequest.organization.label </label>
                        </div>
                        <div class="col-sm-4">
                            <input type="text" id="organization" ng-model="organizationValue" readonly ng-click="searchOrganization()"
                                    class="input-md form-control" placeholder="{{'cases.newRequest.organization.placeholder' | translate}}"
                                    name="organization">
                        </div>
                        <div class="col-sm-2">
                            <label for="personPosition" translate>cases.newRequest.position.label</label>
                        </div>
                        <div class="col-sm-4">
                            <select id="personPosition" class="form-control"
                                    ng-model="personPosition" ng-disabled="true">
                                <option ng-repeat="option in positions" value="{{option.key}}">
                                    {{option.value | translate}}
                                </option>
                            </select>
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col-sm-2">
                            <label for="email" translate>cases.newRequest.email.label </label>
                            <span ng-if="config.data.deliveryMethodOfResponse == 'Web Portal' || config.data.deliveryMethodOfResponse == 'Email' || config.data.createNewPortalUser"
                                  class="required-asterisk">*</span>
                        </div>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="email" ng-model="config.data.originator.person.defaultEmail.value"
                                   placeholder="{{'cases.newRequest.email.placeholder' | translate}}" name="email"
                                   pattern="[a-zA-Z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,63}$"
                                   ng-required="config.data.deliveryMethodOfResponse == 'Web Portal' || config.data.deliveryMethodOfResponse == 'Email' || config.data.createNewPortalUser"
                                   ng-disabled="isExistingPerson && (existingPerson.defaultEmail.value ||
                                    (config.data.deliveryMethodOfResponse != 'Web Portal'  && !config.data.createNewPortalUser))">
                            <span class="text-danger"
                                  ng-if="(config.data.deliveryMethodOfResponse == 'Web Portal' || config.data.deliveryMethodOfResponse == 'Email' || config.data.createNewPortalUser) && !config.data.originator.person.defaultEmail.value && formInvalid"
                                  translate>
                                cases.newRequest.email.validation.error</span>
                            <span class="text-danger"
                                  ng-if="!config.data.originator.person.defaultEmail.value && formInvalid && !emailEmpty" translate>
                                cases.newRequest.email.validation.errorInvalid</span>
                        </div>
                        <div class="col-sm-2">
                            <label for="confirmationEmail" translate>cases.newRequest.confirmationEmail.label </label>
                            <span ng-if="config.data.deliveryMethodOfResponse == 'Web Portal' || config.data.deliveryMethodOfResponse == 'Email' || config.data.createNewPortalUser"
                                  class="required-asterisk-confirm-email">*</span>
                        </div>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="confirmationEmail" ng-model="confirmationEmail"
                                   placeholder="{{'cases.newRequest.confirmationEmail.placeholder' | translate}}" name="confirmationEmail"
                                   ng-blur="checkExistingEmail()"
                                   ng-required="config.data.deliveryMethodOfResponse == 'Web Portal' || config.data.deliveryMethodOfResponse == 'Email' || config.data.createNewPortalUser"
                                   ng-disabled="isExistingPerson && (existingPerson.defaultEmail.value ||
                                    (config.data.deliveryMethodOfResponse != 'Web Portal' && !config.data.createNewPortalUser))">
                            <span class="text-danger"
                                  ng-if="(confirmationEmail !== config.data.originator.person.defaultEmail.value) && formInvalid && !confirmEmailEmpty"
                                  translate>
                                cases.newRequest.confirmationEmail.validation.errorInvalid</span>
                            <span class="text-danger"
                                  ng-if="(config.data.deliveryMethodOfResponse == 'Web Portal' || config.data.deliveryMethodOfResponse == 'Email' || config.data.createNewPortalUser) && (confirmationEmail !== config.data.originator.person.defaultEmail.value)"
                                  translate>
                                cases.newRequest.confirmationEmail.validation.error</span>
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col-sm-2">
                            <label for="country" translate>cases.newRequest.country.label</label>
                            <span ng-if="config.data.deliveryMethodOfResponse == 'Mail' || config.data.createNewPortalUser
                                        || checkLocationRules(config.data.originator.person.addresses[primaryAddressIndex])"
                                    class="required-asterisk">*</span>
                        </div>
                        <div class="col-sm-4">
                            <select id="country" class="form-control"
                                    ng-model="config.data.originator.person.addresses[primaryAddressIndex].country"
                                    ng-required="config.data.deliveryMethodOfResponse == 'Mail' || config.data.createNewPortalUser
                                     || !isExistingPerson && checkLocationRules(config.data.originator.person.addresses[primaryAddressIndex])"
                                    ng-disabled="isExistingPerson && (existingPerson.addresses[primaryAddressIndex].country ||
                                    (config.data.deliveryMethodOfResponse != 'Mail'  && !config.data.createNewPortalUser))"
                                    ng-change="changeStates(config.data.originator.person.addresses[primaryAddressIndex].country)">
                                <option ng-repeat="option in countries" value="{{option.key}}">
                                    {{option.value | translate}}
                                </option>
                            </select>
                            <span class="text-danger" ng-if="!config.data.originator.person.addresses[primaryAddressIndex].country &&
                                    (config.data.deliveryMethodOfResponse == 'Mail' || config.data.createNewPortalUser
                                    || checkLocationRules(config.data.originator.person.addresses[primaryAddressIndex])) && formInvalid"
                                    translate>
                            cases.newRequest.country.validation.error</span>
                        </div>
                        <div class="col-sm-2">
                            <label for="addressType" translate>cases.newRequest.address.type.label</label>
                            <span ng-if="config.data.deliveryMethodOfResponse == 'Mail' || config.data.createNewPortalUser
                                        || checkLocationRules(config.data.originator.person.addresses[primaryAddressIndex])"
                                    class="required-asterisk-confirm-email">*</span>
                        </div>
                        <div class="col-sm-4">
                            <select id="addressType" class="form-control"
                                    ng-model="config.data.originator.person.addresses[primaryAddressIndex].type"
                                    ng-required="config.data.deliveryMethodOfResponse == 'Mail' || config.data.createNewPortalUser
                                    || !isExistingPerson && checkLocationRules(config.data.originator.person.addresses[primaryAddressIndex])"
                                    ng-disabled="isExistingPerson &&
                                    ((existingPerson.addresses[primaryAddressIndex].type && existingPerson.addresses[primaryAddressIndex].streetAddress) ||
                                    (config.data.deliveryMethodOfResponse != 'Mail'  && !config.data.createNewPortalUser))">
                                <option ng-repeat="option in addressTypes" value="{{option.key}}">
                                    {{option.value | translate}}
                                </option>
                            </select>
                            <span class="text-danger"
                                    ng-if="!config.data.originator.person.addresses[primaryAddressIndex].type && (config.data.deliveryMethodOfResponse == 'Mail' || config.data.createNewPortalUser
                                    || checkLocationRules(config.data.originator.person.addresses[primaryAddressIndex])) && formInvalid"
                                    translate>
                            cases.newRequest.address.type.validation.error</span>
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col-sm-2">
                            <label for="address1" translate>cases.newRequest.address.label </label>
                            <span ng-if="config.data.deliveryMethodOfResponse == 'Mail' || config.data.createNewPortalUser
                                        || checkLocationRules(config.data.originator.person.addresses[primaryAddressIndex])"
                                    class="required-asterisk">*</span>
                        </div>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="address1"
                                    ng-model="config.data.originator.person.addresses[primaryAddressIndex].streetAddress"
                                    placeholder="{{'cases.newRequest.address.placeholder' | translate}}" name="address1"
                                    ng-required="config.data.deliveryMethodOfResponse == 'Mail' || config.data.createNewPortalUser
                                    || !isExistingPerson && checkLocationRules(config.data.originator.person.addresses[primaryAddressIndex])"
                                    ng-disabled="isExistingPerson && (existingPerson.addresses[primaryAddressIndex].streetAddress ||
                                    (config.data.deliveryMethodOfResponse != 'Mail'  && !config.data.createNewPortalUser))">
                            <span class="text-danger"
                                    ng-if="(config.data.deliveryMethodOfResponse == 'Mail' || config.data.createNewPortalUser || checkLocationRules(config.data.originator.person.addresses[primaryAddressIndex]))
                                    && !config.data.originator.person.addresses[primaryAddressIndex].streetAddress && formInvalid"
                                    translate>
                                cases.newRequest.address.validation.error</span>
                        </div>
                        <div class="col-sm-2">
                            <label for="address2" translate>cases.newRequest.address2.label</label>

                        </div>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="address2"
                                    ng-model="config.data.originator.person.addresses[primaryAddressIndex].streetAddress2"
                                    placeholder="{{'cases.newRequest.address2.placeholder' | translate}}" name="address2" ng-disabled="isExistingPerson &&
                                    (existingPerson.addresses[primaryAddressIndex].streetAddress || existingPerson.addresses[primaryAddressIndex].streetAddress2 ||
                                    (config.data.deliveryMethodOfResponse != 'Mail'  && !config.data.createNewPortalUser))">
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col-sm-2">
                            <label for="city" translate>cases.newRequest.city.label</label>
                            <span ng-if="config.data.deliveryMethodOfResponse == 'Mail' || config.data.createNewPortalUser
                                        || checkLocationRules(config.data.originator.person.addresses[primaryAddressIndex])"
                                    class="required-asterisk">*</span>
                        </div>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="city"
                                    ng-model="config.data.originator.person.addresses[primaryAddressIndex].city"
                                    placeholder="{{'cases.newRequest.city.placeholder' | translate}}" name="city"
                                    ng-required="config.data.deliveryMethodOfResponse == 'Mail' || config.data.createNewPortalUser
                                    || !isExistingPerson && checkLocationRules(config.data.originator.person.addresses[primaryAddressIndex])"
                                    ng-disabled="isExistingPerson && (existingPerson.addresses[primaryAddressIndex].city ||
                                    (config.data.deliveryMethodOfResponse != 'Mail'  && !config.data.createNewPortalUser))">
                            <span class="text-danger" ng-if="(config.data.deliveryMethodOfResponse == 'Mail' || config.data.createNewPortalUser || checkLocationRules(config.data.originator.person.addresses[primaryAddressIndex]))
                                    && !config.data.originator.person.addresses[primaryAddressIndex].city && formInvalid" translate>
                                cases.newRequest.city.validation.error</span>
                        </div>
                        <div class="col-sm-2">
                            <label for="state" translate>cases.newRequest.state.label</label>
                            <span ng-if="config.data.deliveryMethodOfResponse == 'Mail' || config.data.createNewPortalUser
                                        || checkLocationRules(config.data.originator.person.addresses[primaryAddressIndex])"
                                    class="required-asterisk-state-label-modals">*</span>
                        </div>
                        <div class="col-sm-4">
                            <div ng-if="config.data.originator.person.addresses[primaryAddressIndex].country == 'US'
                            || config.data.originator.person.addresses[primaryAddressIndex].country == 'CA'
                            || config.data.originator.person.addresses[primaryAddressIndex].country == 'JP'">
                                <select id="state" name="state"
                                        ng-model="config.data.originator.person.addresses[primaryAddressIndex].state"
                                        ng-options="state.key as state.value | translate for state in states" class="form-control input-md"
                                        ng-required="config.data.deliveryMethodOfResponse == 'Mail' || config.data.createNewPortalUser
                                        || checkLocationRules(config.data.originator.person.addresses[primaryAddressIndex])"
                                        ng-disabled="isExistingPerson && (existingPerson.addresses[primaryAddressIndex].state ||
                                    (config.data.deliveryMethodOfResponse != 'Mail'  && !config.data.createNewPortalUser) || checkLocationRules(config.data.originator.person.addresses[primaryAddressIndex]))">
                                </select>
                            </div>
                            <div ng-if="config.data.originator.person.addresses[primaryAddressIndex].country != 'US' && config.data.originator.person.addresses[primaryAddressIndex].country != 'CA' && config.data.originator.person.addresses[primaryAddressIndex].country != 'JP'">
                                <input id="txtState" type="text"
                                        ng-model="config.data.originator.person.addresses[primaryAddressIndex].state"
                                        class="input-md form-control" placeholder="{{ 'cases.newRequest.state.placeholder' | translate }}"
                                        ng-required="config.data.deliveryMethodOfResponse == 'Mail' || config.data.createNewPortalUser
                                        || !isExistingPerson && checkLocationRules(config.data.originator.person.addresses[primaryAddressIndex])"
                                        ng-disabled="isExistingPerson && (existingPerson.addresses[primaryAddressIndex].state ||
                                    (config.data.deliveryMethodOfResponse != 'Mail'  && !config.data.createNewPortalUser))">
                            </div>
                            <span class="text-danger"
                                    ng-if="(config.data.deliveryMethodOfResponse == 'Mail' || config.data.createNewPortalUser || checkLocationRules(config.data.originator.person.addresses[primaryAddressIndex]))
                                     && !config.data.originator.person.addresses[primaryAddressIndex].state && formInvalid"
                                    translate>
                                cases.newRequest.state.validation.error</span>
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col-sm-2">
                            <label for="zip" translate>cases.newRequest.zip.label</label>
                            <span ng-if="config.data.deliveryMethodOfResponse == 'Mail'  || config.data.createNewPortalUser
                                        || checkLocationRules(config.data.originator.person.addresses[primaryAddressIndex])"
                                    class="required-asterisk">*</span>
                        </div>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="zip" name="zip"
                                    ng-model="config.data.originator.person.addresses[0].zip"
                                    placeholder="{{'cases.newRequest.zip.placeholder' | translate}}"
                                    ng-required="config.data.deliveryMethodOfResponse == 'Mail'  || config.data.createNewPortalUser
                                    || !isExistingPerson && checkLocationRules(config.data.originator.person.addresses[primaryAddressIndex])"
                                    ng-disabled="isExistingPerson && (existingPerson.addresses[primaryAddressIndex].zip ||
                                    (config.data.deliveryMethodOfResponse != 'Mail'  && !config.data.createNewPortalUser))">
                            <span class="text-danger" ng-if="(config.data.deliveryMethodOfResponse == 'Mail' || config.data.createNewPortalUser || checkLocationRules(config.data.originator.person.addresses[primaryAddressIndex]))
                                    && !config.data.originator.person.addresses[primaryAddressIndex].zip && formInvalid" translate>
                                cases.newRequest.zip.validation.error</span>
                            <span class="text-danger"
                                    ng-if="!config.data.originator.person.addresses[primaryAddressIndex].zip && formInvalid && !zipCodeEmpty"
                                    translate>
                                cases.newRequest.zip.validation.errorInvalid</span>
                        </div>
                    </div>
                    <div class="row form-group" ng-if="enableNewPortalUserCreation && isNewRequestType()">
                        <div class="row">
                            <div class="col-sm-6">
                                <input type="checkbox" ng-model="config.data.createNewPortalUser">
                                <span translate>cases.newRequest.portalUser.label</span>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <span translate>cases.newRequest.section3</span>
                </h4>
            </div>
            <div class="panel-body">
                <div class="row" ng-if="enableTitle">
                    <div class="col-sm-3 form-group">
                        <label for="title" translate>cases.newRequest.title.label</label>
                        <span class="required-asterisk">*</span>
                    </div>
                    <div class="col-sm-9 form-group">
                        <input id="title" name="title" class="form-control" ng-model="config.data.title" maxlength="50"
                                placeholder="{{'cases.newRequest.title.placeholder' | translate}}" required="required" />
                        <span class="text-danger" ng-if="!config.data.title && formInvalid" translate>
                                cases.newRequest.title.validation.error</span>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-3 form-group">
                        <label for="subject" translate>cases.newRequest.subject.label</label>
                        <span class="required-asterisk">*</span>
                    </div>
                    <div class="col-sm-9 form-group">
                        <textarea rows=5 id="subject" name="subject" class="form-control" ng-model="config.data.details"
                                placeholder="{{'cases.newRequest.subject.placeholder' | translate}}" required="required"></textarea>
                        <span class="text-danger" ng-if="!config.data.details && formInvalid" translate>
                                cases.newRequest.subject.validation.error</span>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-3 form-group">
                        <label translate>cases.newRequest.dateRange.label</label>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-2 form-group">
                        <label for="recordSearchDateFrom" translate>cases.newRequest.dateRange.from</label>
                    </div>
                    <div class="col-sm-4 form-group">
                        <div class="input-group">
                            <date-time-picker data="config.data.recordSearchDateFrom" no-default-date="true" show-time="true"></date-time-picker>
                        </div>
                        <span class="text-danger" ng-if="dateRangeInvalid && formInvalid" translate>
                                cases.newRequest.dateRange.validation.error</span>
                    </div>
                    <div class="col-sm-2 form-group">
                        <label for="recordSearchDateTo" translate>cases.newRequest.dateRange.to</label>
                    </div>
                    <div class="col-sm-4 form-group">
                        <div class="input-group">
                            <date-time-picker data="config.data.recordSearchDateTo" no-default-date="true" show-time="true"></date-time-picker>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-3 form-group">
                        <label translate>cases.newRequest.addFile.descriptionDocument</label>
                    </div>
                    <div class="col-sm-3 form-group">
                        <button class="btn btn-default" ngf-select="addFileDescription($files)" multiple>
                            <span translate>cases.newRequest.chooseFiles</span>
                        </button>
                    </div>
                </div>
                <div class="row">
                    <ul ng-repeat="file in uploadFilesDescription['Description Document']">
                        <li>
                            {{file.name}}
                            <button type="button" class="btn btn-link" ng-click="removeFileDescription($index)">
                                <i class="fa fa-minus text-danger"></i><span translate>cases.newRequest.remove</span>
                            </button>
                        </li>
                    </ul>
                </div>
                <div class="row">
                    <div class="col-sm-3 form-group">
                        <label translate>cases.newRequest.addFile.consent</label>
                    </div>
                    <div class="col-sm-3 form-group">
                        <button class="btn btn-default" ngf-select="addFileConsent($files)" multiple>
                            <span translate>cases.newRequest.chooseFiles</span>
                        </button>
                    </div>
                </div>
                <div class="row">
                    <ul ng-repeat="file in uploadFilesDescription['Consent']">
                        <li>
                            {{file.name}}
                            <button type="button" class="btn btn-link" ng-click="removeFileConsent($index)">
                                <i class="fa fa-minus text-danger"></i><span translate>cases.newRequest.remove</span>
                            </button>
                        </li>
                    </ul>
                </div>
                <div class="row">
                    <div class="col-sm-3 form-group">
                        <label translate>cases.newRequest.addFile.proofOfIdentity</label>
                    </div>
                    <div class="col-sm-3 form-group">
                        <button class="btn btn-default" ngf-select="addFileProofOfIdentity($files)" multiple>
                            <span translate>cases.newRequest.chooseFiles</span>
                        </button>
                    </div>
                </div>
                <div class="row">
                    <ul ng-repeat="file in uploadFilesDescription['Proof of Identity']">
                        <li>
                            {{file.name}}
                            <button type="button" class="btn btn-link" ng-click="removeFileProofOfIdentity($index)">
                                <i class="fa fa-minus text-danger"></i><span translate>cases.newRequest.remove</span>
                            </button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="panel panel-default" ng-if="isNewRequestType()">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <span translate>cases.newRequest.section4</span>
                </h4>
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-sm-3 form-group">
                        <label for="requestFeeWaive" class="control-label" translate>cases.comp.main.requestFeeWaiveReason.label</label>
                    </div>
                    <div class="col-sm-4 form-group">
                        <input type="checkbox" id="requestFeeWaive"
                                placeholder="{{'cases.comp.main.requestFeeWaiveReason.placeholder' | translate}}"
                                ng-model="config.data.feeWaiverFlag" name="requestFeeWaive"
                                ng-change="config.data.requestFeeWaiveReason= !config.data.feeWaiverFlag ? '' : config.data.requestFeeWaiveReason">
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-3 form-group">
                        <label for="requestFeeWaiveReason" class="control-label" translate>cases.comp.main.waiverRequestReason.label</label>
                    </div>
                    <div class="col-sm-7 form-group">
                         <textarea rows=5 type="requestFeeWaiveReason" class="form-control" id="requestFeeWaiveReason"
                                 ng-model="config.data.requestFeeWaiveReason" ng-disabled="!config.data.feeWaiverFlag"
                                 placeholder="{{'cases.comp.main.waiverRequestReason.placeholder' | translate}}"
                                 name="requestFeeWaiveReason">
                                </textarea>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-3 form-group">
                        <label for="payFee" translate="">cases.comp.main.payFee.label</label>
                    </div>
                    <div class="col-sm-5 form-group">
                        <select id="payFee" ng-model="config.data.payFee" ng-options="payFee.key as payFee.value for payFee in payFees"
                                class="form-control input-md">
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary btn-sm" data-toggle="tooltip" data-title="Cancel" ng-click="cancelModal()">
            <span translate>cases.newRequest.cancel</span>
        </button>
        <button type="button" class="btn btn-primary btn-sm" data-toggle="tooltip" ng-click="validateForm(requestForm)"
                ng-disabled="loading" title="Submit" id="saveButton">
            <i class="{{loadingIcon}}"></i>
            <span translate>cases.newRequest.save.button</span>
        </button>
    </div>
</form>
