{% extends '@OroUI/actions/view.html.twig' %}
{% import '@OroCalendar/templates.html.twig' as calendarTemplates %}

{% set name = entity.owner|oro_format_name|default('N/A'|trans) %}
{% oro_title_set({params : {"%username%": name, "%calendarname%": entity.name|default(name) }}) %}

{% block navButtons %}
    {% import '@OroUI/macros.html.twig' as UI %}

    {% if is_granted('oro_calendar_event_view') %}
        <div class="btn-group">
            {{ UI.button({
                'path' : path('oro_calendar_event_index'),
                'iCss': 'fa-clock-o',
                'label': 'oro.calendar.view_events'|trans,
                'title': 'oro.calendar.view_events'|trans
            }) }}
        </div>
    {% endif %}
{% endblock navButtons %}

{% block breadcrumb %}
    {% if breadcrumbs is not defined %}
        {% set breadcrumbs = [{'label': 'oro.calendar.entity_label'|trans }] %}
        {% if entity.name is not empty %}
            {% set breadcrumbs = breadcrumbs|merge([{'label': entity.name}]) %}
        {% endif %}
    {% endif %}
    {% include '@OroNavigation/Menu/breadcrumbs.html.twig' %}
{% endblock breadcrumb %}

{% block pageHeader %}
    <div class="calendar-title-wrapper navbar-extra">
        {% if breadcrumbs is not defined %}
            {% set breadcrumbs = {'entityTitle': 'oro.calendar.entity_label'|trans } %}
        {% endif %}
        {{- parent() -}}
    </div>
{% endblock pageHeader %}

{% block stats %}{% endblock stats %}

{% block calendar_connections %}
    <div class="calendars">
        {{ form_row(user_select_form) }}
        <div class="calendar-connections"></div>
    </div>
{% endblock calendar_connections %}

{% block calendar_events %}
    <div class="calendar-events"></div>
{% endblock calendar_events %}

{% block content_data %}
    {% set calendarOptions = {
            calendar: entity.id,
            calendarOptions: calendar,
            eventsItemsJson: render(path('oro_api_get_calendarevents', {calendar: entity.id, start: startDate|date('c'), end: endDate|date('c'), subordinate: true})),
            connectionsItemsJson: render(path('oro_api_get_calendar_connections', {id: entity.id})),
            eventsOptions: {
                defaultDate: 'now'|date('c', oro_timezone()),
                'containerSelector': '.calendar-events',
                'itemViewTemplateSelector': '#template-view-calendar-event',
                'itemFormTemplateSelector': '#template-calendar-event',
                'leftHeader': 'prev,next today',
                'centerHeader': 'title',
                'rightHeader': 'month,agendaWeek,agendaDay',
                'enableAttendeesInvitations': is_attendees_invitation_enabled()
            },
            connectionsOptions: {
                'modalContentTemplateId': isMobileVersion() ? 'connections-modal-content-template' : null,
                'containerSelector': '.calendar-connections',
                'containerTemplateSelector': '#template-calendar-connections',
                'itemTemplateSelector': '#template-calendar-connection-item',
            },
            colorManagerOptions: {
                colors: oro_config_value('oro_calendar.calendar_colors')
            },
            invitationStatuses: [
                constant('Oro\\Bundle\\CalendarBundle\\Entity\\Attendee::STATUS_ACCEPTED'),
                constant('Oro\\Bundle\\CalendarBundle\\Entity\\Attendee::STATUS_TENTATIVE'),
                constant('Oro\\Bundle\\CalendarBundle\\Entity\\Attendee::STATUS_DECLINED'),
            ]
        }
    %}

    <div class="sidebar-container">
        <div id="calendar" {% if isDesktopVersion() %} class="content-with-sidebar--container"{% endif %}
             data-page-component-module="orocalendar/js/app/components/calendar-component"
             data-page-component-options="{{ calendarOptions | json_encode }}"
        >
        {% if isMobileVersion() %}
            <div class="calendar-connections-header">
                <div class="dropdown">
                    <button data-role="show-connections-modal" class="btn btn-large">
                        <span class="fa-filter" aria-hidden="true"></span>
                        {{ 'oro.calendar.select'|trans }}
                    </button>
                </div>
            </div>
            {{ block('calendar_events') }}
            <script id="{{ calendarOptions.connectionsOptions.modalContentTemplateId }}" type="text/template">
                <div data-layout="separate">{{ block('calendar_connections') }}</div>
            </script>
        {% else %}
            <div class="content-with-sidebar--sidebar calendar-sidebar" data-role="calendar-sidebar">
                {{ block('calendar_connections') }}
            </div>
            <div class="content-with-sidebar--content">
                <div class="category-data">
                    {{ block('calendar_events') }}
                </div>
            </div>
        {% endif %}
        </div>
    </div>
    <script type="text/template" id="template-calendar-menu">
        {{ oro_menu_render(isMobileVersion() ? 'calendar_menu_mobile' : 'calendar_menu') }}
    </script>

    <script type="text/template" id="template-calendar-connections">
        <ul class="connection-container">
        </ul>
    </script>

    <script type="text/template" id="template-calendar-connection-item">
        {% apply spaceless %}
        <li class="connection-item<% if (visible) { %> active<% } %>">
            <span class="connection-item-label checkbox-label" data-role="connection-label">
                <input data-role="color-checkbox" type="checkbox"
                    <% if (visible) { %> checked <% } %>
                    <% if (!_.isEmpty(backgroundColor)) { %> style="--checkbox-skin-color: <%- backgroundColor %>;"<% } %>
                >
                <span class="user-calendar" title="<%- calendarName %>"><%- calendarName %></span>
            </span>
            <div class="connection-menu-container dropdown">
                {% set connectionTogglerId = 'connection-dropdown-'|uniqid %}
                <button id="{{ connectionTogglerId }}"
                        class="btn btn-square-light context-menu-button"
                        data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false"
                        data-target="{{ connectionTogglerId }}"
                        data-placement="bottom-end"
                >
                    <span class="fa-ellipsis-h fa-offset-none" aria-hidden="true"></span>
                </button>
                <div class="dropdown-menu" aria-labelledby="{{ connectionTogglerId }}">
                    <div data-role="connection-menu-content"></div>
                </div>
            </div>
        </li>
        {% endapply %}
    </script>

    {{ calendarTemplates.calendar_event_view_template('template-view-calendar-event') }}
    {{ calendarTemplates.calendar_event_form_template('template-calendar-event', event_form) }}
{% endblock content_data %}