{% extends base_template %}
{% import "macros.j2" as macros with context %}
{% set report_name = report.report_parameters.name %}

{% block body %}
{% block report_title %}
<h1 id="report-title">{{ report_name }}</h1>
{% endblock %}
{% block report_description %}
<p>
  This report of solar forecast accuracy was automatically generated using the
  <a href="https://solarforecastarbiter.org">Solar Forecast Arbiter</a>.
  Please see our GitHub repository for
  <a href="//github.com/SolarArbiter/solarforecastarbiter-core/issues?q=is%3Aissue+is%3Aopen+label%3Areports">known issues</a>
  with the reports or to create a new issue.
</p>
{% endblock %}
{% block download %}{% endblock %}

{% block toc %}
<ul>
  <li><a href="#report-metadata">Report Metadata</a></li>
  {% if report.report_parameters.costs | length > 0 %}
  <ul>
    <li><a href="#costparams">Cost Parameters</a></li>
  </ul>
  {% endif %}
  <li><a href="#data">Data</a></li>
  <ul>
    <li><a href="#observations-and-forecasts">Observations and Forecasts</a></li>
    <li><a href="#data-validation">Data Validation</a></li>
  </ul>
  <li><a href="#metrics">Metrics</a></li>
  {% if include_metrics_toc | default(True) %}
  <ul>
    {% for category in report.report_parameters.categories %}
      <li><a href="#{{ category }}-analysis">{{ human_categories[category].title() }} Analysis</a></li>
    {% endfor %}
  </ul>
  {% endif %}
  <li><a href="#versions">Versions</a></li>
</ul>
{% endblock %}

{% block errors %}
{% if report.raw_report.messages| length > 0 %}
<div class="alert alert-warning">
  {% for mesg in report.raw_report.messages %}
  <h5>{{ mesg.message }}</h5>
  {% endfor %}
</div>
{% endif %}
{% endblock %}

{% block reportmetadata %}
<h2 id="report-metadata">Report Metadata</h2>
<ul>
  <li>Name: {{ report_name }}</li>
  <li>Start: {{ report.report_parameters.start }}</li>
  <li>End: {{ report.report_parameters.end }}</li>
  <li>Generated at: {{ report.raw_report.generated_at }}</li>
</ul>

{% set costs = report.report_parameters.costs %}
{% if costs | length > 0 %}
<h4 id="costparams">Cost Parameters</h4>
{% for cost in costs %}
<div id="cost-{{ cost.name | figure_name_filter }}" class="card">
  <div class="card-header">
    <a class="collapsed card-link" data-toggle="collapse" href="#collapse-{{ cost.name | figure_name_filter }}">
      <h5>{{ cost.name }}</h5>
    </a>
  </div>
  <div id="collapse-{{ cost.name | figure_name_filter }}" class="collapse" data-parent="#cost-{{ cost.name | figure_name_filter }}">
    <div class="card-body">
      <pre>{{ cost.to_dict() | pretty_json }}</pre>
    </div>
  </div>
</div>
{% endfor %}
{% endif %}
{% endblock %}

{% block data %}
<h2 id="data">Data</h2>
<p>
  This report includes forecast and observation data available from {{ report.report_parameters.start }} to {{ report.report_parameters.end }}.
{% endblock %}
{% block obsandfx %}
<h3 id="observations-and-forecasts">Observations and Forecasts</h3>
{% include "obsfx_table.html" %}

{% if timeseries_spec is defined %}
<p>The plots below show the realigned and resampled time series of
observation and forecast data as well as the distribution of forecast vs
observation data.</p>

<p>Controls to pan, zoom, and save the plot are shown on the
right. Clicking on an item in the legend will hide/show it.</p>

<div id="timeseries-div"></div>
{% if includes_distribution %}
<p>For forecasts parameterized symmetrically around the 50th percentile,
brighter colors indicate percentiles farther from the 50th percentile and
darker colors indicate percentiles closer to the 50th percentile. For forecasts
parameterized asymmetrically around the 50th percentile, brighter colors
indicate smaller percentiles and darker colors indicate larger percentiles.
Use the hover tool to determine the percentile.</p>
{% endif %}
<div id="scatter-div"></div>

<script>
ts_plot = JSON.parse('{{ timeseries_spec | safe }}');
Object.assign(ts_plot,{config: {responsive: true}});
Plotly.newPlot("timeseries-div", ts_plot);
scat_plot = JSON.parse('{{ scatter_spec | safe }}');
Object.assign(scat_plot,{config: {responsive: true}});
Plotly.newPlot("scatter-div", scat_plot);
</script>
{% endif %}

{% if timeseries_prob_spec is defined %}
<p>The plot below shows probability vs. time for probabilistic forecasts
  with <em>axis='x'</em>.
</p>
<div id="timeseries-prob-div"></div>
<script>
  ts_prob_plot = JSON.parse('{{ timeseries_prob_spec | safe }}');
  Object.assign(ts_prob_plot,{config: {responsive: true}});
  Plotly.newPlot("timeseries-prob-div", ts_prob_plot);
</script>
{% endif %}
{% endblock %}

{% block datavalidation %}
<h3 id="data-validation">Data Validation</h3>
{% include "data_validation_pre_text" %}

{% for filter in report.report_parameters.filters %}
  {% if filter.__class__.__name__ == 'QualityFlagFilter' %}
    {% set valtable = True %}
    {{ macros.validation_table(report.raw_report.processed_forecasts_observations, filter.quality_flags) }}
  <br>
  {% endif %}
{% endfor %}
{% if valtable | default(False) %}
  <div class="alert alert-info">No filters applied</div>
{% endif %}

{% include "data_validation_post_text" %}
{% endblock %}

{% block dataresampleandalign %}
<h3 id="data-alignment">Data Resampling and Alignment</h3>
{% include "data_resampling_preamble" %}
{{ macros.preprocessing_table(report.raw_report.processed_forecasts_observations) }}
<br>
{% include "data_resampling_postamble" %}
{% endblock %}

{% block metrics %}
<h2 id="metrics">Metrics</h2>
{% include "metrics_meta_table.html" %}
<p>
  A table of metrics over the entire study period and figures for the selected
  categories are shown below.
  Metrics may be downloaded in CSV format by clicking
  <a href="javascript:download_metrics_as_csv('{{ report_name }}')">here</a>.
</p>

{{ macros.metric_table_fx_vert(report.raw_report.metrics, "total", report.report_parameters.metrics) }}

<script>var metric_plots = {};</script>
<div id="metric-plot-wrapper">
{% for category in report.report_parameters.categories %}
<h3 id="{{ category }}-analysis">{{ human_categories[category].title() }} Analysis</h3>
  {% if category_blurbs is defined %}
<p>{{ category_blurbs[category] }}</p>
  {% endif %}
<br>
  {% for metric in report.report_parameters.metrics %}
    {% for rep_fig in report.raw_report.plots.figures %}
      {% if rep_fig.category == category and rep_fig.metric == metric %}
      {% set plot_id = (category+'_'+metric+'_'+rep_fig.name) | figure_name_filter %}
    <div class="metric-block" id="{{ plot_id }}" data-category="{{ rep_fig.category }}" data-metric="{{ rep_fig.metric }}" data-forecast="{{ rep_fig.name }}">
        <script>plot=JSON.parse('{{ rep_fig.spec | safe }}');
                Object.assign(plot,{config: {responsive: true}});
                metric_plots['{{plot_id}}'] = plot;</script></div>
      {% endif %}
    {% endfor %}
  {% endfor %}
{% endfor %}
</div>
{% include "load_metrics.html" %}
{{ macros.download_csv_script () | safe }}
{% endblock %}


{% block versions %}
<h2 id="versions">Versions</h2>
{% include "versions.html" %}
{% endblock %}
{% endblock %}
