<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="tabbable hawtio-form-tabs" ng-model="tab" ng-hide="missingContainer">

    <div class="tab-pane" title="Mappings">

      <div class="row-fluid">
        <div class="span12 centered spacer">
          <select class="no-bottom-margin" ng-model="selectedMapping" ng-options="m.map_id for m in mappings"></select>
          <button class="btn"
                  ng-click="addMapping()"
                  title="Add mapping">
            <i class="icon-plus"></i>
          </button>
          <button class="btn"
                  ng-click="deleteDialog = true"
                  title="Delete mapping">
            <i class="icon-minus"></i>
          </button>
          &nbsp;
          &nbsp;
          <label class="inline-block" for="map_id">Map ID: </label>
          <input id="map_id" type="text" class="input-xxlarge no-bottom-margin" ng-model="selectedMapping.map_id">
        </div>
      </div>

      <div class="row-fluid">
        <!-- "From" class header -->
        <div class="span5">
          <div class="row-fluid">
            <input type="text" class="span12"
                   ng-model="aName"
                   typeahead="title for title in classNames($viewValue) | filter:$viewValue"
                   typeahead-editable="true" title="Java classname for class 'A'"
                   placeholder="Java classname for class 'A'">
          </div>
          <div class="row-fluid" ng-show="selectedMapping.class_a.error">
            <div class="alert alert-error">
              <div class="expandable closed">
                <div class="title">
                  <i class="expandable-indicator"></i> Failed to load properties for {{selectedMapping.class_a.value}} due to {{selectedMapping.class_a.error.type}}
                </div>
                <div class="expandable-body well">
                  <div ng-bind-html-unsafe="formatStackTrace(selectedMapping.class_a.error.stackTrace)"></div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="span2 centered">
          <button class="btn" ng-click="doReload()" ng-disabled="disableReload()"><i class="icon-refresh"></i> Reload</button>
        </div>

        <!-- "To" class header -->
        <div class="span5">
          <div class="row-fluid">
            <input type="text" class="span12"
                   ng-model="bName"
                   typeahead="title for title in classNames($viewValue) | filter:$viewValue"
                   typeahead-editable="true" title="Java classname for class 'B'"
                   placeholder="Java classname for class 'B'">
          </div>
          <div class="row-fluid" ng-show="selectedMapping.class_b.error">
            <div class="alert alert-error">
              <div class="expandable closed">
                <div class="title">
                  <i class="expandable-indicator"></i> Failed to load properties for {{selectedMapping.class_b.value}} due to {{selectedMapping.class_b.error.type}}
                </div>
                <div class="expandable-body well">
                  <div ng-bind-html-unsafe="formatStackTrace(selectedMapping.class_b.error.stackTrace)"></div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>

      <script type="text/ng-template" id="property.html">
        <span class="jsplumb-node dozer-mapping-node"
              id="{{field.id}}"
              anchors="{{field.anchor}}"
              field-path="{{field.path}}">
          <strong>{{field.displayName}}</strong> : <span class="typeName">{{field.typeName}}</span>
        </span>
        <ul>
          <li ng-repeat="field in field.properties"
              ng-include="'property.html'"></li>
        </ul>
      </script>


      <script type="text/ng-template" id="pageTemplate.html">
        <div hawtio-jsplumb draggable="false" layout="false" timeout="500">

          <!-- "from" class -->
          <div class="span6">
            <div class="row-fluid" ng-hide="selectedMapping.class_a.error">
              <ul class="dozer-mappings from">
                <li ng-repeat="field in selectedMapping.class_a.properties"
                    ng-include="'property.html'"></li>
              </ul>
            </div>
          </div>


          <!-- "to" class -->
          <div class="span6">
            <div class="row-fluid" ng-hide="selectedMapping.class_b.error">
              <ul class="dozer-mappings to">
                <li ng-repeat="field in selectedMapping.class_b.properties"
                    ng-include="'property.html'"></li>
              </ul>
            </div>
          </div>
        </div>
      </script>
      <div class="row-fluid" compile="main"></div>

    </div>

    <div class="tab-pane" title="Tree">

      <div class="row-fluid">
        <div class="span12">
          <ul class="nav nav-pills">
            <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>

  </div>

  <div class="hero-unit" ng-show="missingContainer">
    <p>You cannot edit the dozer mapping file as there is no container running for the profile <b>{{profileId}}</b>.</p>

    <p>
      <a class="btn btn-primary btn-large"
         href="#/fabric/containers/createContainer?profileIds={{profileId}}&versionId={{versionId}}">
        Create a container for: <strong>{{profileId}}</strong>
      </a>
    </p>
  </div>
</div>
