<div ng-controller="LiveTilesTypesController" class="livetiles-admin-types">
    <div class="lt-module-page__top lt-module-page-top">
        <div class="lt-module-page-top__title mr-auto">
            <h1>{{'Tile Overview' | translate}}</h1>
        </div>
        <div class="lt-module-page-top__actions">
            <button type="button" class="btn btn-primary" ng-click="createType()">{{'Create' | translate}}</button>
        </div>
    </div>

    <div class="lt-module-page__content">
        <div class="container-fluid">
            <table class="table table-hover">
                <colgroup>
                    <col />
                    <col />
                    <col />
                    <col />
                </colgroup>
                <thead>
                    <tr>
                        <th>{{'Name' | translate}}</th>
                        <th>Display {{'Template' | translate | lowercase}}</th>
                        <th>Hover {{'Template' | translate | lowercase}}</th>
                        <th>Action {{'Template' | translate | lowercase}}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="type in typesRoot.children track by type.id"
                        ng-click="editType(type)"
                        class="livetiles-cursor-pointer"
                        title="{{'Click to edit' | translate}}">
                        <td>{{type.value.label}}</td>
                        <td>
                            <div>
                                <span>{{type.value.templates.classic.display.split('/').pop().split('.')[0]}}</span>
                                <span class="small text-muted">&nbsp;{{"(Classic)" | translate}}</span>
                            </div>
                            <div>
                                <span>{{type.value.templates.modern.display.split('/').pop().split('.')[0]}}</span>
                                <span class="small text-muted">&nbsp;{{"(Modern)" | translate}}</span>
                            </div>
                        </td>
                        <td>
                            <div>
                                <span>{{type.value.templates.classic.hover.split('/').pop().split('.')[0]}}</span><span class="small text-muted">&nbsp;{{"(Classic)" | translate}}</span><br />
                                <span>{{type.value.templates.modern.hover.split('/').pop().split('.')[0]}}</span><span class="small text-muted">&nbsp;{{"(Modern)" | translate}}</span>
                            </div>
                        </td>
                        <td>
                            <div>
                                <span>{{type.value.templates.classic.action.split('/').pop().split('.')[0]}}</span><span class="small text-muted">&nbsp;{{"(Classic)" | translate}}</span><br />
                                <span>{{type.value.templates.modern.action.split('/').pop().split('.')[0]}}</span><span class="small text-muted">&nbsp;{{"(Modern)" | translate}}</span>
                            </div>
                        </td>

                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
