public function template()
{
?>
<div class="carbon-relationship-container">
<div class="selected-items-container">
<strong>
<#
var selected_items_length = 0;
if ( value ) {
selected_items_length = value.length;
} #>
<span class="selected-counter">{{{ selected_items_length }}}</span>
<span class="selected-label" data-single-label="<?php
_e('selected item', 'carbon-fields');
?>
" data-plural-label="<?php
_e('selected items', 'carbon-fields');
?>
">
<?php
_e('selected items', 'carbon-fields');
?>
</span>
<?php
/* If set_max() has been set, show the allowed maximum items number */
?>
<# if ( max !== -1 ) { #>
<span class="remaining"><?php
_e('out of', 'carbon-fields');
?>
{{{ max }}}</span>
<# } #>
</strong>
</div>
<div class="search-field carbon-relationship-search dashicons-before dashicons-search">
<input type="text" class="search-field" placeholder="<?php
esc_attr_e('Search...', 'carbon-fields');
?>
" />
</div>
<div class="carbon-relationship-body">
<div class="carbon-relationship-left">
<ul class="carbon-relationship-list">
<# if (options) { #>
<# _.each(options, function(item) { #>
<?php
echo $this->item_template(false);
?>
<# }); #>
<# } #>
</ul>
</div>
<div class="carbon-relationship-right">
<label><?php
_e('Associated:', 'carbon-fields');
?>
</label>
<ul class="carbon-relationship-list">
<# if (value) { #>
<# _.each(value, function(item) { #>
<?php
echo $this->item_template();
?>
<# }); #>
<# } #>
</ul>
</div>
</div>
</div>
<?php
}