extends ../layouts/interior-page

block pagetitle
    span.glyphicon.glyphicon-chevron-right.title-icon
    | start a new lunch run
    
block interiorcontent
    .create-run-form(ng-controller='CreateRunCtrl')
        form.row(name='form',novalidate,role='form')
            .col-xs-12.col-sm-6
                section.name.row
                    .col-xs-12.col-lg-2.step-num
                        span.glyphicon.glyphicon-info-sign(title='Lunch Run Info')
                    .col-xs-12.col-lg-10
                        .form-group(ng-class="{'has-error has-feedback': form.Name.$dirty && form.Name.$invalid, 'has-success has-feedback': form.Name.$dirty && form.Name.$valid}")
                            input#name.form-control.input-lg(type='text',ng-model='run.name',required,placeholder='Name your run',name='Name')
                            div(ng-show='form.Name.$dirty && form.Name.$invalid')
                                span.glyphicon.glyphicon-remove.form-control-feedback
                                span(ng-show='form.Name.$error.required') What should we call you lunch run?
                            span.glyphicon.glyphicon-ok.form-control-feedback(ng-show="form.Name.$dirty && form.Name.$valid")
        
                section.row
                    .col-xs-12.col-lg-2.step-num
                        span.glyphicon.glyphicon-user(title='Your Info')
                    .col-xs-12.col-lg-10
                        .form-group(ng-class="{'has-error has-feedback': form.CreatorName.$dirty && form.CreatorName.$invalid, 'has-success has-feedback': form.CreatorName.$dirty && form.CreatorName.$valid}")
                            input#creatorName.form-control.input-lg(type='text',ng-model='run.creatorName',required,placeholder='Your name',name='CreatorName')
                            div(ng-show="form.CreatorName.$dirty && form.CreatorName.$invalid")
                                span.glyphicon.glyphicon-remove.form-control-feedback
                                span(ng-show='form.CreatorName.$error.required') What's your name?
                            span.glyphicon.glyphicon-ok.form-control-feedback(ng-show='form.CreatorName.$dirty && form.CreatorName.$valid')

                        .form-group(ng-class="{'has-error has-feedback': form.Email.$dirty && form.Email.$invalid, 'has-success has-feedback': form.Email.$dirty && form.Email.$valid}")
                            input#creatorEmail.form-control.input-lg(type='email',ng-model='run.creatorEmail',required,placeholder='Your email',name='Email')
                            div(ng-show='form.Email.$dirty && form.Email.$invalid')
                                span.glyphicon.glyphicon-remove.form-control-feedback
                                span(ng-show='form.Email.$error.required') What's your email address?
                                span(ng-show='form.Email.$error.email') That doesn't look like a valid email address.
                            span.glyphicon.glyphicon-ok.form-control-feedback(ng-show='form.Email.$dirty && form.Email.$valid')

                section.row
                    .col-xs-12.col-lg-2.step-num 
                        span.glyphicon.glyphicon-map-marker(title='Lunch Location')
                    .col-xs-12.col-lg-10
                        .form-group(ng-class="{'has-error has-feedback': form.Restaurant.$dirty && form.Restaurant.$invalid, 'has-success has-feedback': form.Restaurant.$dirty && form.Restaurant.$valid}")
                            input#restaurant.form-control.input-lg(type='text',ng-model='run.restaurant',placeholder='Restaurant',name='Restaurant',required)
                            div(ng-show="form.Restaurant.$dirty && form.Restaurant.$invalid")
                                span.glyphicon.glyphicon-remove.form-control-feedback
                                span(ng-show='form.Restaurant.$error.required') Where are you going to eat?
                            span.glyphicon.glyphicon-ok.form-control-feedback(ng-show='form.Restaurant.$dirty && form.Restaurant.$valid')

                        .form-group
                            input#menuUrl.form-control.input-lg(type='url',ng-model='run.menuUrl',placeholder='Menu URL')
            
            .col-xs-12.col-sm-6
                section.invitees.row
                    .col-xs-12.col-lg-2.step-num
                        span.glyphicon.glyphicon-list(title='Lunch Invitees')
                    .col-xs-12.col-lg-10
                        .invitee.clearfix(ng-repeat='i in invitees')
                            ng-form(name='inviteeForm')
                                .row
                                    .col-xs-10.name-wrapper
                                        .form-group(ng-class="{'has-error has-feedback': inviteeForm.Name.$dirty && inviteeForm.Name.$invalid, 'has-success has-feedback': inviteeForm.Name.$dirty && inviteeForm.Name.$valid}")
                                            input.form-control.input-lg(ng-model='i.name',required,placeholder='Name',name="Name")
                                            div(ng-show='inviteeForm.Name.$dirty && inviteeForm.Name.$invalid')
                                                span.glyphicon.glyphicon-remove.form-control-feedback
                                                span(ng-show='inviteeForm.Name.$error.required') Give this person a name
                                            span.glyphicon.glyphicon-ok.form-control-feedback(ng-show='inviteeForm.Name.$dirty && inviteeForm.Name.$valid')

                                    .col-xs-2.deletebtn-wrapper
                                        button.btn.btn-block.btn-lg.btn-warning(ng-click='removeInvitee($index)') 
                                            span.glyphicon.glyphicon-remove

                                    .col-xs-10.email-wrapper
                                        .form-group(ng-class="{'has-error has-feedback': inviteeForm.Email.$dirty && inviteeForm.Email.$invalid, 'has-success has-feedback': inviteeForm.Email.$dirty && inviteeForm.Email.$valid}")
                                            input.form-control.input-lg(type='email',ng-model='i.email',required,placeholder='Email',name="Email")
                                            div(ng-show='inviteeForm.Email.$dirty && inviteeForm.Email.$invalid')
                                                span.glyphicon.glyphicon-remove.form-control-feedback
                                                span(ng-show='inviteeForm.Email.$error.required') What's this person's email address?
                                                span(ng-show='inviteeForm.Email.$error.email') That doesn't look like a valid email address.
                                            span.glyphicon.glyphicon-ok.form-control-feedback(ng-show='inviteeForm.Email.$dirty && inviteeForm.Email.$valid')

                        button.btn.btn-default.btn-lg.btn-block(ng-click='addInvitee()')
                            span.glyphicon.glyphicon-plus
                            |  Invite another!

            section.submit
                button.btn.btn-lg.btn-primary.btn-block(ng-click="create(run,invitees)",ng-disabled="form.$invalid")
                    | Create