<div class="encounters {?isExpanded}is-expanded{/isExpanded}">
{?showTooltip}
<div class="tooltip">
<span>{#_t}{encounters_tooltip}{/_t}</span>
<div class="icon">
{@Icon name="icon-encounters" size="stretch" /}
</div>
</div>
{/showTooltip}
<div class="images">
{#images}
<img src="{src}">
<input type="radio" id="{id}" {?selected}checked{/selected} />
<label for="showme-{id}">
{name}
</label>
{/images}
</div>
<div class="footer">
{! encounters-footer template will be injected here !}
</div>
</div>
<div className="encounters {props.isExpanded ? 'is-expanded' : ''}">
{props.showTooltip ?
<div className="tooltip">
<span>{i18n.get('encounters_tooltip')}</span>
<div className="icon">
<Icon name="icon-encounters" size="stretch" />
</div>
</div>
: null}
<div className="images">
{props.images.map(item =>
<img src={item.src}>
<input type="radio" id={`showme-${item.id}`} defaultChecked={item.selected ? true : undefined} />
<label htmlFor={`showme-${item.id}`}>
{item.name}
</label>
)}
</div>
<div className="footer">
{/* encounters-footer template will be injected here */}
</div>
</div>