<div class="modal-header">
    <button ng-click="cancel()" type="button" aria-label="Close" class="close closebtn">&times;</button>
    <h1 class="modal-title">{{'Kanban webpart' | translate}}</h1>
</div>
<div class="modal-body">
    <form>
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12">
                    <!-- List picker -->
                    <div class="form-group">
                        <label class="control-label">{{'List' | translate}}</label>
                        <select ng-model="settings.listId"
                                ng-options="list.value as list.key group by getListGroup(list.value) for list in kanbanLists"
                                class="form-control"></select>
                    </div>
                    <!-- List creator -->
                    <div ng-if="!settings.listId" ng-form name="list.form" class="kanban-list-creator">
                        <!-- New list name -->
                        <div class="form-group">
                            <label class="control-label">{{'List name' | translate}}</label>
                            <input ng-model="list.name"
                                   name="name"
                                   type="text"
                                   kanban-unique="kanbanListsNames"
                                   class="form-control"
                                   required />
                            <p class="wt-fieldInfo" ng-if="list.form.name.$error.required">{{'List name is required' | translate}}</p>
                            <p class="wt-fieldInfo" ng-if="list.form.name.$error.unique">{{'List name already in use' | translate}}</p>
                        </div>
                        <!-- New list swimlanes -->
                        <div class="form-group">
                            <label class="control-label">
                                {{'Swimlanes' | translate}}
                                <br />
                                <small>{{'Each line is a swimlane' | translate}}</small>
                            </label>

                            <textarea ng-model="list.swimlanes"
                                      name="swimlanes"
                                      ng-list="&#10;"
                                      ng-trim="false"
                                      rows="6"
                                      class="form-control"
                                      required></textarea>
                            <p class="wt-fieldInfo" ng-show="list.form.swimlanes.$error.required">
                                {{'At least one swimlane is required' | translate}}
                            </p>
                        </div>
                        <!-- New list term set -->
                        <div class="form-group">
                            <label class="control-label">{{'Term set for tags' | translate}}</label>
                            <select ng-model="list.termSetId"
                                    name="termSetId"
                                    ng-options="termSet.termSetId as termSet.termSetName for termSet in termSets"
                                    class="form-control"
                                    required></select>
                            <p class="wt-fieldInfo" ng-if="list.form.termSetId.$error.required">
                                {{'A term set is required for tags' | translate}}
                            </p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>{{'Social comments template' | translate}}</label>
                        <wizdom365-template-picker template-url="settings.socialCommentsTemplate" directory-path="Wizdom365/Templates/ViewTemplates/Social/CommentsPanel" ></wizdom365-template-picker>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" ng-model="settings.allowRepliesToComments">{{'Allow replies to comments' | translate}}
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<div class="modal-footer">    
    <button class="btn btn-success wiz-btn-padding" ng-click="updateConfig();" ng-disabled="!validSettings()">{{'Save' | translate}}</button>
    <button class="btn btn-default wiz-btn-padding" ng-disabled="loading" ng-click="cancel();">{{"Cancel" | translate}}</button>
</div>