{% extends 'dashboard.twig' %}

{% block head %}
    {{ parent() }}
    <script type="text/javascript" src="plugins/Overlay/javascripts/Piwik_Overlay.js"></script>
    <link rel="stylesheet" type="text/css" href="plugins/Overlay/stylesheets/overlay.css" />
{% endblock %}

{% block content %}
    <div class="overlay-sidebar-container">
        <a id="overlayTitle" href="{{ 'https://matomo.org/docs/page-overlay/'|trackmatomolink }}" rel="noreferrer noopener" target="_blank">
            {{ 'Overlay_Overlay'|translate }}
            <span class="icon-info"></span>
        </a>

        <div id="overlayDateRangeSelection">

            <span class="icon icon-calendar"></span>
            <select id="overlayDateRangeSelect" name="overlayDateRangeSelect" disabled>
                <option value="day;today">{{ 'Intl_Today'|translate }}</option>
                <option value="day;yesterday">{{ 'Intl_Yesterday'|translate }}</option>
                <option value="week;today">{{ 'General_CurrentWeek'|translate }}</option>
                <option value="month;today">{{ 'General_CurrentMonth'|translate }}</option>
                <option value="year;today">{{ 'General_CurrentYear'|translate }}</option>
            </select>
        </div>

        <div id="overlayErrorNoSiteUrls" style="display:none;">
            {{ 'Overlay_ErrorNoSiteUrls'|translate }}
        </div>

        <div id="overlayErrorNotLoading">
            <p>
                <span>{{ 'Overlay_ErrorNotLoading'|translate }}</span>
            </p>

            <p>
                {% if ssl %}
                    {{ 'Overlay_ErrorNotLoadingDetailsSSL'|translate }}
                {% else %}
                    {{ 'Overlay_ErrorNotLoadingDetails'|translate }}
                {% endif %}
            </p>

            <p>
                <a href="{{ 'https://matomo.org/faq/reports/troubleshoot-page-overlay-issues/'|trackmatomolink }}" rel="noreferrer noopener" target="_blank">
                    {{ 'Overlay_ErrorNotLoadingLink'|translate }}
                </a>
            </p>
        </div>

        <div id="overlayLocation">&nbsp;</div>

        <div id="overlayLoading">{{ 'General_Loading'|translate }}</div>

        <div id="overlaySidebar"></div>

        <a id="overlayRowEvolution"><span class="icon icon-evolution"></span>{{ 'General_RowEvolutionRowActionTooltipTitle'|translate }}</a>
        <a id="overlayTransitions"><span class="icon icon-transition"></span>{{ 'General_TransitionsRowActionTooltipTitle'|translate }}</a>
        <a id="overlaySegmentedVisitorLog"><span class="icon icon-visitor-profile"></span>{{ 'Live_RowActionTooltipTitle'|translate }}</a>

        {{ postEvent('Template.afterOverlaySidebar') }}
    </div>

    <div id="overlayMain">
        <iframe id="overlayIframe" name="overlayIframe" src="" frameborder="0"></iframe>
    </div>

    <script type="text/javascript">
        $(function () {
            Piwik_Overlay.siteUrls = {{ siteUrls|json_encode|raw }};

            // The startOverlaySession URL is matched by piwik.js::isOverlaySession(). Only the
            // canonical handshake parameters (module, action, idSite, period, date, segment) belong here.
            var iframeSrc = 'index.php?module=Overlay&action=startOverlaySession&idSite={{ idSite|e('js') }}&period={{ period|e('js') }}&date={{ rawDate|e('js') }}&segment={{ segment|e('js') }}';
            var iframePostParams = null;
            if (piwik.shouldPropagateTokenAuth) {
                iframePostParams = {
                    token_auth: piwik.token_auth
                };
                if (!piwik.broadcast.isWidgetizeRequestWithoutSession()) {
                    iframePostParams.force_api_session = '1';
                }
            }

            Piwik_Overlay.init(iframeSrc, '{{ idSite|e('js') }}', '{{ period|e('js') }}', '{{ rawDate|e('js') }}', '{{ segment|e('js') }}', iframePostParams);

            window.Piwik_Overlay_Translations = {
                domain: "{{ 'Overlay_Domain'|translate }}"
            };
        });
    </script>
{% endblock %}