<div ng-controller="wizdom365ManualColumnsController" ng-init="init()" class="lt-module-page">

    <div class="lt-module-page__top lt-module-page-top">
        <div class="lt-module-page-top__title mr-auto">
            <h1>{{'Display Template' | translate}}</h1>
        </div>
        <div class="lt-module-page-top__actions">
            <button ng-click="createTemplate()" class="btn btn-default">{{'Create Template' | translate}}</button>
            <button class="btn btn-danger"
                    ng-show="selected"
                    ng-click="deleteTemplate()">
                {{'Delete Template' | translate}}
            </button>
            <button class="btn btn-primary"
                    ng-disabled="saving || (selected && hasEmptyColumns())"
                    ng-click="save()">
                {{saving ? 'Saving' : 'Save configuration' | translate}}
            </button>
        </div>
    </div>

    <div class="panel lt-module-page__content-panel">
        <p>{{"Create and manage your Policies and Procedures modern layout templates." | translate}}</p>
        <br />

        <div ng-show="!working">
            <select class="form-control"
                    ng-model="selected"
                    ng-options="option.label for option in settings.DisplayTemplates.templates track by option.label">
                <option value="" disabled selected>{{"Select a template" | translate}}</option>
            </select>

            <div ng-show="settings.DisplayTemplates.templates.length === 0">
                <br />
                <p class="text-center"><strong>{{'No templates found' | translate}}</strong></p>
            </div>

            <div ng-show="settings.DisplayTemplates.templates.length > 0 && !selected">
                <br />
                <p class="text-center"><strong>{{settings.DisplayTemplates.templates.length}} {{'Templates Found' | translate}}</strong></p>
            </div>

            <br />

            <ul class="list-group lt-list" ng-show="selected">
                <li class="list-group-item lt-list__item lt-flextable__table">
                    <div class="lt-flextable__row lt-flextable__row-heading col1/2">{{'Column Name' | translate}}</div>
                    <div class="lt-flextable__row lt-flextable__row-heading col1/2">{{'Managed Property' | translate}}</div>
                    <div class="lt-flextable__row lt-flextable__row-heading col1/8 justify-content-center">{{'Show' | translate}}</div>
                    <div class="lt-flextable__row lt-flextable__row-heading col1/8 justify-content-center">{{'Person Field' | translate}}</div>
                    <div class="lt-flextable__row lt-flextable__row-heading icon-spacer"></div>
                    <div class="lt-flextable__row lt-flextable__row-heading icon-spacer"></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-repeat="column in selected.columns track by column.name">
                    <div class="lt-flextable__row col1/2">
                        <input type="text" class="form-control" ng-readonly="column.mandatory" ng-model="column.name" />
                    </div>
                    <div class="lt-flextable__row col1/2">
                        <input type="text" class="form-control" ng-readonly="column.mandatory" ng-model="column.prop" />
                    </div>
                    <div class="lt-flextable__row col1/8 justify-content-center">
                        <input ng-model="column.show" type="checkbox" ng-disabled="!column.canBeHidden" ng-click="toggleProperty(column, 'show')" />
                    </div>
                    <div class="lt-flextable__row col1/8 justify-content-center">
                        <input ng-model="column.isPersonField" type="checkbox" ng-click="toggleProperty(column, 'isPersonField')" />
                    </div>
                    <div class="lt-list-item__actions lt-flextable__row icon-spacer">
                        <span class="streamline icon-arrow-up" ng-click="move(-1, $index)" ng-show="$first == false" aria-hidden="true"></span>
                    </div>
                    <div class="lt-list-item__actions lt-flextable__row icon-spacer">
                        <span class="streamline icon-arrow-down" ng-click="move(1, $index)" ng-show="$last == false" aria-hidden="true"></span>
                    </div>
                    <div class="lt-list-item__actions lt-flextable__row icon-spacer">
                        <span class="streamline icon-bin-1" ng-click="!column.mandatory ? deleteItem($index) : NULL" ng-class="column.mandatory ? 'inactive' : ''" aria-hidden="true"></span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="lt-module-page__panel-footer">
        <button class="btn btn-primary"
                ng-show="selected && !hasEmptyColumns()"
                ng-click="addItem()">
            {{'Add Column' | translate}}
        </button>
    </div>
</div>
