<section ng-controller="AttestmentsController">
    <div class="page-header">
        <h2>New Attestment</h2>
    </div>
    <form name="attestmentForm" class="form-inline" ng-submit="create(attestmentForm.$valid)" novalidate>

        <!-- Bootstrap Grid System with Panels-->
        <div class ="container">
            <div class="row">
                <div class="col-lg-10">
                    Attestment Details
                </div>

                <div class="col-md-2">
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary">
                            <i class="glyphicon glyphicon-save"></i>
                        </button>
                    </div>
                    <div ng-show="error" class="text-danger">
                        <strong ng-bind="error"></strong>
                    </div>
                </div>
            </div>
            <!-- End of Line -->

            <div class="row">
                <div class="col-lg-2">
                    <div class="form-group" show-errors>
                        <span class="label label-primary" >Consumer ID<br></span>
                        <input name="consumer_ID" type="text" ng-model="attestment.consumer_ID" id="consumer_ID" class="form-control" required>
                        <div ng-messages="attestmentForm.consumer_ID.$error" role="alert">
                            <p class="help-block error-text" ng-message="required">Consumer ID is required.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-2">
                    <div class="form-group">
                        <span class="label label-primary" >Description<br></span>
                        <input name="consumer_description" type="text" ng-model="attestment.consumer_description" id="consumer_description" class="form-control">
                    </div>
                </div>
                <div class="col-lg-2">
                    <div class="form-group">
                        <span class="label label-primary" >Page ID<br></span>
                        <input name="page_ID" type="text" ng-model="attestment.page_ID" id="page_ID" class="form-control">
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group">
                        <span class="label label-primary" >Page Description<br></span>
                        <input name="page_description" type="text" ng-model="attestment.page_description" id="pagepage_descriptionID" class="form-control">
                    </div>
                </div>
            </div>
            <!-- End of Line -->

            <!-- Related Applications --><div class="row">
                <div class="col-lg-10">
                    <kbd>Statements - {{attestment.statements.length}}</kbd>
                </div>
                <a class="btn btn-primary" ng-click="addMember(attestment.statements);">
                    <i class="glyphicon glyphicon-plus"></i>
                </a>
            </div>

            <div ng-repeat ="statement in attestment.statements">
                <div ng-class-odd="'alt'">
                    <div class="row">
                        <div class="col-lg-2">
                            <div class="form-group">
                                <span class="label label-info" >Statement ID<br></span>
                                <input name="statement_ID" type="text" ng-model="statement.statement_ID" id="statement_ID" class="form-control">
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <span class="label label-info" >Statement Text<br></span>
                                <input name="statement_text" type="text" ng-model="statement.statement_text" id="statement_text" class="form-control">
                            </div>
                        </div>
                    </div>
                    <!-- End of Line -->

                    <div class="row">
                        <div class="col-lg-2">
                            <div class="form-group">
                                <span class="label label-info" >Response Type<br></span>
                                <input name="response_type" type="text" ng-model="statement.response_type" id="response_type" class="form-control">
                            </div>
                        </div>
                        <div class="col-lg-2">
                            <div class="form-group" show-errors>
                                <span class="label label-info" >Date Start<br></span>
                                <input name="date_start_string" type="text"
                                       ng-model="statement.date_start_string"
                                       ng-pattern="/^(0[1-9]|1[0-2])\/(0[1-9]|1\d|2\d|3[01])\/(19|20)\d{2}$/"
                                       id="date_start_string" class="form-control"
                                       placeholder="MM/DD/YYYY" required >

                                <div ng-messages="attestationForm.date_start_string.$error" role="alert">
                                    <div class="help-block error-text" ng-message="required">Start Date is required.</div>
                                    <div class="help-block error-text" ng-message="pattern">Start Date must by MM/DD/YYYY format.</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-2">
                            <div class="form-group" show-errors>
                                <span class="label label-info" >Date End<br></span>
                                <input name="statement.date_end_string" type="text"
                                       ng-model="statement.date_end_string"
                                       ng-pattern="/^(0[1-9]|1[0-2])\/(0[1-9]|1\d|2\d|3[01])\/(19|20)\d{2}$/"
                                       id="date_end_string" class="form-control"
                                       placeholder="MM/DD/YYYY" required>
                                <div ng-messages="attestationForm.date_end_string.$error" role="alert">
                                    <div class="help-block error-text" ng-message="required">End Date is required.</div>
                                    <div class="help-block error-text" ng-message="pattern">End Date must by MM/DD/YYYY format.</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End of Line -->
                </div>
            </div>
        </div>
    </form>
</section>
