{% extends 'base.html' %}

{% block content %}
  {{ super() }}
  {% from 'args-table.html' import args_table %}
  {% from 'content-grid.html' import content_grid %}
  {% from 'metadata.html' import list_metadata %}
  {% from 'caption.html' import caption %}

  <h2 class="section-header">Primary Outputs</h2>
  {{ accordion_section(
    'Coastal exposure and the protective role of habitats',
    content_grid([
      (content_grid([
        ('<div id="exposure_map" class="loading"></div>', 100),
        (caption(exposure_map_caption, exposure_map_source_list), 100)
      ]), 50),
      (content_grid([
        ('<div id="habitat_map" class="loading"></div>', 100),
        (caption(habitat_map_caption, habitat_map_source_list), 100)
      ]), 50),
      ('<div id="exposure_histogram" class="loading"></div>', 50),
      (content_grid([
        (habitat_params_table, 100),
        (caption(habitat_table_caption, habitat_table_source_list), 100)
      ]), 50)
    ])
  ) }}

  <h2 class="section-header">Intermediate Outputs</h2>
  {{ accordion_section(
    'Ranked exposure variables',
    content_grid([
      ('<div id="rank_vars_figure" class="loading"></div>', 100),
      (caption(rank_vars_figure_caption, rank_vars_figure_source_list), 100)
    ])
  ) }}

  {{ accordion_section(
    'Pre-ranked variables',
    content_grid([
      ('<div id="facetted_histograms_figure" class="loading"></div>', 100),
      (caption(facetted_histograms_caption, facetted_histograms_source_list), 100)
    ])
  ) }}

  {{ accordion_section(
    'Wave Exposure',
    content_grid([
      ('<div id="wave_energy_map" class="loading"></div>', 65),
      (caption(wave_energy_map_caption, wave_energy_map_source_list), 35)
    ])
  ) }}

  <h2 class="section-header">Inputs</h2>
  {{ accordion_section(
    'Arguments',
    args_table(args_dict),
  )}}

  <h2 class="section-header">Metadata</h2>
  {{
    accordion_section(
      'Output Filenames and Descriptions',
      list_metadata(model_spec_outputs),
      expanded=False
    )
  }}

{% endblock content %}

{% from 'vegalite-plot.html' import embed_vega %}
{% block scripts %}
  {{ super() }}
  <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.20.1"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
  {% include 'vega-embed-js.html' %}
  {% set chart_spec_id_list = [
    (exposure_map_json, 'exposure_map'),
    (habitat_map_json, 'habitat_map'),
    (exposure_histogram_json, 'exposure_histogram'),
    (rank_vars_figure_json, 'rank_vars_figure'),
    (facetted_histograms_json, 'facetted_histograms_figure'),
    (wave_energy_map_json, 'wave_energy_map'),
  ] %}
  {{ embed_vega(chart_spec_id_list) }}
{% endblock scripts %}