{% extends "engine/base.html" %}
{% load servertags %}
  <title>{% block title %}OpenQuake engine: outputs from calculation {{ calc_id }}{% endblock %}</title>

  {% block main %}
  {{ block.super }}
  <div class="content-wrap">
    <div class="container">
      <div class="row">
        <div id="oq-body-wrapper">
          <div class="span12">
            {% if application_mode == 'AELO' %}
            <h2>{{ site_name }}, Lat: {{ lat }}, Lon: {{ lon }}, Site Class: {{ site_class }}, {{ asce_version }}{% if calc_aelo_version is not None %}, AELO version: {{ calc_aelo_version }}{% endif %}</h2>
            {% else %}
            <h2>Outputs from calculation {{ calc_id }}</h2>
            {% endif %}
            <div id="my-outputs" class="well"></div>
            <div class="outputs-general-btns-left">
              {% if application_mode == 'AELO' %}
              <div id="to-simplified-outputs">
                <a href="{{ oq_engine_server_url }}/engine/{{ calc_id }}/outputs_aelo" class="btn btn-sm">
                  View simplified outputs page</a>
              </div>
              {% endif %}
            </div>
            <div class="outputs-general-btns-center">
              {% if hmaps %}
              <div class="my-pngs">
                <a href="{{ oq_engine_server_url }}/v1/calc/{{ calc_id }}/download_png/hmap_0_0" class="btn btn-sm">
                  Show hazard map</a>
              </div>
              {% endif %}
              {% for img in avg_gmf %}
              <div class="my-pngs">
                <a href="{{ oq_engine_server_url }}/v1/calc/{{ calc_id }}/download_png/{{img}}" class="btn btn-sm">
                  Show average GMF - {{ img|get_imt }}</a>
              </div>
              {% endfor %}
              {% if assets %}
              <div class="my-pngs">
                <a href="{{ oq_engine_server_url }}/v1/calc/{{ calc_id }}/download_png/assets.png" class="btn btn-sm">
                  Show assets</a>
              </div>
              {% endif %}
              {% if mce %}
              <div class="my-pngs">
                <a href="{{ oq_engine_server_url }}/v1/calc/{{ calc_id }}/download_png/mce.png" class="btn btn-sm">
                  Show MCE</a>
              </div>
              {% endif %}
              {% if mce_spectra %}
              <div class="my-pngs">
                <a href="{{ oq_engine_server_url }}/v1/calc/{{ calc_id }}/download_png/mce_spectra.png" class="btn btn-sm">
                  Show MCE spectra</a>
              </div>
              {% endif %}
              {% if hcurves %}
              <div class="my-pngs">
                <a href="{{ oq_engine_server_url }}/v1/calc/{{ calc_id }}/download_png/hcurves.png" class="btn btn-sm">
                  Show hazard curves</a>
              </div>
              {% endif %}
              {% for img in disagg_by_src %}
              <div class="my-pngs">
                <a href="{{ oq_engine_server_url }}/v1/calc/{{ calc_id }}/download_png/{{img}}" class="btn btn-sm">
                  {# NOTE: uncomment below to show the IMT #}
                  {# Show hazard curves per source - {{ img|get_imt }}</a> #}
                  Show hazard curves per source</a>
              </div>
              {% endfor %}
            </div>
            <div class="outputs-general-btns-right">
              <div id="my-datastore">
                <a href="{{ oq_engine_server_url }}/v1/calc/{{ calc_id }}/datastore"
                   title="Size: {{ size_mb }} MB" class="btn btn-sm">
                  Download hdf5 datastore</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div> <!-- /.container -->
  </div>
  {% endblock main %}

  {% block templates %}
  <script type="text/template" id="output-table-template">
    <table id="output_table" class="table table-hover">
      <thead>
        <tr>
          <th>ID</th>
          <th style="width: 500px;">Name</th>
          <th>Type</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <% _.each(outputs, function(output) { %>
        {% if application_mode == 'AELO' %}
        <% if (['hmaps', 'realizations', 'rtgm'].indexOf(output.get('type')) >= 0) { %>
        <%   return; // works like continue in underscore.js %>
        <% }%>
        {% endif %}
        {# In the general case we were using the "success" class, coloring the line in green, but the color adds no information in the list of outputs #}
        <tr class="">
          <td><%= output.get('id') || 'New' %></td>
          <td><%= output.get('name') %></td>
          <td <% if (output.get('size_mb')) { %>title="Size: <%= Math.max((Math.round(output.get('size_mb') * 100) / 100), 0.01).toFixed(2) %>MB"<% } %>><%= output.get('type') %></td>
          <td>
            <table class="table table-disable-hover table-condensed">
            <% _.each(output.get('outtypes'), function(outtype) { %>
              <tr>
                <td><a href="{{ oq_engine_server_url }}/v1/calc/result/<%= output.get('id') %>?export_type=<%= outtype %>" class="btn btn-sm output-action-btn">Download <%= outtype %></a></td>
              </tr>
            <% }); %>
            </table>
          </td>
        </tr>
        <% }); %>
      </tbody>
    </table>
  </script>

  {% endblock templates %}

  {% block extra_script %}
  {{ block.super }}
  <script type="text/javascript"><!--
    var gem_calc_id = '{{ calc_id }}';
    //-->
    </script>
  <script type="text/javascript" src="{{ STATIC_URL }}js/engine_get_outputs.js"></script>
  {% endblock extra_script %}