<div class="wiki-fixed" ng-controller="Wiki.DozerMappingsController">
  <div class="logbar" ng-controller="Wiki.NavBarController">
    <div class="wiki logbar-container">
      <ul class="nav nav-tabs connected">
        <li ng-repeat="link in breadcrumbs" ng-class='{active : isActive(link.href)}'>
          <a ng-href="{{link.href}}{{hash}}">{{link.name}}</a>
        </li>

        <!--
                <li class="pull-right">
                  <a ng-href="{{editLink()}}{{hash}}" ng-hide="!editLink()" title="Edit this camel configuration"
                     data-placement="bottom">
                    <i class="icon-edit"></i> Edit</a></li>
                <li class="pull-right" ng-show="sourceLink()">
        -->
        <li class="pull-right">
          <a href="" id="saveButton" ng-disabled="!isValid()" ng-click="save()"
             ng-class="{'nav-primary' : modified}"
             title="Saves the Mappings document">
            <i class="icon-save"></i> Save</a>
        </li>
        <li class="pull-right">
          <a href="" id="cancelButton" ng-click="cancel()"
             title="Discards any updates">
            <i class="icon-remove"></i> Cancel</a>
        </li>

        <li class="pull-right">
          <a ng-href="{{sourceLink()}}" title="View source code"
             data-placement="bottom">
            <i class="icon-file-alt"></i> Source</a>
        </li>
      </ul>
    </div>
  </div>

  <div class="row-fluid">
    <div class="span12">
      <ul class="nav nav-tabs">
        <li>
          <a href='' title="Add a new mapping between two classes" ng-click="addMapping()" data-placement="bottom">
            <i class="icon-plus"></i> Class</a></li>
        <li>
          <a href='' title="Add new mappings between fields in these classes" ng-disable="!selectedMapping" ng-click="addField()" data-placement="bottom">
            <i class="icon-plus"></i> Field</a></li>
        <li>
          <a href='' title="Deletes the selected item" ng-disabled="!canDelete()" ng-click="deleteDialog = true" data-placement="bottom">
            <i class="icon-remove"></i> Delete</a></li>
      </ul>
    </div>
  </div>

  <div class="row-fluid">
    <div id="tree-container" class="span4">
      <div hawtio-tree="mappingTree" onselect="onNodeSelect" onDragEnter="onNodeDragEnter" onDrop="onNodeDrop"
           onRoot="onRootTreeNode"
           hideRoot="true"></div>
    </div>

    <div class="span8">
      <div ng-include="propertiesTemplate"></div>
    </div>
  </div>

  <div hawtio-confirm-dialog="deleteDialog"
       ok-button-text="Delete"
       on-ok="removeNode()">
    <div class="dialog-body">
      <p>You are about to delete the selected {{selectedDescription}}
      </p>
      <p>This operation cannot be undone so please be careful.</p>
    </div>
  </div>

  <div class="modal-large">
    <div modal="addDialog.show" close="addDialog.close()" ng-options="addDialog.options">
      <form class="form-horizontal no-bottom-margin" ng-submit="addAndCloseDialog()">
        <div class="modal-header"><h4>Add Fields</h4></div>
        <div class="modal-body">
          <table class="">
            <tr>
              <th>From</th>
              <th></th>
              <th>To</th>
              <th>Exclude</th>
            </tr>
            <tr ng-repeat="unmapped in unmappedFields">
              <td>
                {{unmapped.fromField}}
              </td>
              <td>-></td>
              <td>
                <input type="text" ng-model="unmapped.toField" ng-change="onUnmappedFieldChange(unmapped)"
                       typeahead="title for title in toFieldNames($viewValue) | filter:$viewValue" typeahead-editable='true'
                       title="The field to map to"/>
              </td>
              <td>
                <input type="checkbox" ng-model="unmapped.exclude" ng-click="onUnmappedFieldChange(unmapped)"
                       title="Whether or not the field should be excluded"/>
              </td>
            </tr>
          </table>
        </div>
        <div class="modal-footer">
          <input id="submit" class="btn btn-primary add" type="submit" ng-disabled="!unmappedFieldsHasValid"
                 value="Add">
          <button class="btn btn-warning cancel" type="button" ng-click="addDialog.close()">Cancel</button>
        </div>
      </form>
    </div>
  </div>
</div>
