{% 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="http://piwik.org/docs/page-overlay/" rel="noreferrer" target="_blank">
            {{ 'Overlay_Overlay'|translate }}
            <span class="icon-help"></span>
        </a>

        <div id="overlayDateRangeSelection">
            <select id="overlayDateRangeSelect" name="overlayDateRangeSelect">
                <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="overlayErrorNotLoading">
            <p>
                <span>{{ 'Overlay_ErrorNotLoading'|translate }}</span>
            </p>

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

            <p>
                <a href="http://piwik.org/docs/page-overlay/#toc-page-overlay-troubleshooting" rel="noreferrer"  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">{{ 'General_RowEvolutionRowActionTooltipTitle'|translate }}</a>
        <a id="overlayTransitions">{{ 'General_TransitionsRowActionTooltipTitle'|translate }}</a>
        <a id="overlaySegmentedVisitorLog">{{ 'Live_RowActionTooltipTitle'|translate }}</a>
    </div>

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

    <script type="text/javascript">
        broadcast._isInit = true;
        $(function () {
            var iframeSrc = 'index.php?module=Overlay&action=startOverlaySession&idSite={{ idSite }}&period={{ period }}&date={{ rawDate }}&segment={{ segment }}';
            Piwik_Overlay.init(iframeSrc, '{{ idSite }}', '{{ period }}', '{{ rawDate }}', '{{ segment }}');

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