{{!
    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 core_calendar/event_details

    Calendar event details.

    The purpose of this template is to render the event details.

    This template is used in the summary modal, day and upcoming views to output event information consistently
    across the calendar.

    Classes required for JS:
    * none

    Data attributes required for JS:
    * none

    Example context (json):
    {
        "formattedtime": "Wednesday, 17 April, 9:27 AM",
        "formattedlocation": "Moodle HQ",
        "normalisedeventtype": "Group",
        "normalisedeventtypetext": "Group event",
        "description": "An random event description",
        "isactionevent": "true",
        "course": {
            "viewurl": "http://mymoodlesite/course/view.php?id=1",
            "fullname": "Course name"
        },
        "source": "Ical imported",
        "groupname": "Group 1",
        "iscategoryevent": "true",
        "category": {
            "nestedname": "Category name"
        },
        "iscourseevent": "true",
        "groupname": "Group name",
        "subscription": "true",
        "displayeventsource": "true",
        "subscriptionname": "Subscription name",
        "subscriptionurl": "http://subscriptionurl"
    }
}}
<div class="modal-cal-time mb-1 pb-2">
    {{{formattedtime}}}
</div>
{{#description}}
    <div class="modal-cal-desc d-inline-flex align-items-start pt-0 mb-3">
        <div class="description-content">{{{.}}}</div>
    </div>
{{/description}}

<div class="rui-calendar-footer">
    <ul class="rui-calendar-list mb-0 px-0">
        {{#location}}
        <li>
            <div class="rui-calendar-list-content">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><g data-name="Layer 2"><g data-name="globe"><rect width="24" height="24" transform="rotate(180 12 12)" opacity="0"/><path d="M22 12A10 10 0 0 0 12 2a10 10 0 0 0 0 20 10 10 0 0 0 10-10zm-2.07-1H17a12.91 12.91 0 0 0-2.33-6.54A8 8 0 0 1 19.93 11zM9.08 13H15a11.44 11.44 0 0 1-3 6.61A11 11 0 0 1 9.08 13zm0-2A11.4 11.4 0 0 1 12 4.4a11.19 11.19 0 0 1 3 6.6zm.36-6.57A13.18 13.18 0 0 0 7.07 11h-3a8 8 0 0 1 5.37-6.57zM4.07 13h3a12.86 12.86 0 0 0 2.35 6.56A8 8 0 0 1 4.07 13zm10.55 6.55A13.14 13.14 0 0 0 17 13h2.95a8 8 0 0 1-5.33 6.55z"/></g></g></svg>
                <span class="ml-2">{{{.}}}</span>
            </div>
        </li>
        {{/location}}
        {{#iscategoryevent}}
            <li class="modal-cal-cat w-100 mb-1">
                <div class="rui-calendar-list-content">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><g data-name="Layer 2"><g data-name="bookmark"><rect width="24" height="24" opacity="0"/><path d="M6.09 21.06a1 1 0 0 1-1-1L4.94 5.4a2.26 2.26 0 0 1 2.18-2.35L16.71 3a2.27 2.27 0 0 1 2.23 2.31l.14 14.66a1 1 0 0 1-.49.87 1 1 0 0 1-1 0l-5.7-3.16-5.29 3.23a1.2 1.2 0 0 1-.51.15zm5.76-5.55a1.11 1.11 0 0 1 .5.12l4.71 2.61-.12-12.95c0-.2-.13-.34-.21-.33l-9.6.09c-.08 0-.19.13-.19.33l.12 12.9 4.28-2.63a1.06 1.06 0 0 1 .51-.14z"/></g></g></svg>
                    <span class="ml-2">{{{category.nestedname}}}</span></div>
            </li>
        {{/iscategoryevent}}
        {{#course.viewurl}}
            <li>
                <a class="rui-calendar-list-content" href="{{course.viewurl}}">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><g data-name="Layer 2"><g data-name="book-open"><rect width="24" height="24" transform="rotate(180 12 12)" opacity="0"/><path d="M20.62 4.22a1 1 0 0 0-.84-.2L12 5.77 4.22 4A1 1 0 0 0 3 5v12.2a1 1 0 0 0 .78 1l8 1.8h.44l8-1.8a1 1 0 0 0 .78-1V5a1 1 0 0 0-.38-.78zM5 6.25l6 1.35v10.15L5 16.4zM19 16.4l-6 1.35V7.6l6-1.35z"/></g></g></svg>
                    <span class="ml-2">{{{course.fullname}}}</span>
                </a>
            </li>
        {{/course.viewurl}}
        {{#groupname}}
        <li>
            <div class="rui-calendar-list-content">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><g data-name="Layer 2"><g data-name="people"><rect width="24" height="24" opacity="0"/><path d="M9 11a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm0-6a2 2 0 1 1-2 2 2 2 0 0 1 2-2z"/><path d="M17 13a3 3 0 1 0-3-3 3 3 0 0 0 3 3zm0-4a1 1 0 1 1-1 1 1 1 0 0 1 1-1z"/><path d="M17 14a5 5 0 0 0-3.06 1.05A7 7 0 0 0 2 20a1 1 0 0 0 2 0 5 5 0 0 1 10 0 1 1 0 0 0 2 0 6.9 6.9 0 0 0-.86-3.35A3 3 0 0 1 20 19a1 1 0 0 0 2 0 5 5 0 0 0-5-5z"/></g></g></svg>
                <span class="ml-2">{{{groupname}}}</span>
            </div>
        </li>
        {{/groupname}}
        {{#normalisedeventtypetext}}
            <li>
                <div class="rui-calendar-list-content">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><g data-name="Layer 2"><g data-name="menu"><rect width="24" height="24" transform="rotate(180 12 12)" opacity="0"/><rect x="3" y="11" width="18" height="2" rx=".95" ry=".95"/><rect x="3" y="16" width="18" height="2" rx=".95" ry=".95"/><rect x="3" y="6" width="18" height="2" rx=".95" ry=".95"/></g></g></svg>
                    <span class="ml-2">{{normalisedeventtypetext}}</span>
                </div>
            </li>
        {{/normalisedeventtypetext}}
        {{#subscription}}
            {{#displayeventsource}}
            <li>
                <div class="rui-calendar-list-content">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M5.5 19C5.5 19.2761 5.27614 19.5 5 19.5C4.72386 19.5 4.5 19.2761 4.5 19C4.5 18.7239 4.72386 18.5 5 18.5C5.27614 18.5 5.5 18.7239 5.5 19Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M4.75 12.75H5C8.45178 12.75 11.25 15.5482 11.25 19V19.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M4.75 6.75H5C11.7655 6.75 17.25 12.2345 17.25 19V19.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>

                    {{#subscriptionurl}}
                        <span class="ml-2"><a href="{{subscriptionurl}}">{{#str}}subscriptionsource, core_calendar, {{{subscriptionname}}}{{/str}}</a></span>
                    {{/subscriptionurl}}
                    {{^subscriptionurl}}
                        <span class="ml-2">{{#str}}subscriptionsource, core_calendar, {{{subscriptionname}}}{{/str}}</span>
                    {{/subscriptionurl}}
                </div>
            </li>
            {{/displayeventsource}}
        {{/subscription}}
    </ul>
</div>
