2020-01-26 18:36:25 +01:00
|
|
|
import tpl_occupant from "./occupant.js";
|
2022-12-13 09:54:13 +01:00
|
|
|
import { __ } from 'i18n';
|
|
|
|
import { html } from "lit";
|
|
|
|
import { repeat } from 'lit/directives/repeat.js';
|
2020-01-26 18:36:25 +01:00
|
|
|
|
2020-01-28 19:25:21 +01:00
|
|
|
|
2020-08-16 23:33:17 +02:00
|
|
|
export default (o) => {
|
2022-04-20 09:59:57 +02:00
|
|
|
const i18n_participants = o.occupants.length === 1 ? __('Participant') : __('Participants');
|
2020-08-16 23:33:17 +02:00
|
|
|
return html`
|
|
|
|
<div class="occupants-header">
|
|
|
|
<div class="occupants-header--title">
|
2022-04-20 09:59:57 +02:00
|
|
|
<span class="occupants-heading">${o.occupants.length} ${i18n_participants}</span>
|
2022-02-10 12:09:02 +01:00
|
|
|
<i class="hide-occupants" @click=${o.closeSidebar}>
|
|
|
|
<converse-icon class="fa fa-times" size="1em"></converse-icon>
|
|
|
|
</i>
|
2020-08-16 23:33:17 +02:00
|
|
|
</div>
|
2020-01-27 13:20:23 +01:00
|
|
|
</div>
|
2020-08-16 23:33:17 +02:00
|
|
|
<div class="dragresize dragresize-occupants-left"></div>
|
2022-12-13 09:54:13 +01:00
|
|
|
<ul class="occupant-list">${ repeat(o.occupants, (occ) => occ.get('jid'), (occ) => tpl_occupant(occ, o)) }</ul>
|
2020-08-16 23:33:17 +02:00
|
|
|
`;
|
|
|
|
}
|