{{!
  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_googlemeet/mobile_view_page

  This template renders the mobile page.

  Example context (json):
  {
    "intro": "foo",
    "url": "https://meet.google.com/vwe-vwee-vwe",
    "cmid": 3,
    "upcomingevent": {
      "hasupcomingevents": 1,
      "upcomingevents": [
        {
          "today": false,
          "startdate": "Tue. 17 Nov."
        }
      ],
      "starttime": "09:00",
      "endtime": "10:00",
      "duration": 3600
    },
    "recording": {
      "hasrecordings": 1,
      "recordings": [
        {
          "id": 1,
          "googlemeetid": 2,
          "name": "vwe-vwee-vwe (2020-11-11 at 16:11 GMT-8)",
          "createdtime": 1605140304,
          "duration": "1:00",
          "webviewlink": "https://drive.google.com/file/d/19jNAy_US0zzxxc8OPRWPp74i1msdff/view?usp=drivesdk",
          "visible": 1,
          "createdtimeformatted": "Sunday, 23 April 2023, 1:47 PM"
        }
      ]
    }
  }
}}
{{=<% %>=}}
<div>
  <core-course-module-description description="<% intro %>" component="mod_googlemeet" componentId="<% cmid %>"></core-course-module-description>
  <ion-list>
    <ion-item lines="full">
      <ion-label>
        <button ion-button block id="googlemeet-mobile-join" class="ion-margin" onclick="window.open('<% url %>', '_system');">
          {{ 'plugin.mod_googlemeet.entertheroom' | translate }}
        </button>
      </ion-label>
    </ion-item>
  </ion-list>

  <%#upcomingevent.hasupcomingevents%>
    <ion-list>
      <ion-list-header style="margin-bottom: 0;" (click)="this.showUpcomingEvents = !this.showUpcomingEvents" >
        <ion-label style="font-size: 22px; font-weight: 700; letter-spacing: 0px;">
          {{ 'plugin.mod_googlemeet.upcomingevents' | translate }}
          <ion-icon *ngIf="showUpcomingEvents" name="arrow-up" item-end style="top: 0.2em;"></ion-icon>
          <ion-icon *ngIf="!showUpcomingEvents" name="arrow-down" item-end style="top: 0.2em;"></ion-icon>
        </ion-label>
      </ion-list-header>
      <div *ngIf="showUpcomingEvents">
        <%#upcomingevent.upcomingevents%>
          <ion-item lines="full">
            <%#today%>
              <ion-icon name="calendar" item-start></ion-icon>
              <ion-label class="ion-margin-start">
                {{ 'plugin.mod_googlemeet.today' | translate }},
                <%startdate%>
              </ion-label>
            <%/today%>
            <%^today%>
              <ion-icon name="calendar" item-start></ion-icon>
              <ion-label class="ion-margin-start">
                <%startdate%>
              </ion-label>
            <%/today%>
          </ion-item>
        <%/upcomingevent.upcomingevents%>

        <%#upcomingevent.duration%>
          <ion-item lines="full">
            <ion-icon name="time" item-start></ion-icon>
            <ion-label class="ion-margin-start">
              {{ 'plugin.mod_googlemeet.from' | translate }}
              <%upcomingevent.starttime%>
              {{ 'plugin.mod_googlemeet.to' | translate }}
              <%upcomingevent.endtime%>
            </ion-label>
          </ion-item>
        <%/upcomingevent.duration%>
        <%^upcomingevent.duration%>
          <ion-item lines="full">
            <ion-icon name="time" item-start></ion-icon>
            <ion-label class="ion-margin-start">
              <%upcomingevent.starttime%>
            </ion-label>
          </ion-item>
        <%/upcomingevent.duration%>
      </div>
    </ion-list>
  <%/upcomingevent.hasupcomingevents%>

  <%#recording.hasrecordings%>
    <ion-list>
      <ion-list-header style="margin-bottom: 0;">
        <ion-label style="font-size: 22px; font-weight: 700; letter-spacing: 0px;">
          {{ 'plugin.mod_googlemeet.recordings' | translate }}
        </ion-label>
      </ion-list-header>
      <%#recording.recordings%>
        <ion-item lines="full">
          <ion-label>
            <p><%name%></p>
            <p><%createdtimeformatted%></p>
            <button ion-button onclick="window.open('<% webviewlink %>', '_system');">
              <ion-icon item-start name="play"></ion-icon>
              <%duration%>
            </button>
          </ion-label>
        </ion-item>
      <%/recording.recordings%>
    </ion-list>
  <%/recording.hasrecordings%>
</div>