<div class="modal-header">
    <button ng-click="cancel()" type="button" aria-label="Close" class="close closebtn">&times;</button>
    <span class="modal-title">{{'Edit type' | translate}}</span>
</div>
<div class="modal-body">
    <form name="typeForm" class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-3 control-label">
                {{'Name' | translate}}<small class="text-danger">*</small>
            </label>
            <div class="col-sm-9">
                <input ng-model="type.value.label" type="text" class="form-control" required />
            </div>
        </div>

        <!-- Display -->
        <div>
            <div class="form-group">
                <label class="col-sm-offset-3 col-sm-9 livetiles-template-header">{{'Display template' | translate}}</label>
            </div>

            <!-- Classic -->
            <div class="form-group">
                <label class="col-sm-3 control-label small">{{'Classic' | translate}}</label>
                <div class="col-sm-9">
                    <div wizdom365-template-picker template-url="type.value.templates.classic.display" directory-path="LiveTiles/Templates/ViewTemplates/Display"></div>
                </div>
            </div>

            <!-- Modern -->
            <div class="form-group">
                <label class="col-sm-3 control-label small">{{'Modern' | translate}}</label>
                <div class="col-sm-9">
                    <div wizdom365-template-picker template-url="type.value.templates.modern.display" directory-path="LiveTiles/Templates/ModernTemplates/Display"></div>
                </div>
            </div>
        </div>

        <!-- Hover -->
        <div>
            <div class="form-group">
                <label class="col-sm-offset-3 col-sm-9 livetiles-template-header">{{'Hover template' | translate}}</label>
            </div>

            <!-- Classic -->
            <div class="form-group">
                <label class="col-sm-3 control-label small">{{'Classic' | translate}}</label>
                <div class="col-sm-9">
                    <div wizdom365-template-picker template-url="type.value.templates.classic.hover" directory-path="LiveTiles/Templates/ViewTemplates/Hover"></div>
                </div>
            </div>

            <!-- Modern -->
            <div class="form-group">
                <label class="col-sm-3 control-label small">{{'Modern' | translate}}</label>
                <div class="col-sm-9">
                    <div wizdom365-template-picker template-url="type.value.templates.modern.hover" directory-path="LiveTiles/Templates/ModernTemplates/Hover"></div>
                </div>
            </div>
        </div>

        <!-- Action -->
        <div>
            <div class="form-group">
                <label class="col-sm-offset-3 col-sm-9 livetiles-template-header">{{'Action template' | translate}}</label>
            </div>

            <!-- Classic -->
            <div class="form-group">
                <label class="col-sm-3 control-label small">{{'Classic' | translate}}</label>
                <div class="col-sm-9">
                    <div wizdom365-template-picker template-url="type.value.templates.classic.action" directory-path="LiveTiles/Templates/ViewTemplates/Action"></div>
                </div>
            </div>

            <!-- Modern -->
            <div class="form-group">
                <label class="col-sm-3 control-label small">{{'Modern' | translate}}</label>
                <div class="col-sm-9">
                    <div wizdom365-template-picker template-url="type.value.templates.modern.action" directory-path="LiveTiles/Templates/ModernTemplates/Action"></div>
                </div>
            </div>
        </div>

        <hr />
        <div class="text-center h5">{{'Non-base fields' | translate}}</div>
        <div class="form-group livetiles-custom-field" ng-repeat="key in type.value.fields | filter:notBaseField">
            <span class="col-sm-3 text-right">
                <button type="button" class="btn-link small" title="{{'Remove field' | translate}}" ng-click="removeField(key)">
                    <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                </button>
            </span>
            <div class="col-sm-9">
                <label class="control-label">
                    {{getField(key).value.label}}&nbsp;<small>({{key}})</small>
                </label>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">{{'Add' | translate}}</label>
            <div class="col-sm-9">
                <select ng-model="selectedField" ng-change="addField()" class="form-control">
                    <option></option>
                    <option ng-repeat="field in availableFields()" ng-value="field.title">{{field.value.label + ' (' + field.title + ')'}}</option>
                </select>
            </div>
        </div>
    </form>
</div>
<div class="modal-footer">
    <button class="btn btn-danger pull-left" ng-if="!isNewForm" ng-click="delete();">{{'Delete' | translate}}</button>
    <button class="btn btn-default" ng-disabled="loading" ng-click="cancel();">{{(hasPendingChanges() ? 'Cancel' : 'Close') | translate}}</button>
    <button class="btn btn-success" ng-if="hasPendingChanges()" ng-click="save();" ng-disabled="typeForm.$invalid">{{'Save' | translate}}</button>
</div>