<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>