{{!
    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/>.

    Edwiser RemUI
    @package theme_remui
    @copyright (c) 2023 WisdmLabs (https://wisdmlabs.com/)
    @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
}}
{{!
    @template calendar/month_detailed

    Calendar month view.

    The purpose of this template is to render the month view.

    Classes required for JS:
    * none

    Data attributes required for JS:
    * none

    Example context (json):
    {
    }
}}
<div{{!
    }} class="calendarwrapper"{{!
    }}{{#courseid}} data-courseid="{{courseid}}"{{/courseid}}{{!
    }}{{#categoryid}} data-categoryid="{{categoryid}}"{{/categoryid}}{{!
    }} data-context-id="{{defaulteventcontext}}"{{!
    }} data-month="{{date.mon}}"{{!
    }} data-year="{{date.year}}"{{!
    }} data-view="{{view}}"{{!
    }}>
    {{> core_calendar/month_navigation }}
    {{> core/overlay_loading}}
    <div class="table-wrapper">
        <table id="month-detailed-{{uniqid}}-{{calendarinstanceid}}" class="calendarmonth calendartable mb-0">
            <thead>
                <tr>
                    {{# daynames }}
                    <th class="header text-xs-center">
                        <span class="sr-only">{{fullname}}</span>
                        <span aria-hidden="true" class="h-semibold-5">{{shortname}}</span>
                    </th>
                    {{/ daynames }}
                </tr>
            </thead>
            <tbody>
        {{#weeks}}
                <tr data-region="month-view-week">
                    {{#prepadding}}
                        <td class="dayblank">&nbsp;</td>
                    {{/prepadding}}
                    {{#days}}
                        <td class="day text-sm-center text-md-left{{!
                                }}{{#istoday}} today{{/istoday}}{{!
                                }}{{#isweekend}} weekend{{/isweekend}}{{!
                                }}{{#durationevents.0}} duration{{/durationevents.0}}{{!
                                }}{{#durationevents}} duration_{{.}}{{/durationevents}}{{!
                                }}{{#defaulteventcontext}} clickable{{/defaulteventcontext}}{{!
                                }}{{#hasevents}} hasevent{{/hasevents}}{{!
                            }}"
                            data-day="{{mday}}"
                            data-day-timestamp="{{timestamp}}"
                            data-drop-zone="month-view-day"
                            data-region="day"
                            data-new-event-timestamp="{{neweventtimestamp}}"{{#istoday}} title="{{#str}} today, core_calendar {{/str}}"{{/istoday}}
                            {{#hasevents}} data-title="{{viewdaylinktitle}}"{{/hasevents}}>
                            <div class="d-none d-md-flex flex-column justify-content-between hidden-phone text-xs-center">
                                <span class="sr-only">{{daytitle}}</span>
                                {{#hasevents}}
                                    <a data-action="view-day-link" href="#" class="aalink day" aria-label="{{viewdaylinktitle}}"
                                        data-year="{{date.year}}" data-month="{{date.mon}}" data-day="{{mday}}"
                                        data-courseid="{{courseid}}" data-categoryid="{{categoryid}}"
                                        data-timestamp="{{timestamp}}">
                                        <span class="day-number-circle">
                                            <span class="day-number">{{mday}}</span>
                                        </span></a>
                                {{/hasevents}}
                                {{^hasevents}}
                                    <span aria-hidden="true"><span class="day-number-circle"><span class="day-number">{{mday}}</span></span></span>
                                {{/hasevents}}
                                {{#hasevents}}
                                    <div data-region="day-content">
                                        <ul class="d-flex flex-gap-d5">
                                            {{#events}}
                                            {{#underway}}
                                                <li class="events-underway">[{{{name}}}]</li>
                                            {{/underway}}
                                            {{^underway}}
                                                <li data-region="event-item"
                                                    data-event-component="{{component}}"
                                                    data-event-eventtype="{{eventtype}}"
                                                    data-event-folded="false"
                                                    data-eventtype-{{normalisedeventtype}}="1"
                                                    {{#draggable}}
                                                        draggable="true"
                                                        data-drag-type="move"
                                                        {{#mindaytimestamp}}
                                                            data-min-day-timestamp="{{.}}"
                                                        {{/mindaytimestamp}}
                                                        {{#mindayerror}}
                                                            data-min-day-error="{{.}}"
                                                        {{/mindayerror}}
                                                        {{#maxdaytimestamp}}
                                                            data-max-day-timestamp="{{.}}"
                                                        {{/maxdaytimestamp}}
                                                        {{#maxdayerror}}
                                                            data-max-day-error="{{.}}"
                                                        {{/maxdayerror}}
                                                    {{/draggable}}>

                                                    <a data-action="view-event" data-event-id="{{id}}" href="{{url}}" title="{{name}}">
                                                        <span class="calendar-circle calendar_event_{{normalisedeventtype}} edw-icon edw-icon-calendar_event_{{normalisedeventtype}} ">
                                                        </span>
                                                        <span class="eventname mr-1">{{{name}}}</span>
                                                    </a>
                                                </li>
                                            {{/underway}}
                                            {{/events}}
                                            <li data-action="view-more-events" style="display: none">
                                                <strong>
                                                    <a data-action="view-day-link" href="#" class="aalink day" aria-label="{{viewdaylinktitle}}"
                                                       data-year="{{date.year}}" data-month="{{date.mon}}" data-day="{{mday}}"
                                                       data-courseid="{{courseid}}" data-categoryid="{{categoryid}}"
                                                       data-timestamp="{{timestamp}}">
                                                       {{#str}} moreevents, calendar, {{hasmoreevents}} {{/str}}
                                                    </a>
                                                </strong>
                                            </li>
                                        </ul>
                                        <div class="hidden">
                                            {{#events}}
                                                <div data-popover-eventtype-{{normalisedeventtype}}="1">
                                                    {{> core_calendar/event_icon}}
                                                    {{{name}}}
                                                </div>
                                            {{/events}}
                                        </div>
                                    </div>
                                {{/hasevents}}
                            </div>
                            <div class="d-md-none hidden-desktop hidden-tablet">
                                <span class="sr-only">{{daytitle}}</span>
                                {{#hasevents}}
                                    <a data-action="view-day-link" href="#" class="day aalink" aria-label="{{viewdaylinktitle}}"
                                        data-year="{{date.year}}" data-month="{{date.mon}}" data-day="{{mday}}"
                                        data-courseid="{{courseid}}" data-categoryid="{{categoryid}}"
                                        data-timestamp="{{timestamp}}"><span class="day-number-circle"><span class="day-number">{{mday}}</span></span></a>
                                {{/hasevents}}
                                {{^hasevents}}
                                    <span aria-hidden="true"><span class="day-number-circle"><span class="day-number">{{mday}}</span></span></span>
                                {{/hasevents}}
                            </div>
                        </td>
                    {{/days}}
                    {{#postpadding}}
                        <td class="dayblank">&nbsp;</td>
                    {{/postpadding}}
                </tr>
        {{/weeks}}
            </tbody>
        </table>
    </div>
</div>
{{#js}}
require([
    'jquery',
    'core_calendar/month_view_drag_drop'
], function(
    $,
    DragDrop
) {
    var root = $('#month-detailed-{{uniqid}}-{{calendarinstanceid}}');
    DragDrop.init(root);
});
{{/js}}