<div class="modal fade boardModal" tabindex="-1" role="dialog" aria-labelledby="boardLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" data-ng-controller="BoardFormSettingsCtrl">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true" class="fa fa-times"></span>
                    <span class="sr-only">Close</span>
                </button>
                <h3 class="modal-title" id="boardLabel" data-ng-if="boardFormData.isAdd">Add Board</h3>
                <h3 class="modal-title" id="boardLabel" data-ng-if="!boardFormData.isAdd">Edit Board</h3>
            </div>
            <div class="modal-body">
                <div class="form-group" data-ng-class="{ 'has-error': boardFormData.nameError }">
                    <h5>Board Name</h5>
                    <input class="form-control" type="text" placeholder="Board Name"
                           data-ng-model="boardFormData.name" data-ng-disabled="boardFormData.isSaving">
                </div>
                <div class="form-group half-width" data-ng-class="{ 'has-error': boardFormData.lanesError }">
                    <form role="form" class="form form-inline" data-ng-submit="boardFormData.addLane()">
                        <h5>Lanes</h5>
                        <ul class="list-group lanes">
                            <li class="list-group-item small" data-ng-class="{ disabled: boardFormData.isSaving }"
                                data-ng-repeat="lane in boardFormData.lanes | orderBy:'position':false">
                                <span class="fa fa-arrows-v"></span>
                                <span class="hidden" data-ng-if="!boardFormData.isAdd">{{ lane.id }}</span>
                                <span class="item-text">{{ lane.name }}</span>
                                <span class="links">
                                    <a class="fa fa-trash-o pull-right" title="Remove"
                                       data-ng-click="boardFormData.removeLane(lane)"></a>
                                    <span data-click-to-edit="lane.name"
                                          data-ng-disabled="boardFormData.isSaving"></span>
                                </span>
                            </li>
                        </ul>
                        <input class="form-control" style="width: 85%;" type="text" placeholder="Lane Name"
                               data-ng-model="boardFormData.laneName" data-ng-disabled="boardFormData.isSaving">
                        <button type="submit" id="modalAddLane" class="btn btn-default fa fa-plus"
                                data-ng-disabled="boardFormData.isSaving"></button>
                    </form>
                </div>
                <div class="form-group half-width" data-ng-class="{ 'has-error': boardFormData.categoriesError }">
                    <form role="form" class="form form-inline" data-ng-submit="boardFormData.addCategory()">
                        <h5>Categories</h5>
                        <ul class="list-group">
                            <li class="list-group-item small" data-ng-class="{ disabled: boardFormData.isSaving }"
                                data-ng-repeat="category in boardFormData.categories | orderBy:'category':false">
                                <span class="item-text">{{ category.name }}</span>
                                <span class="links">
                                    <a class="fa fa-trash-o pull-right" title="Remove"
                                       data-ng-click="boardFormData.removeCategory(category)"></a>
                                    <span data-click-to-edit="category.name"
                                          data-ng-disabled="boardFormData.isSaving"></span>
                                </span>
                            </li>
                        </ul>
                        <input class="form-control" style="width: 85%;" type="text" placeholder="Category Name"
                               data-ng-model="boardFormData.categoryName" data-ng-disabled="boardFormData.isSaving">
                        <button type="submit" id="modalAddCategory" class="btn btn-default fa fa-plus"
                                data-ng-disabled="boardFormData.isSaving"></button>
                    </form>
                </div>
                <div class="clearfix"></div>
                <div class="form-group" style="margin-top: -1em;">
                    <h5>Select Users</h5>
                    <div class="half-width" data-ng-repeat="user in users">
                        <label style="font-weight: normal; width: 100%;">
                            <input type="checkbox" data-ng-model="boardFormData.users[user.id]"
                                   data-ng-disabled="boardFormData.isSaving">
                            {{ user.username }}
                        </label>
                    </div>
                    <div class="clearfix"></div>
                    <p  style="margin-top: -1em;" class="small clearfix">
                        <em>Administrators have access to all projects, whether or not they are selected here.</em>
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="submit" id="modalAddBoard" class="btn btn-info" data-ng-click="addBoard(boardFormData)"
                            data-ng-if="boardFormData.isAdd" data-ng-disabled="boardFormData.isSaving">Add Board</button>
                    <button type="submit" id="modalEditBoard" class="btn btn-info" data-ng-click="editBoard(boardFormData)"
                            data-ng-if="!boardFormData.isAdd" data-ng-disabled="boardFormData.isSaving">Edit Board</button>
                    <a class="btn btn-default" data-ng-click="boardFormData.cancel()"
                       data-ng-disabled="boardFormData.isSaving">Cancel</a>
                </div>
            </div>
        </div>
    </div>
</div>
