<div ng:controller="EventDetailsController" class="row-fluid" id="body-main" qn:fillheight>
    <div class="col12">
        <div class="toolbar cfix">
            <div class="toolbar-group">
                <h3>
                    <span class="circle circle-small blue"><span class="icon icon-flag"></span></span>
                    {{event.Title}}
                </h3>
            </div>
            <div class="toolbar-group right">
                <button title="{{$resource('utility.reset')}}" class="button tooltip" ng:click="reset()"><i class="icon-undo"></i></button>
                <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 class="toolbar-group right">
                <button title="{{$resource('utility.new')}}" class="trigger button lightblue tooltip"><i class="icon-plus"></i></button>
                <div qn:popover="{position: {my: 'right top', at: 'left top'}}">
                    <ul>
                        <li ng:click="addRadnik()"><a><i class="icon icon-caret-left"></i>{{$resource('events.radnik')}}</a></li>
                        <li ng:click="addTeam()"><a><i class="icon icon-caret-left"></i>{{$resource('events.team')}}</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="table table-hover fillh">
            <div class="content">
                <div>
                    <div class="stats-overview">
                        <div class="inner">
                            <div class="title">{{$resource('events.num_of_participants')}}</div>
                            <div class="numbers">{{event.RadnikCount}}</div>
                        </div>
                    </div>
                </div>
                  <div>
                    <div class="stats-overview">
                        <div class="inner">
                            <div class="title">{{$resource('events.num_of_participants')}}</div>
                            <div class="numbers">{{event.TeamCount}}</div>
                        </div>
                    </div>
                </div>
            </div>

            <table>
                <thead>
                    <tr>
                        <th>{{$resource('events.participant')}}</th>
                        <th>{{$resource('events.approved')}}</th>
                        <th>{{$resource('events.suspended')}}</th>
                        <th>{{$resource('events.starts')}}</th>
                        <th>{{$resource('events.expires')}}</th>
                        <th>{{$resource('events.status')}}</th>
                        <th></th>
                    </tr>
                </thead>
                <tr ng:repeat="eventRadnik in event.EventRadnik">
                    <td>{{eventRadnik.ImePrezime}}</td>
                    <td>{{eventRadnik.ApprovedOn | qdate}}</td>
                    <td>{{eventRadnik.SuspendedOn | qdate}}</td>
                    <td>{{eventRadnik.StartsOn | qdate}}</td>
                    <td>{{eventRadnik.ExpiresOn | qdate}}</td>
                    <td>{{eventRadnik.EventSubscriptionStatus}}</td>
                    <td class="command icon">
                        <a title="{{$resource('utility.options')}}" class="trigger tooltip"><i class="icon-reorder"></i></a>
                        <div qn:popover="{position: {my: 'right top', at: 'left top'}}">
                            <ul>
                                <li ng:click="removeRadnik(eventRadnik, $index)"><a><i class="icon icon-trash"></i>{{$resource('events.delete')}}</a></li>
                                <li ng:click="changeRadnik(eventRadnik)"><a><i class="icon icon-edit"></i>{{$resource('events.edit')}}</a></li>
                            </ul>
                        </div>
                    </td>

                </tr>
            </table>
            <br/>
            <div>
                <h2>{{event.Summary}}</h2><br/>
                <p style="font-size: 15px" ng-bind-html-unsafe="event.Content"></p><br/>
                <p>{{$resource('events.location')}}: {{event.Location}}</p><br/>
                <p>{{$resource('events.external_link')}}: {{event.ExternalLink}}</p>
            </div>

        </div>
          <div class="table fillh">
            <table class="table table-hover" id="treeLabels">
                <thead>
                    <tr>
                        <th class="icon">&nbsp;</th>
                        <th>{{$resource('classifications.name')}}</th>
                        <th>{{$resource('classifications.alias')}}</th>
                        <th>{{$resource('classifications.color')}}</th>
                        <th ng:show="classification.IsHierarchy">{{$resource('classifications.children')}}</th>
                        <th>&nbsp;</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng:repeat="label in event.Labels" data-tt-id="{{label.ID}}" data-tt-parent-id="{{label.ParentID}}">
                        <td class="icon"><span class="circle circle-small" style="background: {{label.Color}}"></span></td>
                        <td class="title">
                            <div class="inner">
                                <h2>{{label.Name}}</h2>
                            </div>
                        </td>
                        <td>{{label.Alias}}</td>
                        <td>{{label.Color}}</td>
                        <td ng:show="classification.IsHierarchy">{{label.Children.length}}</td>
                        <td class="command icon">
                        <a title="{{$resource('utility.options')}}" class="trigger tooltip"><i class="icon-reorder"></i></a>
                        <div qn:popover="{position: {my: 'right top', at: 'left top'}}">
                            <ul>
                                <li ng:click="removeRadnik(eventRadnik, $index)"><a><i class="icon icon-trash"></i>{{$resource('events.delete')}}</a></li>
                                <li ng:click="changeRadnik(eventRadnik)"><a><i class="icon icon-edit"></i>{{$resource('events.edit')}}</a></li>
                            </ul>
                        </div>
                    </td>
                    </tr>
                </tbody>
            </table>
            <div qn:dialog="ui.dialogEdit">
                <form name="EditLabel">
                    <div class="control-group cfix required">
                        <label>Naziv</label>
                        <div class="controls">
                            <input type="text" name="Name" ng:Model="label.Name" required/>
                            <div ng:show="errors['label.Name'][0]" style="display: block; clear: both; color: red; padding: 10px 0 0;">{{$resource(errors['label.Name'][0])}}</div>
                        </div>
                    </div>
                      <div class="control-group cfix required">
                            <label for="NewLabelAlias">{{$resource('classifications.alias')}}</label>
                            <div class="controls">
                                <input type="text" name="Alias" ng:model="label.Alias" required />
                                <div ng:show="errors['label.Alias'][0]" style="display: block; clear: both; color: red; padding: 10px 0 0;">{{$resource(errors['label.Alias'][0])}}</div>
                            </div>
                        </div>
                    <label>Boja <input type="text" qn:colorpicker name="Color" ng:Model="label.Color" /></label>
                    <br/>      
                    <div>
                        <button  class="button lightblue" ng:click="update()">{{$resource('classifications.save')}}</button> &nbsp; <button class="button" ng:click="cancelEdit()">{{$resource('classifications.cancel')}}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div qn:dialog="ui.dialogAddRadnik">
        <form class="form-horizontal" name="NewRadnik">
            <div class="control-group required">
                <label class="control-label">{{$resource('events.radnik')}}</label>
                <div class="controls">
                    <select ng:model="radnik.ID" name="RadnikID" ng:options="radnik.ID as radnik.ImePrezime for radnik in radnici" required>
                        <option></option>
                    </select>
                    <div ng:show="errors['model.RadnikID'][0]" style="display: block; clear: both; color: red; padding: 10px 0 0;">{{$resource(errors['model.RadnikID'][0])}}</div>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">{{$resource('events.approved')}}</label>
                <div class="controls">
                    <input qn:datepicker class="input-medium" type="text" name="ApprovedOn" ng:model="radnik.ApprovedOn" />
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">{{$resource('events.suspended')}}</label>
                <div class="controls">
                    <input qn:datepicker class="input-medium" type="text" name="SuspendedOn" ng:model="radnik.SuspendedOn" />
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">{{$resource('events.starts')}}</label>
                <div class="controls">
                    <input qn:datepicker class="input-medium" type="text" name="StartsOn" ng:model="radnik.StartsOn" />
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">{{$resource('events.expires')}}</label>
                <div class="controls">
                    <input qn:datepicker class="input-medium" type="text" name="ExpiresOn" ng:model="radnik.ExpiresOn" />
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">&nbsp;</label>
                <div class="controls">
                    <button type="button" ng:click="createRadnik()" class="button lightblue">{{$resource('events.add_user')}}</button> &nbsp; <button class="button" ng:click="cancelAddRadnik()">{{$resource('events.cancel')}}</button>
                </div>
            </div>
        </form>
    </div>
    <div qn:dialog="ui.dialogAddTeam">
        <form class="form-horizontal" name="NewTeam">
            <div class="control-group required">
                <label class="control-label">{{$resource('events.team')}}</label>
                <div class="controls">
                    <select multiple="multiple" ng:model="radnik.Labels" ng:options="team.ID as team.Name for team in teams" required></select>
                    <div ng:show="errors['model.Labels'][0]" style="display: block; clear: both; color: red; padding: 10px 0 0;">{{$resource(errors['model.Labels'][0])}}</div>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">{{$resource('events.approved')}}</label>
                <div class="controls">
                    <input qn:datepicker class="input-medium" type="text" name="ApprovedOn" ng:model="radnik.ApprovedOn" />
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">{{$resource('events.suspended')}}</label>
                <div class="controls">
                    <input qn:datepicker class="input-medium" type="text" name="SuspendedOn" ng:model="radnik.SuspendedOn" />
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">{{$resource('events.starts')}}</label>
                <div class="controls">
                    <input qn:datepicker class="input-medium" type="text" name="StartsOn" ng:model="radnik.StartsOn" />
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">{{$resource('events.expires')}}</label>
                <div class="controls">
                    <input qn:datepicker class="input-medium" type="text" name="ExpiresOn" ng:model="radnik.ExpiresOn" />
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">&nbsp;</label>
                <div class="controls">
                    <button type="button"  ng:click="createTeam()" class="button lightblue">{{$resource('events.add_user')}}</button> &nbsp; <button class="button" ng:click="cancelAddTeam()">{{$resource('events.cancel')}}</button>
                </div>
            </div>
        </form>
    </div>
    <div qn:dialog="ui.dialogChangeRadnik">
        <form class="form-horizontal" name="ChangeRadnik">
            <div class="control-group required">
                <label class="control-label">{{$resource('events.radnik')}}</label>
                <div class="controls">
                    <select ng:model="radnik.RadnikID" name="RadnikID" ng:options="radnik.ID as radnik.RadnikName for radnik in radnici" required>
                        <option></option>
                    </select>
                    <div ng:show="errors['model.RadnikID'][0]" style="display: block; clear: both; color: red; padding: 10px 0 0;">{{$resource(errors['model.RadnikID'][0])}}</div>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">{{$resource('events.approved')}}</label>
                <div class="controls">
                    <input qn:datepicker class="input-medium" type="text" name="ApprovedOn" ng:model="radnik.ApprovedOn" />
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">{{$resource('events.suspended')}}</label>
                <div class="controls">
                    <input qn:datepicker class="input-medium" type="text" name="SuspendedOn" ng:model="radnik.SuspendedOn" />
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">{{$resource('events.starts')}}</label>
                <div class="controls">
                    <input qn:datepicker class="input-medium" type="text" name="StartsOn" ng:model="radnik.StartsOn" />
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">{{$resource('events.expires')}}</label>
                <div class="controls">
                    <input qn:datepicker class="input-medium" type="text" name="ExpiresOn" ng:model="radnik.ExpiresOn" />
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">&nbsp;</label>
                <div class="controls">
                    <button type="button" ng:click="updateRadnik()" class="button lightblue">{{$resource('events.change_user')}}</button> &nbsp; <button class="button" ng:click="cancelChangeRadnik()">{{$resource('events.cancel')}}</button>
                </div>
            </div>
        </form>
    </div>
</div>