{% macro calendar_event_form_template(id, form) %}
<script type="text/html" id="{{ id }}">
    {% import 'OroUIBundle::macros.html.twig' as UI %}
    {% set data = [
            form_row(form.title),
            form_row(form.start),
            form_row(form.end),
            form_row(form.allDay),
            form_row(form.reminders)
        ]
    %}
    <div class="alert alert-error" style="display: none;"></div>
    <form id="{{ form.vars.name }}" action="#">
        <fieldset class="form-horizontal">
            {{ UI.scrollSubblock(null, data, true, false)|replace({'<script': '<% print("<sc" + "ript") %>', '</script>': '<% print("</sc" + "ript>") %>'})|raw }}
            <div class="widget-actions form-actions" style="display: none;">
                <% if (id != null && removable) { %>
                {{
                    UI.deleteButton({
                        'aCss': 'no-hash',
                        'id': 'btn-remove-calendarevent',
                        'dataMessage': 'Are you sure you want to delete this event?',
                        'title': 'Delete event',
                        'label': 'Delete',
                        'data': {'action-name': 'delete'}
                    })
                }}
                <% } %>
                <button class="btn" type="reset">{{ 'Cancel'|trans }}</button>
                <% if (id == null || (id != null && editable)) { %>
                <button class="btn btn-primary" type="submit">{{ 'Save'|trans }}</button>
                <% } %>
            </div>
        </fieldset>
    </form>
    {{ oro_form_js_validation(form)|replace({'<script': '<% print("<sc" + "ript") %>', '</script>': '<% print("</sc" + "ript>") %>'})|raw }}
</script>
{% endmacro %}

{% macro renderCalendar(containerSelector, entity, startDate, endDate, calendar, eventsOptions, connectionsOptions, callbackMacro) %}
<script type="text/javascript">
    require(['jquery', 'underscore', 'orocalendar/js/calendar', 'orocalendar/js/calendar/event/collection',
        'orocalendar/js/calendar/connection/collection', 'orolocale/js/locale-settings', 'oroui/js/mediator'],
    function($, _, Calendar, EventCollection, ConnectionCollection, localeSettings, mediator){
        var connections = new ConnectionCollection();
        connections.reset({{ render(path('oro_api_get_calendar_connections', {id: entity.id})) }});
        var events = new EventCollection();
        events.reset({{ render(path('oro_api_get_calendarevents', {calendar: entity.id, start: startDate|date('c'), end: endDate|date('c'), subordinate: true})) }});

        var dateFormat = localeSettings.getVendorDateTimeFormat('fullcalendar', 'date', 'MMM d, yyyy');
        var timeFormat = localeSettings.getVendorDateTimeFormat('fullcalendar', 'time', 'h:mm TT');
        // @TODO Get date format without year
        var dateFormatWithoutYear = dateFormat;
        // prepare FullCalendar specific date/time formats
        var isDateFormatStartedWithDay = dateFormat.indexOf('d') === 0;
        var weekFormat = isDateFormatStartedWithDay
            ? 'd[ MMMM][ yyyy]{ \'&#8212;\' d MMMM yyyy}'
            : 'MMMM d[ yyyy]{ \'&#8212;\'[ MMMM] d yyyy}';

        var options = {
            el: {{ containerSelector|json_encode|raw }},
            calendar: {{ entity.id|json_encode|raw }},
            collection: events,
            eventsOptions: {
                subordinate: true,
                containerSelector: {{ eventsOptions.containerSelector|json_encode|raw }},
                itemFormTemplateSelector: {{ eventsOptions.itemFormTemplateSelector|json_encode|raw }},
                {% if eventsOptions.contentHeight is defined %}
                contentHeight: {{ eventsOptions.contentHeight|json_encode|raw }},
                {% endif %}
                date: "{{ 'now'|date('c') }}",
                firstDay: localeSettings.getCalendarFirstDayOfWeek() - 1,
                {% if eventsOptions.firstHour is defined %}
                firstHour: {{ eventsOptions.firstHour|json_encode|raw }},
                {% endif %}
                monthNames: localeSettings.getCalendarMonthNames('wide', true),
                monthNamesShort: localeSettings.getCalendarMonthNames('abbreviated', true),
                dayNames: localeSettings.getCalendarDayOfWeekNames('wide', true),
                dayNamesShort: localeSettings.getCalendarDayOfWeekNames('abbreviated', true),
                header: {
                    left: {{ eventsOptions.leftHeader|default('')|json_encode|raw }},
                    center: {{ eventsOptions.centerHeader|default('')|json_encode|raw }},
                    right: {{ eventsOptions.rightHeader|default('')|json_encode|raw }},
                    ignoreTimezone: false,
                    allDayDefault: false
                },
                defaultView: {{ eventsOptions.defaultView|default('month')|json_encode|raw }},
                allDayText: {{ 'oro.calendar.control.all_day'|trans|json_encode|raw }},
                buttonText: {
                    today: {{ 'oro.calendar.control.today'|trans|json_encode|raw }},
                    month: {{ 'oro.calendar.control.month'|trans|json_encode|raw }},
                    week: {{ 'oro.calendar.control.week'|trans|json_encode|raw }},
                    day: {{ 'oro.calendar.control.day'|trans|json_encode|raw }}
                },
                titleFormat: {
                    month: 'MMMM yyyy',
                    week: weekFormat,
                    day: 'dddd, ' + dateFormat
                },
                columnFormat: {
                    month: 'ddd',
                    week: 'ddd ' + dateFormatWithoutYear,
                    day: 'dddd ' + dateFormatWithoutYear
                },
                timeFormat: {
                    '': timeFormat,
                    agenda: timeFormat + '{ - ' + timeFormat + '}'
                },
                axisFormat: timeFormat
            },
            connectionsOptions: {
                {% if not connectionsOptions is null %}
                containerSelector: {{ connectionsOptions.containerSelector|json_encode|raw }},
                containerTemplateSelector: {{ connectionsOptions.containerTemplateSelector|json_encode|raw }},
                itemTemplateSelector: {{ connectionsOptions.itemTemplateSelector|json_encode|raw }},
                {% endif %}
                collection: connections
            }
        };
        _.extend(options.eventsOptions, {{ calendar|json_encode|raw }});
        $(function() {
            var calendar = new Calendar(options);
            calendar.render();
            {% if eventsOptions.renderCompleteCallback is defined %}
            var renderCompleteCallback = {{ eventsOptions.renderCompleteCallback|raw }};
            renderCompleteCallback(calendar);
            {% endif %}
            calendar.$el.data('calendar', calendar);
            mediator.on('page:beforeChange', _.bind(calendar.dispose, calendar));
        });
    });
</script>
{% endmacro %}