<div ng-controller="Wizdom365MegamenuElementTypesController as vm">
    <div class="lt-module-page__top lt-module-page-top">
        <div class="lt-module-page-top__title">
            <h1>{{'Element types' | translate}}</h1>
        </div>
        <div class="lt-module-page-top__actions">
            <span>{{'Configuration' | translate}}</span>
            <wizdom365-specific-configuration-picker module="'Megamenu'"></wizdom365-specific-configuration-picker>
        </div>
    </div>

    <wizdom365-spinner loading="loading"></wizdom365-spinner>

    <div class="panel lt-module-page__content-panel">
        <ul class="list-group lt-list" ng-show="vm.types">
            <li class="list-group-item lt-list__item lt-flextable__table">
                <div class="lt-flextable__row lt-flextable__row-heading col1/3">{{'Name' | translate}}</div>
                <div class="lt-flextable__row lt-flextable__row-heading col1/3">{{'View template' | translate}}</div>
                <div class="lt-flextable__row lt-flextable__row-heading col1/3">{{'Edit template' | translate}}</div>
                <div class="lt-flextable__row lt-flextable__row-heading icon-spacer"></div>
            </li>

            <li class="list-group-item lt-list__item lt-flextable__table" ng-show="typeObject" ng-repeat="(contentType,typeObject) in vm.types">
                <div class="lt-flextable__row col1/3">
                    {{typeObject.DisplayName}}
                </div>
                <div class="lt-flextable__row col1/3">
                    <select class="form-control" ng-model="typeObject.ViewTemplateUrl" ng-options="template.path as template.name for template in vm.templates | filter:{name:'_view'}" ng-change="vm.changed(typeObject)"></select>
                </div>
                <div class="lt-flextable__row col1/3">
                    <select class="form-control" ng-model="typeObject.EditTemplateUrl" ng-options="template.path as template.name for template in vm.templates | filter:{name:'_edit'}" ng-change="vm.changed(typeObject)"></select>
                </div>
                <div class="lt-flextable__row icon-spacer justify-content-center cursor-pointer">
                    <span class="streamline icon-bin-1" ng-hide="typeObject.SystemType" ng-click="vm.delete(contentType)" aria-hidden="true"></span>
                </div>
            </li>
        </ul>
    </div>

    <div class="lt-module-page__panel-footer">
        <div class="input-group">
            <input type="text" class="form-control" ng-model="vm.newObject.DisplayName" />
            <div class="input-group-btn">
                <button class="btn btn btn-primary" ng-click="vm.createNew(vm.newObject)">{{'Add' | translate}}</button>
            </div>
        </div>
    </div>
</div>