<div class="container">

<div class="mapping-body row clearfix">

<div class="col-md-5 column mapping-resource-body" id="mappingSource">

<div class="mapping-resource-empty text-center well">

<div class="mapping-resource-empty-details">

<i class="fa fa-question-circle text-muted"></i>

<div>{{t "templates.mapping.selectSourceResource"}}</div>

</div>

</div>

<div class="panel panel-default mapping-resource card" style="display:none;">

<div class="panel-heading">

<div class="media">

<button type="button" class="close select-resource" aria-label="Close">

<span aria-hidden="true">×</span>

</button>

<div class="media-left">

<div class="image circle">

<i class="resource-small-icon"></i>

</div>

</div>

<div class="media-body">

<h4 class="media-heading resource-given-name"></h4>

<span class="resource-type-name text-muted"></span>

</div>

</div>

</div>

<div class="panel-body">

<div class="object-type-name text-muted text-center">{{t "templates.mapping.noObjectType"}}</div>

<select style="display:none;" class="resource-object-type-select form-control"></select>

</div>

</div>

</div>

<div class="col-md-2 column mapping-swap-holder">

<button type="button" class="mapping-swap btn btn-default center-block"><i class="fa fa-lg fa-exchange"></i></button>

</div>

<div class="col-md-5 column mapping-resource-body" id="mappingTarget">

<div class="mapping-resource-empty text-center well">

<div class="mapping-resource-empty-details">

<i class="fa fa-question-circle text-muted"></i>

<div>{{t "templates.mapping.selectTargetResource"}}</div>

</div>

</div>

<div class="panel panel-default mapping-resource card" style="display:none;">

<div class="panel-heading">

<div class="media">

<button type="button" class="close select-resource" aria-label="Close">

<span aria-hidden="true">×</span>

</button>

<div class="media-left">

<div class="image circle">

<i class="resource-small-icon"></i>

</div>

</div>

<div class="media-body">

<h4 class="media-heading resource-given-name"></h4>

<span class="resource-type-name text-muted"></span>

</div>

</div>

</div>

<div class="panel-body">

<div class="object-type-name text-muted text-center">{{t "templates.mapping.noObjectType"}}</div>

<select style="display:none;" class="resource-object-type-select form-control"></select>

</div>

</div>

</div>

<div class="mapping-create-body col-md-12 text-center">

<button id="createMapping" disabled="true" type="button" class="add-mapping btn btn-primary">{{t "templates.mapping.createMapping"}}</button>

</div>

<div style="display:none;">

<div id="saveMappingDialog">

<p>{{t "templates.mapping.saveMappingMessage"}}</p>

<form class="form-horizontal" role="form">

<div class="form-group required">

<label class="col-sm-3 control-label">{{t "templates.mapping.mappingName"}}</label>

<div class="col-sm-8">

<input class="mappingName form-control" type="text" name="mappingName" value="" required autofocus>

</div>

</div>

<div class="form-group required">

<label class="col-sm-3 control-label">{{t "templates.mapping.linkedMapping"}}</label>

<div class="col-sm-8">

<select disabled="true" class="mappingLinked form-control" name="mappingLinked" >

<option value="none">{{t "templates.mapping.noLinkedMapping"}}</option>

</select>

</div>

</div>

</form>

</div>

</div>

</div>

</div>