{% extends '@MauticCore/Default/content.html.twig' %}

{% block mauticContent 'report' %}

{% block headerTitle %}
  {% if report.id %}
    {{ 'mautic.report.report.header.edit'|trans({'%name%': report.name|trans}) }}
  {% else %}
    {{ 'mautic.report.report.header.new'|trans }}
  {% endif %}
{% endblock %}

{% block content %}
  {%- form_theme form '@MauticReport/FormTheme/Report/layout.html.twig' -%}
  {%- set showGraphTab = form.graphs.vars.choices|length > 0 -%}

  {{ form_start(form) }}
  {{ form_errors(form) }}
  <div class="box-layout">
      <div class="col-md-9 bg-white height-auto">
          <div class="row">
              <div class="col-xs-12">
                  <!-- tabs controls -->
                  <ul class="bg-auto nav nav-tabs pr-md pl-md">
                      <li class="active">
                          <a href="#details-container" role="tab" data-toggle="tab">{{ 'mautic.core.details'|trans }}</a>
                      </li>
                      <li class="">
                          <a href="#data-container" role="tab" data-toggle="tab">{{ 'mautic.report.tab.data'|trans }}</a>
                      </li>
                      <li class="{% if not showGraphTab %}hide{% endif %}" id="graphs-tab">
                          <a href="#graphs-container" role="tab" data-toggle="tab">{{ 'mautic.report.tab.graphs'|trans }}</a>
                      </li>
                      <li>
                          <a href="#schedule-container" role="tab" class="{% if formContainsErrors(form.toAddress) %}text-danger{% endif %}" data-toggle="tab">{{ 'mautic.report.tab.schedule'|trans }}</a>
                      </li>
                  </ul>
                  <!--/ tabs controls -->

                  <div class="tab-content pa-md">
                      <div class="tab-pane fade in active bdr-w-0" id="details-container">
                          <div class="row">
                              <div class="col-md-6">
                                  <div class="pa-md">
                                      {{ form_row(form.name) }}
                                  </div>
                              </div>
                              <div class="col-md-6">
                                  <div class="pa-md">
                                      {{ form_row(form.source) }}
                                  </div>
                              </div>
                          </div>
                          <div class="row">
                              <div class="col-md-12">
                                  <div class="pa-md">
                                      {{ form_row(form.description) }}
                                  </div>
                              </div>
                          </div>
                      </div>

                      <div class="tab-pane fade bdr-w-0" id="data-container">
                          <div class="row">
                              <div class="col-md-6">
                                  <div class="pa-md">
                                      <h4><strong>{{ 'mautic.report.report.form.columnselector'|trans }}</strong></h4>
                                      {{ form_row(form.columns) }}
                                  </div>
                              </div>
                              <div class="col-md-6">
                                  <div class="ml-md">
                                      <h4><strong>{{ 'mautic.core.order'|trans }}</strong></h4>
                                      {{ form_row(form.tableOrder) }}
                                  </div>
                              </div>
                          </div>
                          <div class="row">
                              <div class="col-md-12">
                                  <div class="pa-md">
                                      <h4><strong>{{ 'mautic.core.filters'|trans }}</strong></h4>
                                      {{ form_row(form.filters) }}
                                  </div>
                                  <div class="hide">
                                      <div id="filterValueYesNoTemplate">
                                          {{ form_widget(form.value_template_yesno) }}
                                      </div>
                                  </div>
                              </div>
                          </div>
                          <div class="row">
                              <div class="col-md-6">
                                  <div class="pa-md">
                                      <h4><strong>{{ 'mautic.report.form.groupby'|trans }}</strong></h4>
                                      {{ form_row(form.groupBy) }}
                                  </div>
                              </div>
                              <div class="col-md-6">
                                  <div class="pa-md">
                                      <h4><strong>{{ 'mautic.core.calculated.fields'|trans }}</strong></h4>
                                      {{ form_row(form.aggregators) }}
                                  </div>
                              </div>
                          </div>
                      </div>
                      <div class="tab-pane fade bdr-w-0 {% if not showGraphTab %}hide{% endif %}" id="graphs-container">
                          <div class="row">
                              <div class="col-md-6">
                                  <div class="pa-md">
                                      {{ form_row(form.vars.form.children.settings.showGraphsAboveTable) }}
                                      {{ form_row(form.graphs) }}
                                  </div>
                              </div>
                          </div>
                      </div>
                      <div class="tab-pane fade bdr-w-0" id="schedule-container">
                          <div class="row">
                              <div class="col-md-12">
                                  {{ form_row(form.isScheduled) }}
                              </div>
                          </div>
                          <div class="row">
                              <div class="col-sm-12 col-md-6">
                                  <div class="schedule_form">
                                      {{ form_row(form.toAddress) }}
                                      {{ form_row(form.scheduleUnit) }}

                                      <div id="scheduleMonthFrequency">
                                          {{ form_row(form.scheduleMonthFrequency) }}
                                      </div>
                                      <div id="scheduleDay">
                                          {{ form_row(form.scheduleDay) }}
                                      </div>
                                  </div>
                              </div>
                              <div class="col-sm-12 col-md-6">
                                  <div class="schedule_form well well-sm mt-lg">
                                      <span id="schedule_preview_url" data-url="{{ path('mautic_report_schedule_preview') }}"></span>
                                      <div id="schedule_preview_data">
                                          <strong>{{ 'mautic.report.schedule.preview_data'|trans }}</strong>
                                          <div id="schedule_preview_data_content" class="mt-sm"></div>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      <div class="col-md-3 bg-white height-auto bdr-l">
          <div class="pr-lg pl-lg pt-md pb-md">
              {{ form_row(form.isPublished) }}
              {{ form_row(form.system) }}
              {{ form_row(form.createdBy) }}
              <hr>
              <h5>{{ 'mautic.report.report.form.display.dynamic.filters.settings'|trans }}</h5>
              <br>
              {{ form_row(form.vars.form.children.settings.showDynamicFilters) }}
              {{ form_row(form.vars.form.children.settings.hideDateRangeFilter) }}
          </div>
      </div>
  </div>
  {{ form_end(form) }}
{% endblock %}
