{{!
    This file is part of Moodle - http://moodle.org/

    Moodle is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    Moodle is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
}}
{{!
    @template mod_bigbluebuttonbn/room_view

    This template renders the mobile page.

    Example context (json):
    {
       "bigbluebuttonbnid": 1,
       "groupid": 0,
       "statusclosed": true,
       "statusclosed": false,
       "openingtime": 123456789,
       "closingtime": 987654321
    }
}}

<div id="bigbluebuttonbn-room-view" class="box py-3 generalbox boxaligncenter d-flex flex-column flex-md-row" data-bbb-id="{{bigbluebuttonbnid}}"
     data-group-id="{{groupid}}">
    <div id="bigbluebuttonbn-information">
        <div id="bigbluebuttonbn-status-bar" class="text-wrap">
            {{#statusrunning}}
                <div>
                    <span class="font-weight-bold">{{#str}}view_message_session_started_at, mod_bigbluebuttonbn{{/str}}:</span>
                    <span>{{#userdate}} {{startedat}}, {{#str}} strftimetime, core_langconfig{{/str}} {{/userdate}}.</span>
                    <span class="status-message">{{statusmessage}}</span>
                </div>
            {{/statusrunning}}
            {{^statusrunning}}
                <div class="status-message">{{statusmessage}}</div>
            {{/statusrunning}}
            <div class="conf-opening-time">
                {{#openingtime}}
                    <span class="conf-opening">
                        <span class="font-weight-bold">{{#str}}mod_form_field_openingtime, bigbluebuttonbn{{/str}}:</span>
                        {{#userdate}} {{.}}, {{#str}} strftimedaydatetime, langconfig {{/str}} {{/userdate}}
                  </span>
                {{/openingtime}}
                {{#closingtime}}
                    <div class="conf-closing">
                        <span class="font-weight-bold">{{#str}}mod_form_field_closingtime, bigbluebuttonbn{{/str}}:</span>
                        {{#userdate}} {{.}}, {{#str}} strftimedaydatetime, langconfig {{/str}} {{/userdate}}
                    </div>
                {{/closingtime}}
            </div>
            {{#statusrunning}}
                <div>
                        <span class="font-weight-bold">
                            {{#moderatorplural}}{{#str}}view_message_moderators, mod_bigbluebuttonbn{{/str}}{{/moderatorplural}}
                            {{^moderatorplural}}{{#str}}view_message_moderator, mod_bigbluebuttonbn{{/str}}{{/moderatorplural}}:
                        </span>
                    <span>{{moderatorcount}}</span>
                </div>
                <div>
                        <span class="font-weight-bold">
                        {{#viewerplural}}{{#str}}view_message_viewers, mod_bigbluebuttonbn{{/str}}{{/viewerplural}}
                            {{^viewerplural}}{{#str}}view_message_viewer, mod_bigbluebuttonbn{{/str}}{{/viewerplural}}:
                        </span>
                    <span>{{participantcount}}</span>
                </div>
            {{/statusrunning}}
        </div>

        <div id="bigbluebuttonbn-room-view-control-panel" data-bbb-id="{{bigbluebuttonbnid}}" class="mt-2">
            {{#haspresentations}}
                {{#showpresentations}}
                    <h5>{{#str}}view_section_title_presentation, mod_bigbluebuttonbn{{/str}}</h5>
                    <div class="list-group list-group-flush">
                        {{#presentations}}
                            <a href="{{url}}" target="_blank" class="list-group-item list-group-item-action">
                                {{#pix}}{{iconname}},core, {{icondesc}}{{/pix}}
                                {{name}}
                            </a>
                        {{/presentations}}
                    </div>
                {{/showpresentations}}
            {{/haspresentations}}
        </div>
    </div>
    <div id="bigbluebuttonbn-view-action-button-box" class="mt-0 ms-auto me-auto me-md-0">
        <div id="bigbluebuttonbn-room-view-action-buttons"
             class="d-flex flex-column-reverse flex-md-row">
            {{#ismoderator}}
                {{#guestaccessenabled}}
                    {{> mod_bigbluebuttonbn/guest_links}}
                {{/guestaccessenabled}}
                {{> mod_bigbluebuttonbn/end_session_button}}
            {{/ismoderator}}

            {{#canjoin}}
                <a {{!
                    }} href="{{{joinurl}}}"{{!
                    }} class="btn btn-primary bbb-btn-action m-1"{{!
                    }} data-action="join"{{!
                    }} target="_blank"{{!
                }}>
                    {{#str}}view_conference_action_join, mod_bigbluebuttonbn{{/str}}
                </a>
            {{/canjoin}}
        </div>
    </div>
</div>