<div>
  <div class="bpmn-model thumbnail" data-ng-show="diagram" data-ng-class="diagramClass(diagram)">
    <h3>
      {{diagram.modeler}} 
    </h3>
    <div class="holder">
      <div class="diagram" ng-show="modelStatus != 'UNAVAILABLE'">
        <diagram-image data-diagram="diagram" data-status="imageStatus" data-click="showImage(identifier)"/>
      </div>
      <div class="diagram error" ng-show="modelStatus == 'UNAVAILABLE'">
        <div class="centered">
          <p class="note">
            <i class="icon-warning-sign"></i>
            <span th:text="#{'The model on this side could not be loaded and might have been moved. You may add a new model for this side.'}"></span>
          </p>
          <a class="btn btn-primary btn-large" 
               data-ng-click="addDiagram()">
            <!-- need nested span to make ng-click and 
                 data-help work together (angular BUG) -->
            <span data-color-invert="true" 
                  data-help-title="Find process model" 
                  data-help data-help-text="You need two process models for a Roundtrip, the right side is reserved for the camunda modeler (the engine model)">
              Find process model
            </span>
          </a>
        </div>
      </div>
    </div>
    
    <div class="info">
      <span class="filename" ng-hide="imageStatus != 'LOADED' && imageStatus != 'RENDERED' && modelStatus != 'UNAVAILABLE'">{{diagram.label}}</span>
      <div class="pull-right" ng-switch on="modelStatus">
        <div ng-switch-when="UNAVAILABLE" class="status label label-important">
          <span th:text="#{'Not available'}">Not available</span>
        </div>
        <div ng-switch-when="UNSPECIFIED" class="status label">
          <span th:text="#{'Not yet synchronized'}">Not yet synchronized</span>
        </div>
        <div ng-switch-when="SYNCED" class="status label label-success">
          <span th:text="#{'In sync'}">In sync</span>
        </div>
        <div ng-switch-when="OUT_OF_SYNC" class="status label label-important">
          <span th:text="#{'Changed since last sync'}">Changed since last sync</span>
        </div>
      </div>
    </div>
  </div>

  <div class="bpmn-model thumbnail" data-ng-hide="diagram">
    <h3 data-ng-show="identifier == 'leftHandSide'" th:text="#{'Your modeler'}">Your modeler</h3>
    <h3 data-ng-show="identifier == 'rightHandSide'">camunda modeler</h3>
    <div class="holder">
      <div class="diagram">
        <div class="centered">
          <a class="btn btn-primary btn-large" 
             data-ng-show="!diagram || !contentAvailable" 
             data-ng-click="addDiagram()">
            <!-- need nested span to make ng-click and 
                 data-help work together (angular BUG) -->
            <span data-help-placement="'left'"
                  data-color-invert="true" 
                  data-help-title="Add a process model"                  
                  data-help data-help-text="You need two process models for a Roundtrip, the right side is reserved for the camunda modeler (the engine model)" >
              Add Process Model
            </span>   
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- begin add-model-roundtrip-dialog -->
  <modal-dialog model="editDiagramDialog" ng-cloak>
    <div class="modal" ng-controller="EditDiagramController" ngm-if="editDiagramDialog.renderHtml()">
      <div class="modal-header">
        <h3 data-ng-show="editDialogMode == 'ADD_DIAGRAM'" th:text="#{Add Process Model}"></h3>
        <h3 data-ng-show="editDialogMode == 'CREATE_NEW_DIAGRAM'" th:text="#{Create Process Model}"></h3>
      </div>
      <div class="modal-body edit-diagram-modal">
        <div data-error-panel></div>
        <form class="form-horizontal" novalidate ng-submit="save()" name="addModelForm">
          <fieldset>
            <div class="control-group">
              <label class="control-label" for="modelerName" 
                     th:text="#{'Modeler Name'}" 
                     th:attr="data-help-text=#{'The name of your modeling tool. Examples: &quot;camunda modeler&quot; or &quot;Signavio&quot; or &quot;Adonis&quot;.'}" 
                     data-help-title="Modeler Name"
                     data-help>Modeler Name</label>
              <div class="controls">
                <!-- display a combobox on leftside, otherwise a disabled input field -->
                <input id="modelerName" required autofocus 
                        ngm-if="canEditModeler()" 
                        ng-model="editDiagram.modeler"                    
                        th:attr="data-placeholder=#{Enter the name of your modeler}"
                        type="text" />            
                <span ngm-if="!canEditModeler()" id="modelerName" name="modelerName" required class="uneditable-input" type="text">{{editDiagram.modeler}}</span>
              </div>
            </div>
            <div class="control-group">
              <label class="control-label" for="connectors" 
                     th:text="#{Connector}" 
                     th:attr="data-help-text=#{'The connector to get the model from'}" 
                     data-help-title="Connector"
                     data-help>Connector</label>
              <div class="controls">
                <span data-ng-show="!connectors.length" style="line-height: 30px">
                  <span>No connectors configured</span> <span data-if-admin>(<a th:href="@{/app/secured/view/connectors}" th:text="#{'configure'}">configure</a>)</span>.
                </span>
                <span data-ng-show="connectors.length">
                  <select class="span8" ng-model="connector" required data-ng-options="c.name for c in connectors">
                  </select>
                </span>
              </div>
            </div>

            <div class="control-group" ng-show="connector">
              <div data-ng-switch on="editDialogMode">
                <div data-ng-switch-when="CREATE_NEW_DIAGRAM">
                  <label class="control-label" for="bpmnFileName"
                         th:text="#{'BPMN Model Name'}" 
                         th:attr="data-help-text=#{'The name for the BPMN 2.0 file.'}" 
                         data-help-title="BPMN File Name"
                         data-help>BPMN File Name</label>
                  <div class="controls" style="margin-bottom: 10px;" >
                    <input ng-model="editDiagram.label" id="bpmnFileName" name="name" type="text" class="input-xlarge" required />
                  </div>
                </div>

                <div data-ng-switch-when="ADD_DIAGRAM">
                  <label class="control-label" for="tree"
                         th:text="#{'BPMN File'}" 
                         th:attr="data-help-text=#{'Select a BPMN 2.0 file from the connector contents. Note that only <code>.xml</code> and <code>.bpmn</code> files may be selected by you.'}" 
                         data-help-title="BPMN File"
                         data-help>BPMN File</label>
                  <div class="controls" style="margin-bottom: 10px;" >
                    <input data-ng-model="selectedNode.label" class="span8" disabled />
                  </div>
                </div>
              </div>
              
              <div class="controls">
                <div class="claro tree" data-cycle-tree data-selected="selectedNode" data-id="connectorTree" data-connector="connector" data-filter="acceptedChildTypes()">
                </div>
              </div>
              
              <div class="control-group" data-ng-show="showCommitMessageInput()">
                  <label class="control-label" for="commitMessageCreate" 
                         th:text="#{'Commit Message'}" 
                         th:attr="data-help-text=#{'The message to be used as commit message.'}" 
                         data-help-title="Commit Message"
                         data-help>Commit Message</label>
                  <div class="controls">
                    <!-- display a combobox on leftside, otherwise a disabled input field -->
                    <textarea id="commitMessageCreate" rows="3" ng-model="commitMessage" />                      
                  </div>
                </div>
              
            </div>
          </fieldset>
        </form>
      </div>
      <div class="modal-footer">
        <button class="btn" ng-click="cancel()" th:text="#{Cancel}">Cancel</button>
        <button href="#" data-ng-show="editDialogMode == 'ADD_DIAGRAM'" class="btn btn-primary" data-ng-click="save()" data-ng-disabled="!isValid()" th:text="#{Add}" data-req-aware="addModelForm">Add</button>
        <button href="#" data-ng-show="editDialogMode == 'CREATE_NEW_DIAGRAM'" class="btn btn-primary" data-ng-click="create()" data-ng-disabled="!isValidAndFolder()" th:text="#{Create}" data-req-aware="addModelForm">Create</button>
      </div>
    </div>
  </modal-dialog>
  <!-- end add-model-roundtrip-dialog -->
</div>