<div id="mappingConfigHolder">

<div class="mapping-config-body">

<div class="mapping-body">

<span class="mapping-icon"><i class="fa fa-2x {{sourceIcon}}"></i></span>

<div class="mapping-source">

<p class="mapping-header">{{t "templates.mapping.source"}}</p>

<p class="mapping-title">{{mapping.source}}</p>

<p>{{sourceType}}</p>

</div>

<div class="mapping-arrow">

<div class="arrow-box">

<i class="fa fa-arrow-right"></i>

</div>

</div>

<span class="mapping-icon left-icon"><i class="fa fa-2x {{targetIcon}}"></i></span>

<div class="mapping-target">

<p class="mapping-header">{{t "templates.mapping.target"}}</p>

<p class="mapping-title">{{mapping.target}}</p>

<p>{{targetType}}</p>

</div>

</div>

<div class="mapping-bottom-bar">

<div class="inline" id="{{mapping.name}}_label">{{mapping.name}}</div>

<div class="float-right">

{{t "templates.mapping.syncStatus"}}: <span id="syncStatus" class="syncStatus"><a href="#">{{syncStatus}}</a></span>

<button id="syncNowButton" type="button" title="{{t "templates.mapping.syncNow"}}" class="button">

<span class="fa fa-clock-o"></span>

{{t "templates.mapping.syncNow"}}

</button>

<button id="stopSyncButton" type="button" title="{{t "templates.mapping.stopSync"}}" class="button" style="display:none;">

<span class="fa fa-clock-o"></span>

{{t "templates.mapping.stopSync"}}

</button>

</div>

</div>

</div>

</div>

<div style="text-align:center;">

<div class="reconProgressContainer" style="margin-top:10px;display:none;cursor: pointer;">

<div id="syncNowProgress"><div class="progress-label"></div></div>

</div>

<div id="stoppingSync" style="margin-top:10px;display:none;">

<h3>{{t "templates.mapping.stoppingSync"}} {{t "templates.mapping.pleaseStandBy"}}...</h3>

</div>

</div>

<div><pre id="syncStatusDetails" style="display:none;"></pre></div>

<div id="mappingContent"></div>