<div ng:controller="ClassificationLabelController" class="row-fluid" qn:fillheight>
    <div class="col12">
        <div class="toolbar cfix">
            <div class="toolbar-group">
                <h3>
                    <span class="circle circle-small blue"><span class="icon li_cloud"></span></span>
                    {{$resource('classifications.name')}}
                </h3>
            </div>
            <div class="toolbar-group">
                <button title="{{$resource('utility.home')}}" class="button tooltip" ng:click="back()"><i class="icon-home"></i></button>
            </div>
            <div class="toolbar-group">
                <button ng:show="isSearch()" title="{{$resource('utility.reset')}}" class="button tooltip" ng:click="reset()"><i class="icon-angle-left"></i></button>
                <button title="{{$resource('utility.refresh')}}" class="button tooltip" ng:click="refresh()"><i class="icon-refresh"></i></button>
            </div>
            <div class="toolbar-group">
                <input type="search" qn:enter="search()"  ng:model="query.name" />
                <button title="{{$resource('utility.search')}}" class="button tooltip" ng:click="search()"><i class="icon-search"></i></button>
            </div>
            <div ng:show="!isSearch()" class="toolbar-group">
                <button title="{{$resource('utility.reorder')}}" class="button lightblue tooltip" ng:click="openReordering()"><i class="icon-sort"></i></button>
            </div>
            <div class="toolbar-group">
                <button title="{{$resource('utility.new')}}" class="button lightblue tooltip"><i class="icon-plus"></i></button>
                <div class="form button-widget" qn:popover>
                    <form name="NewLabel" class="cfix">
                        <div class="control-group cfix required">
                            <label for="NewLabelName">{{$resource('classifications.name')}}</label>
                            <div class="controls">
                                <input type="text" id="NewLabelName" name="Name" ng:model="newLabel.Name" required />
                                <div ng:show="errors['newLabel.Name'][0]" style="display: block; clear: both; color: red; padding: 10px 0 0;">{{$resource(errors['newLabel.Name'][0])}}</div>
                            </div>
                        </div>
                           <div class="control-group cfix ">
                            <label for="NewLabelAlias">{{$resource('classifications.alias')}}</label>
                            <div class="controls">
                                <input type="text" id="NewLabelAlias" name="Alias" ng:model="NewLabel.Alias" required />
                                <div ng:show="errors['NewLabel.Alias'][0]" style="display: block; clear: both; color: red; padding: 10px 0 0;">{{$resource(errors['NewLabel.Alias'][0])}}</div>
                            </div>
                        </div>
                        <div class="control-group cfix">
                            <label for="NewLabelColor">{{$resource('classifications.color')}}</label>
                            <div class="controls">
                                <input type="text" qn:colorpicker id="NewLabelColor" name="Color" ng:model="newLabel.Color" />
                            </div>
                        </div>
                        <div class="control-group cfix">
                            <div class="controls">
                                <button title="{{$resource('classifications.create')}}" class="button tooltip" ng:click="create()"><i class="icon-ok"></i></button>
                            </div>
                        </div>
                    </form>
                </div>
            </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 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">
                            <span title="{{$resource('utility.options')}}" class="trigger tooltip"><i class="icon-reorder"></i></span>
                            <div qn:popover="{position: {my: 'right top', at: 'left top'}}">
                                <ul>
                                    <li ng:click="editDialog(label)"><a><i class="icon icon-edit"></i>{{$resource('classifications.edit')}}</a></li>
                                    <li ng:click="createDialog(label)"><a><i class="icon icon-plus"></i>{{$resource('classifications.create_child')}}</a></li>
                                    <li ng:click="remove(label, $index)"><a><i class="icon-trash"></i>{{$resource('classifications.delete')}}</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.dialogCreate">
        <form name="NewLabel" class="cfix">
            <div class="control-group cfix required">
                <label for="NewLabelName">{{$resource('classifications.name')}}</label>
                <div class="controls">
                    <input type="text" id="Text1" name="Name" ng:model="newLabel.Name" required />
                    <div ng:show="errors['newLabel.Name'][0]" style="display: block; clear: both; color: red; padding: 10px 0 0;">{{$resource(errors['newLabel.Name'][0])}}</div>
                </div>
            </div>
            <div class="control-group cfix">
                <label for="NewLabelColor">{{$resource('classifications.color')}}</label>
                <div class="controls">
                    <input type="text" qn:colorpicker id="Text2" name="Color" ng:model="newLabel.Color" />
                </div>
            </div>
            <div class="control-group cfix">
                <div class="controls">
                    <button class="button" ng:click="createChild()"><i class="icon-ok"></i></button>
                </div>
            </div>
        </form>
    </div>
    <div qn:dialog="ui.reorderDialog">
        <div class="content">
            <div qn:Jstree="treeOptions" qn:Treeobject="treeObject" ng:Model="labele">
                <ul>
                    <li ng-repeat="label in labele" id="{{label.ID}}">{{label.Title}}</li>
                </ul>
            </div>
        </div>
        <div class="commands">
            <button class="button lightblue" ng:click="doneReordering()">{{$resource('classifications.save')}}</button> &nbsp;
            <button ng:Click="cancelReordering()" class="button">{{$resource('classifications.cancel')}}</button>
        </div>

    </div>
</div>
