1<template>
2    <div t-name="CalendarView" class="o_calendar_container">
3        <div class="o_calendar_view">
4            <div class="o_calendar_buttons" role="toolbar" aria-label="Calendar toolbar"/>
5            <div class="o_calendar_widget" />
6        </div>
7        <div class="o_calendar_sidebar_container d-none d-md-block">
8            <div class="o_calendar_sidebar">
9                <div class="o_calendar_mini"/>
10            </div>
11        </div>
12    </div>
13
14    <t t-name="calendar-box">
15        <div t-att-style="typeof color === 'string' ? ('background-color:' + color) + ';' : ''" t-attf-class="#{record.is_highlighted ? 'o_event_hightlight' : ''} #{typeof color === 'number' ? _.str.sprintf('o_calendar_color_%s', color) : 'o_calendar_color_1'}">
16            <span t-if="showTime" class="fc-time"/>
17            <div class="o_event_title" t-esc="record.display_name"/>
18        </div>
19    </t>
20
21    <t t-name="CalendarView.event.popover.placeholder">
22        <div t-attf-class="o_cw_popover popover card shadow #{typeof color === 'number' ? _.str.sprintf('o_calendar_color_%s', color) : ''}" role="tooltip">
23            <div class="arrow"/>
24            <div class="card-header d-flex justify-content-between py-2 pr-2">
25                <h4 class="popover-header border-0 p-0 pt-1"/>
26                <span class="o_cw_popover_close ml-4"><i class="fa fa-close small"/></span>
27            </div>
28            <div class="o_cw_body">
29            </div>
30        </div>
31    </t>
32
33    <t t-name="CalendarView.event.popover">
34        <div class="o_cw_body">
35            <ul class="list-group list-group-flush">
36                <li t-if="!widget.hideDate and widget.eventDate.date" class="list-group-item">
37                    <i class="fa fa-fw fa-calendar-o"/>
38                    <b class="text-capitalize" t-esc="widget.eventDate.date"/> <small t-if="widget.eventDate.duration"><b t-esc="_.str.sprintf('(%s)', widget.eventDate.duration)"/></small>
39                </li>
40                <li t-if="!widget.hideTime and widget.eventTime.time" class="list-group-item">
41                    <i class="fa fa-fw fa-clock-o"/>
42                    <b t-esc="widget.eventTime.time"/> <small t-if="widget.eventTime.duration"><b t-esc="_.str.sprintf('(%s)', widget.eventTime.duration)"/></small>
43                </li>
44            </ul>
45            <ul t-if="widget.isEventDetailsVisible()" class="list-group list-group-flush o_cw_popover_fields_secondary"/>
46            <div class="card-footer border-top">
47                <a t-if="widget.isEventEditable()" href="#" class="btn btn-primary o_cw_popover_edit">Edit</a>
48                <a t-if="widget.isEventDeletable()" href="#" class="btn btn-secondary o_cw_popover_delete ml-2">Delete</a>
49            </div>
50        </div>
51    </t>
52
53    <t t-name="CalendarView.sidebar.filter">
54        <t t-set="needCollapse" t-value="widget.filters.length > 2 and widget.title"></t>
55        <t t-set="collapseTitle" t-value="widget.title and widget.title.split(' ').join('')"></t>
56        <div class="o_calendar_filter">
57            <h5 t-if="needCollapse" type="button" data-toggle="collapse" t-attf-data-target="#o_cw_filter_collapse_#{collapseTitle}" class="d-flex justify-content-between align-items-center">
58                <t t-esc="widget.title"/><i class="o_cw_filter_collapse_icon fa fa-chevron-down"/>
59            </h5>
60
61            <h5 t-elif="widget.title" t-esc="widget.title"/>
62
63            <div t-attf-class="o_calendar_filter_items #{needCollapse ? 'collapse show' : 0}" aria-expanded="true" t-attf-id="o_cw_filter_collapse_#{collapseTitle}">
64                <t t-foreach="widget.filters" t-as="filter" t-if="filter.display == null || filter.display">
65                    <t t-set="idForLabel" t-value="_.uniqueId('o_calendar_filter_item_')"/>
66                    <t t-set="color" t-value="widget.getColor(filter.color_index)"/>
67                    <t t-set="isColorNumber" t-value="typeof color === 'number'"/>
68
69                    <div t-attf-class="o_calendar_filter_item w-100 position-relative mb-2 #{isColorNumber ? _.str.sprintf('o_cw_filter_color_%s', color) : ''}"
70                         t-att-data-value="filter.value" t-att-data-id="filter.id">
71
72                        <input type="checkbox" t-att-id="idForLabel" name="selection" class="position-absolute" t-att-checked="filter.active ? true : undefined"/>
73
74                        <label t-att-for="idForLabel" class="d-flex align-items-center m-0">
75                            <span t-attf-class="o_cw_filter_input_bg align-items-center d-flex flex-shrink-0 justify-content-center position-relative mr-1 #{widget.avatar_field ? 'o_beside_avatar' : ''}"
76                                t-att-style="color and !isColorNumber ? _.str.sprintf('border-color:%s;background-color:%s', color, color) : ''">
77                                <i class="fa fa-check position-relative"/>
78                            </span>
79                            <i t-if="filter.value == 'all'" class="o_cw_filter_avatar fa fa-users fa-fw  flex-shrink-0 mr-1" role="img" aria-label="Avatar" title="Avatar"/>
80                            <img t-elif="widget.avatar_field and filter.value" t-attf-src="/web/image/#{widget.avatar_model}/#{filter.value}/#{widget.avatar_field}" class="o_cw_filter_avatar flex-shrink-0 mr-1" alt="Avatar"/>
81                            <span class="o_cw_filter_title text-truncate flex-grow" t-esc="filter.label" t-attf-title="#{ ['all', false].includes(filter.value) or !widget.avatar_field ? filter.label : '' }"/>
82                        </label>
83
84                        <button t-if="filter.id" class="o_remove btn bg-white text-700 py-0 px-2" title="Remove this favorite from the list" role="img" aria-label="Remove this favorite from the list">
85                            <i class="fa fa-times"/>
86                        </button>
87                    </div>
88                </t>
89            </div>
90        </div>
91    </t>
92
93    <t t-name="CalendarView.buttons">
94        <div class="o_calendar_buttons">
95            <span class="o_calendar_navigation_buttons">
96                <t t-call="CalendarView.navigation_buttons" />
97            </span>
98            <t t-if="!scaleDrop">
99                <span class="o_calendar_scale_buttons">
100                    <t t-call="CalendarView.scale_buttons" />
101                </span>
102            </t>
103        </div>
104    </t>
105
106    <t t-name="CalendarView.navigation_buttons">
107        <button class="o_calendar_button_prev btn btn-primary" aria-label="Previous" title="Previous"><span class="fa fa-arrow-left"/></button>
108        <button class="o_calendar_button_today btn btn-primary">Today</button>
109        <button class="o_calendar_button_next btn btn-primary" aria-label="Next" title="Next"><span class="fa fa-arrow-right"/></button>
110    </t>
111
112    <t t-name="CalendarView.scale_buttons">
113        <div class="btn-group">
114            <button type="button" t-if="scales.includes('day')" class="o_calendar_button_day btn btn-secondary">Day</button>
115            <button type="button" t-if="scales.includes('week')" class="o_calendar_button_week btn btn-secondary">Week</button>
116            <button type="button" t-if="scales.includes('month')" class="o_calendar_button_month btn btn-secondary">Month</button>
117            <button type="button" t-if="scales.includes('year')" class="o_calendar_button_year btn btn-secondary">Year</button>
118        </div>
119    </t>
120
121    <main t-name="CalendarView.quick_create" class="o_calendar_quick_create">
122        <div class="form-group">
123            <label for='name' class='col-form-label o_form_label'>Summary:</label>
124            <input type='text' name='name' class="o_input o_required_modifier" t-att-value="widget.dataTemplate.name or None"/>
125        </div>
126    </main>
127
128    <t t-name="CalendarView.yearEvent.popover">
129        <div class="o_cw_body">
130            <t t-foreach="groupKeys" t-as="groupKey">
131                <div class="font-weight-bold mt-2" t-esc="groupKey"/>
132                <t t-foreach="groupedEvents[groupKey]" t-as="event">
133                    <t t-set="record" t-value="event.extendedProps.record"/>
134                    <a href="#" class="o_cw_popover_link btn-link d-block"
135                        t-att-data-id="record.id"
136                        t-att-data-title="record.display_name"
137                        t-esc="record.display_name"/>
138                </t>
139            </t>
140            <div class="mt-2">
141                <a t-if="canCreate" href="#" class="btn-link o_cw_popover_create">
142                    <i class="fa fa-plus"/> Create
143                </a>
144            </div>
145        </div>
146    </t>
147
148    <t t-name="CalendarView.yearEvent.popover.placeholder">
149        <div class="popover o_cw_popover" style="position: relative">
150            <div class="arrow"></div>
151            <div class="popover-header"></div>
152            <div style="position: absolute; top: 0; right: 0.5rem;">
153                <span class="o_cw_popover_close"><i class="fa fa-close small"></i></span>
154            </div>
155            <div class="popover-body"></div>
156        </div>
157    </t>
158</template>
159