<div ng-controller="PowerpanelAddEditPanelController">
    <form>
        <div class="form-group">
            <label>{{'Panel icon' | translate}}</label>
            <wizdom365-ui-fabric-icon-picker ng-model="vm.bindObj.value.icon" hide-color-selector="true"></wizdom365-ui-fabric-icon-picker>
        </div>
        <div class="form-group">
            <label>{{'Panel title' | translate}}</label>
            <input type="text" class="form-control" ng-model="vm.bindObj.title" placeholder="{{vm.title}}">
        </div>
        <div class="form-group">
            <label>{{'Panel label (default: Same as panel title)' | translate}}</label>
            <div>
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist" style="margin-bottom: 15px;">
                    <li ng-class="{active: vm.currentLabelLanguage === ''}">
                        <a data-toggle="all" ng-model="vm.currentLabelLanguage" ng-click="vm.labelLanguageChanged()">{{'All' | translate}}</a>
                    </li>
                    <li ng-class="{active: vm.currentLabelLanguage === language.tag}" role="presentation" ng-repeat="language in vm.languages | orderBy:'displayName' | filter: { active: 'true' } as activeLanguages">
                        <a  data-toggle="{{language.tag}}" ng-model="vm.currentLabelLanguage" ng-click="vm.labelLanguageChanged(language)">{{language.displayName}}&nbsp;<i class="glyphicon glyphicon-ok" ng-show="vm.translationHasValues(language.tag)"></i></a>
                    </li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane" ng-class="{active: vm.currentLabelLanguage === ''}" id="all">
                        <div class="input-group">
                            <input type="text" class="form-control" ng-model="vm.bindObj.value.label" placeholder="{{vm.bindObj.title}}">
                        </div>
                    </div>
                    <div role="tabpanel" class="tab-pane" ng-class="{active: vm.currentLabelLanguage === language.tag}" id="{{language.tag}}" ng-repeat="language in vm.languages | orderBy:'displayName' | filter: { active: 'true' } as activeLanguages">
                        <div class="input-group">
                            <input type="text" class="form-control" ng-model="vm.translations[language.tag].value.label" placeholder="{{vm.bindObj.title}}" />
                        </div>
                         <a class="cursor-pointer" ng-show="vm.translationHasValues(vm.currentLabelLanguage)" ng-click="vm.clearLabelLanguage()">
                            {{'Remove this translation' | translate}}
                        </a>
                    </div>
                </div>
            </div>        
        </div>
        <div class="form-group">
            <label>{{'Width' | translate}}</label>
            <div class="dropdown">
                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownType" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    {{vm.bindObj.value.widthType}}&nbsp;&nbsp;<span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li ng-repeat="widthType in vm.widthTypes">
                        <a ng-click="vm.widthTypeChanged(widthType)">{{widthType}} &nbsp;<i class="glyphicon glyphicon-ok" ng-show="vm.bindObj.value.widthType == widthType"></i></a>
                    </li>
                </ul>
            </div>
            <!-- If width has not been previously set, the default value will be 450 (small) -->
            <input 
                   ng-if="vm.bindObj.value.widthType == 'Custom'" 
                   ng-init="vm.bindObj.value.width = vm.bindObj.value.width || 450" 
                   type="number" class="form-control" 
                   ng-model="vm.bindObj.value.width" 
                   min="1" 
                   max="5000" 
                   placeholder="Custom width">
        </div>
    </form>   
</div>