<div ng:controller="ClassificationMainController" class="row-fluid" qn:fillheight>
    <div class="col10">
        <div class="toolbar cfix">
            <div class="toolbar-group">
                <h3>
                    <span class="circle circle-small blue"><span class="icon li_tag"></span></span>
                    {{$resource('classifications.classifications')}}
                </h3>
            </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">
                <button title="{{$resource('utility.new')}}" class="button lightblue tooltip"><i class="icon-plus"></i></button>
                <div qn:popover class="button-widget">
                    <form name="NewClassification" class="cfix">
                        <div class="control-group cfix required">
                            <label for="NewClassificationName">{{$resource('classifications.name')}}</label>
                            <div class="controls">
                                <input type="text" id="NewClassificationName" name="Name" ng:model="newClassification.Name" required />
                                <div ng:show="errors['newClassification.Name'][0]" style="display: block; clear: both; color: red; padding: 10px 0 0;">{{$resource(errors['newClassification.Name'][0])}}</div>
                            </div>
                        </div>
                        <div class="control-group cfix required">
                            <label for="NewClassificationType">{{$resource('classifications.type')}}</label>
                            <div class="controls">
                                <select id="NewClassificationType" name="ClassificationType" ng:model="newClassification.ClassificationType" required>
                                    <option value="0" selected="selected">{{$resource('classifications.flat')}}</option>
                                    <option value="1">{{$resource('classifications.hierarchy')}}</option>
                                </select>
                            </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 table-hover fillh">
            <table id="treeTable">
                <thead>
                    <tr>
                        <th class="icon"></th>
                        <th>{{$resource('classifications.name')}}</th>
                        <th>{{$resource('classifications.type')}}</th>
                        <th>{{$resource('classifications.alias')}}</th>
                        <th class="number">{{$resource('classifications.number_of_items')}}</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody ng:Model="classifications">
                    <tr ng:repeat="classification in classifications">
                        <td class="icon">
                            <div title="{{classification.ClassificationType.DisplayName}}" class="circle classification-type-{{classification.ClassificationType.LowerName}}">
                                <i ng:show="classification.IsFlat" class="icon-tag"></i>
                                <i ng:show="classification.IsHierarchy" class="icon-folder-open"></i>
                            </div>
                        </td>
                        <td class="title" ng:click="select(classification)">
                            <div class="inner">
                                <h2>{{classification.Name}}</h2>
                                <!--<p class="info">{{classification.ClassificationType.DisplayName}}</p>-->
                            </div>
                        </td>
                        <td>{{classification.ClassificationType.DisplayName}}</td>
                        <td>{{classification.Alias}}</td>
                        <td class="number">{{classification.LabelsCount}}</td>
                        <td class="command icon">
                            <a title="{{$resource('utility.options')}}" class="button tooltip" class="trigger"><i class="icon-reorder"></i></a>
                            <div qn:popover="{position: {my: 'right top', at: 'left top'}}">
                                <ul>
                                    <li ng:show="!classification.IsSystem" ng:click="edit(classification)"><a><i class="icon icon-edit"></i>{{$resource('classifications.edit')}}</a></li>
                                    <li ng:show="!classification.IsSystem" ng:click="remove(classification, $index)" value="Are you sure?"><a><i class="icon-trash"></i>{{$resource('classifications.delete')}}</a></li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="col2 sidebar">
        <div class="toolbar toolbar-strip lightblue cfix">
            <div class="toolbar-group right">
                <h3>
                    <span class=""><span class="icon li_search"></span></span>
                </h3>
            </div>
        </div>
        <div class="inner fillh">
            <ul class="nav">
                <li ng:class="{active:!isSearch()}"><a ng:click="reset()"><i class="icon-asterisk"></i>{{$resource('classifications.all')}}</a></li>
                <li ng:class="{active:query.classificationType==0}"><a ng:click="search({classificationType:'0'}, true)"><i class="icon-tag"></i>{{$resource('classifications.flat_only')}}</a></li>
                <li ng:class="{active:query.classificationType==1}"><a ng:click="search({classificationType:'1'}, true)"><i class="icon-folder-open"></i>{{$resource('classifications.hierarchy_only')}}</a></li>
            </ul>
        </div>
    </div>
</div>