<div ng:controller="EventCreateController" class="row-fluid" id="body-main" qn:fillheight>
       <link rel="stylesheet" href="/Areas/Qusion/Scripts/Vendor/widgets/redactor/redactor.css" />
	   <script src="/Areas/Qusion/Scripts/Vendor/widgets/redactor/redactor.min.js"></script>
    <form name="Event">
        <div class="col12">
            <div class="toolbar cfix">
                <div class="toolbar-group">
                    <h3>
                        <span class="circle circle-small blue"><span class="icon li_note"></span></span>
                        {{$resource('events.new')}}
                    </h3>
                </div>
                <div class="toolbar-group right">
                    <button title="{{$resource('utility.refresh')}}" class="button tooltip" ng:click="refresh()"><i class="icon-refresh"></i></button>
                    <button title="{{$resource('utility.home')}}" class="button tooltip" ng:click="back()"><i class="icon-home"></i></button>
                </div>
            </div>
            <div class="form form-horizontal fillh">
                <div class="control-group required">
                    <label class="control-label">{{$resource('events.title')}}</label>
                    <div class="controls">
                        <input type="text" name="Title" ng:model="event.Title" required style="width:500px;" />
                        <div ng:show="errors['model.Title'][0]" class="error">{{$resource(errors['model.Title'][0])}}</div>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">{{$resource('utility.alias')}}</label>
                    <div class="controls">
                        <input type="text" name="Alias" ng:model="event.Alias" />
                        <div ng:show="errors['model.Alias'][0]" class="error">{{$resource(errors['model.Alias'][0])}}</div>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">{{$resource('events.location')}}</label>
                    <div class="controls">
                        <input type="text" name="Location" ng:model="event.Location" />
                    </div>
                </div>
             
                <div class="control-group required">
                    <label class="control-label">{{$resource('events.description')}}</label>
                    <div class="controls">
                        <textarea class="span5" rows="3" type="text" name="Summary" ng:model="event.Summary" required />
                        <div ng:show="errors['model.Summary'][0]" class="error">{{$resource(errors['model.Summary'][0])}}</div>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">{{$resource('events.content')}}</label>
                    <div class="controls" style="width: 600px">
                      <textarea class="span5"  type="text" name="Content" ng:model="event.Content" redactor />
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">{{$resource('events.external_link')}}</label>
                    <div class="controls">
                        <input type="text" name="ExternalLink" ng:model="event.ExternalLink"/>
                        <div ng:show="errors['model.ExternalLink'][0]" class="error">{{$resource(errors['model.ExternalLink'][0])}}</div>
                    </div>
                </div>
            
                <div class="control-group required">
                    <label class="control-label">{{$resource('events.starts')}}</label>
                    <div class="controls">
                        <span class="add-on"><i class="icon-calendar"></i></span>
                        <input qn:datepicker class="input-medium" type="text" name="StartsOn" ng:model="event.StartsOn" required/>
                        <div ng:show="errors['model.StartsOn'][0]" class="error">{{$resource(errors['model.StartsOn'][0])}}</div>
                    </div>
                </div>
                <div class="control-group required">
                    <label class="control-label">{{$resource('events.ends')}}</label>
                    <div class="controls">
                        <span class="add-on"><i class="icon-calendar"></i></span>
                        <input qn:datepicker class="input-medium" type="text" name="EndsOn" ng:model="event.EndsOn" required/>
                        <div ng:show="errors['model.EndsOn'][0]" class="error">{{$resource(errors['model.EndsOn'][0])}}</div>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">{{$resource('events.all_day')}}</label>
                    <div class="controls">
                        <input type="checkbox" name="AllDayEvent" ng:model="event.AllDayEvent" />
                    </div>
                </div>
                <div>
                    <label class="control-label">{{$resource('events.classifications')}}</label>
                    <div class="control-group" ng:repeat="classification in classifications">
                        <div class="controls">
                            <input qn:Treeselector="treeOptions" qn:Treedata="classification.Labels" ng:model="Labels[classification.Alias]" />
                        </div>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label"></label>
                    <div class="controls">
                        <button class="button lightblue" ng:click="create()">{{$resource('events.create')}}</button>
                        <button type="button" class="button" ng:click="back()">{{$resource('events.cancel')}}</button>
                    </div>
                </div> 
            </div>
        </div>
    </form>
</div>