{{!
    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 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}}
    <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">{{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-block 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>
                                        {{#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}}">
                                                        &nbsp;
                                                    </span>
                                                    <span class="eventname">{{{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>
{{#js}}
require([
    'jquery',
    'core_calendar/month_view_drag_drop'
], function(
    $,
    DragDrop
) {
    var root = $('#month-detailed-{{uniqid}}-{{calendarinstanceid}}');
    DragDrop.init(root);
});
{{/js}}