<li class="occupant" id="{{{ o.id }}}"
    {[ if (o.role === "moderator") { ]}
       title="{{{ o.jid }}} {{{ o.__('This user is a moderator.') }}} {{{ o.hint_occupant }}}"
    {[ } ]}
    {[ if (o.role === "participant") { ]}
       title="{{{ o.jid }}} {{{ o.__('This user can send messages in this groupchat.') }}} {{{ o.hint_occupant }}}"
    {[ } ]}
    {[ if (o.role === "visitor") { ]}
       title="{{{ o.jid }}} {{{ o.__('This user can NOT send messages in this groupchat.') }}} {{{ o.hint_occupant }}}"
    {[ } ]}
    {[ if (!["visitor", "participant", "moderator"].includes(o.role)) { ]}
       title="{{{ o.jid }}} {{{ o.hint_occupant }}}"
    {[ } ]}>
    <div class="row no-gutters">
        <div class="col-auto">
            <div class="occupant-status occupant-{{{o.show}}} circle" title="{{{o.hint_show}}}"></div>
        </div>
        <div class="col occupant-nick-badge">
            <span class="occupant-nick">{{{o.nick || o.jid}}}</span>
            <span class="occupant-badges">
                {[ if (o.affiliation === "owner") { ]}
                    <span class="badge badge-groupchat">{{{o.__('Owner')}}}</span>
                {[ } ]}
                {[ if (o.affiliation === "admin") { ]}
                    <span class="badge badge-info">{{{o.__('Admin')}}}</span>
                {[ } ]}
                {[ if (o.affiliation === "member") { ]}
                    <span class="badge badge-info">{{{o.__('Member')}}}</span>
                {[ } ]}

                {[ if (o.role === "moderator") { ]}
                    <span class="badge badge-info">{{{o.__('Moderator')}}}</span>
                {[ } ]}
                {[ if (o.role === "visitor") { ]}
                    <span class="badge badge-secondary">{{{o.__('Visitor')}}}</span>
                {[ } ]}
            </span>
        </div>
    </div>
</li>
