<div piwik-content-block
     content-title="{{ 'ScheduledReports_CreateAndScheduleReport'|translate|e('html_attr') }}"
     class="entityAddContainer"
     ng-if="manageScheduledReport.showReportForm">
    <div class='clear'></div>
    <form id='addEditReport' piwik-form ng-submit="manageScheduledReport.submitReport()">

        <div piwik-field uicontrol="text" name="website"
             data-title="{{ 'General_Website'|translate|e('html_attr') }}"
             data-disabled="true"
             value="{{ siteName|rawSafeDecoded }}">
        </div>

        <div piwik-field uicontrol="textarea" name="report_description"
             data-title="{{ 'General_Description'|translate|e('html_attr') }}"
             ng-model="manageScheduledReport.report.description"
             inline-help="{{ 'ScheduledReports_DescriptionOnFirstPage'|translate|e('html_attr') }}">
        </div>

        {% if segmentEditorActivated %}
            <div id="reportSegmentInlineHelp" class="inline-help-node">
                {% set SegmentEditor_DefaultAllVisits %}{{ 'SegmentEditor_DefaultAllVisits'|translate }}{% endset %}
                {% set SegmentEditor_AddNewSegment %}{{ 'SegmentEditor_AddNewSegment'|translate }}{% endset %}
                {{ 'ScheduledReports_Segment_Help'|translate('<a href="./" rel="noreferrer noopener" target="_blank">','</a>',SegmentEditor_DefaultAllVisits,SegmentEditor_AddNewSegment)|raw }}
            </div>

            <div piwik-field uicontrol="select" name="report_segment"
                 ng-model="manageScheduledReport.report.idsegment"
                 options="{{ savedSegmentsById|json_encode }}"
                 data-title="{{ 'SegmentEditor_ChooseASegment'|translate|e('html_attr') }}"
                 inline-help="#reportSegmentInlineHelp">
            </div>
        {% endif %}

        <div id="emailScheduleInlineHelp" class="inline-help-node">
            {{ 'ScheduledReports_WeeklyScheduleHelp'|translate }}
            <br/>
            {{ 'ScheduledReports_MonthlyScheduleHelp'|translate }}
        </div>

        <div piwik-field uicontrol="select" name="report_schedule"
             options="{{ periods|json_encode }}"
             ng-model="manageScheduledReport.report.period"
             ng-change="manageScheduledReport.report.periodParam = manageScheduledReport.report.period === 'never' ? null : manageScheduledReport.report.period"
             data-title="{{ 'ScheduledReports_EmailSchedule'|translate|e('html_attr') }}"
             inline-help="#emailScheduleInlineHelp">
        </div>

        <div id="emailReportPeriodInlineHelp" class="inline-help-node">
            {{ 'ScheduledReports_ReportPeriodHelp'|translate }}
            <br/><br/>
            {{ 'ScheduledReports_ReportPeriodHelp2'|translate }}
        </div>

        <div piwik-field uicontrol="select" name="report_period"
             options="{{ paramPeriods|json_encode }}"
             ng-model="manageScheduledReport.report.periodParam"
             title="{{ 'ScheduledReports_ReportPeriod'|translate|e('html_attr') }}"
             inline-help="#emailReportPeriodInlineHelp"
        >
        </div>

        <div piwik-field uicontrol="select" name="report_hour"
             options="manageScheduledReport.reportHours"
             ng-change="manageScheduledReport.updateReportHourUtc()"
             ng-model="manageScheduledReport.report.hour"
             {% if timezoneOffset != 0 %}inline-help="#reportHourHelpText"{% endif %}
             data-title="{{ 'ScheduledReports_ReportHour'|translate('X')|e('html_attr') }}">
        </div>

        {% if timezoneOffset != 0 %}
            <div id="reportHourHelpText" class="inline-help-node">
                <span ng-bind="manageScheduledReport.report.hourUtc"></span>
            </div>
        {% endif %}

        <div piwik-field uicontrol="select" name="report_type"
             options="{{ reportTypeOptions|json_encode }}"
             ng-model="manageScheduledReport.report.type"
             ng-change="manageScheduledReport.changedReportType()"
             {% if reportTypes|length == 1 %}disabled="true"{% endif %}
             data-title="{{ 'ScheduledReports_ReportType'|translate|e('html_attr') }}">
        </div>

        {% for reportType, reportFormats in reportFormatsByReportTypeOptions %}
            <div piwik-field uicontrol="select" name="report_format"
                 class="{{ reportType }}"
                 ng-model="manageScheduledReport.report.format{{ reportType }}"
                 ng-show="manageScheduledReport.report.type == '{{ reportType }}'"
                 options="{{ reportFormats|json_encode }}"
                 data-title="{{ 'ScheduledReports_ReportFormat'|translate|e('html_attr') }}">
            </div>
        {% endfor %}

        {{ postEvent("Template.reportParametersScheduledReports") }}

        <div ng-show="manageScheduledReport.report.type == 'email' && manageScheduledReport.report.formatemail !== 'csv'">
            <div piwik-field uicontrol="select" name="display_format" class="email"
                 ng-model="manageScheduledReport.report.displayFormat"
                 options="{{ displayFormats|json_encode }}"
                 introduction="{{ 'ScheduledReports_AggregateReportsFormat'|translate|e('html_attr') }}">
            </div>

            <div piwik-field uicontrol="checkbox" name="report_evolution_graph"
                 class="report_evolution_graph"
                 ng-model="manageScheduledReport.report.evolutionGraph"
                 ng-show="manageScheduledReport.report.displayFormat == '2' || manageScheduledReport.report.displayFormat == '3'"
                 data-title="{{ 'ScheduledReports_EvolutionGraph'|translate(5)|e('html_attr') }}">
            </div>

            <div
                class="row evolution-graph-period"
                ng-show="manageScheduledReport.report.displayFormat == '1' || manageScheduledReport.report.displayFormat == '2' || manageScheduledReport.report.displayFormat == '3'"
            >
                <div class="col s12">
                    <label for="report_evolution_period_for_each">
                        <input id="report_evolution_period_for_each" name="report_evolution_period_for" type="radio" checked value="each" ng-model="manageScheduledReport.report.evolutionPeriodFor" />
                        <span piwik-translate="ScheduledReports_EvolutionGraphsShowForEachInPeriod"><strong>::</strong>::{{ "{{ manageScheduledReport.getFrequencyPeriodSingle() }}" }}</span>
                    </label>
                </div>
                <div class="col s12">
                    <label for="report_evolution_period_for_prev">
                        <input id="report_evolution_period_for_prev" name="report_evolution_period_for" type="radio" value="prev" ng-model="manageScheduledReport.report.evolutionPeriodFor" />
                        <span>{{ "{{ 'ScheduledReports_EvolutionGraphsShowForPreviousN'|translate:manageScheduledReport.getFrequencyPeriodPlural() }}" }}:
                            <input type="number" name="report_evolution_period_n" ng-model="manageScheduledReport.report.evolutionPeriodN" /></span>
                    </label>
                </div>
            </div>
        </div>

        <div class="row">
            <h3 class="col s12">{{ 'ScheduledReports_ReportsIncluded'|translate }}</h3>
        </div>

        {% for reportType, reportsByCategory in reportsByCategoryByReportType %}
            <div name='reportsList' class='row {{ reportType }}'
                 ng-show="manageScheduledReport.report.type == '{{ reportType }}'">

                {% if allowMultipleReportsByReportType[reportType] %}
                    {% set reportInputType='checkbox' %}
                {% else %}
                    {% set reportInputType='radio' %}
                {% endif %}

                {% set countCategory=0 %}

                {% set newColumnAfter=(reportsByCategory|length + 1)//2 %}

                <div class='col s12 m6'>
                    {% for category, reports in reportsByCategory %}
                    {% if countCategory >= newColumnAfter and newColumnAfter != 0 %}
                    {% set newColumnAfter=0 %}
                </div>
                <div class='col s12 m6'>
                    {% endif %}
                    <h3 class='reportCategory'>{{ category }}</h3>
                    <ul class='listReports'>
                        {% for report in reports %}
                            <li>
                                <label>
                                    <input type='{{ reportInputType }}' id="{{ reportType }}{{ report.uniqueId }}" report-unique-id='{{ report.uniqueId }}'
                                           name='{{ reportType }}Reports'/>
                                    <span>{{ report.name|rawSafeDecoded }}</span>
                                    {% if report.uniqueId=='MultiSites_getAll' %}
                                        <div class="entityInlineHelp">{{ 'ScheduledReports_ReportIncludeNWebsites'|translate(countWebsites)
                                            }}</div>
                                    {% endif %}
                                </label>
                            </li>
                        {% endfor %}
                        {% set countCategory=countCategory+1 %}
                    </ul>
                    <br/>
                    {% endfor %}
                </div>
            </div>
        {% endfor %}

        <input type="hidden" id="report_idreport" ng-model="manageScheduledReport.editingReportId">

        <div ng-value="manageScheduledReport.saveButtonTitle"
               onconfirm="manageScheduledReport.submitReport()"
               piwik-save-button></div>

        <div class='entityCancel'>
            {{ 'General_OrCancel'|translate("<a class='entityCancelLink' ng-click='manageScheduledReport.showListOfReports()'>","</a>")|raw }}
        </div>

    </form>
</div>