<div ng-controller="Umbraco.Editors.Dictionary.ListController as vm">

    <umb-load-indicator ng-if="vm.loading">
    </umb-load-indicator>

    <umb-editor-view ng-if="!vm.loading">
        <umb-editor-header 
            name="vm.title"
            hide-alias="true"
            hide-description="true"
            hide-icon="true"
            name-locked="true">
        </umb-editor-header>
        <umb-editor-container>

            <umb-box ng-if="vm.items.length === 0">
                <umb-box-content class="block-form">

                    <umb-empty-state size="small">
                        <localize key="dictionary_noItems">There are no dictionary items.</localize>
                    </umb-empty-state>

                </umb-box-content>
            </umb-box>

            <table class="table table-hover" ng-if="vm.items.length > 0">
                <thead>
                    <tr>
                        <th><localize key="general_name">Name</localize></th>
                        <th ng-repeat="column in vm.items[0].translations">{{column.displayName}}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="item in vm.items track by item.id" ng-click="vm.clickItem(item.id)" style="cursor: pointer;">
                        <td>
                            <span class="bold" ng-style="item.style">{{item.name}}</span>
                        </td>
                        <td ng-repeat="column in item.translations">
                            <i ng-if="column.hasTranslation" class="icon-check color-green"></i>
                            <i ng-if="!column.hasTranslation" class="icon-alert color-red"></i>
                        </td>
                    </tr>
                </tbody>
            </table>

        </umb-editor-container>
    </umb-editor-view>
</div>
