{% extends "engine/base.html" %}

  {% block nav-items %}
                <li class="calc">
                  <form class="calc-form form-horizontal"
                        enctype="multipart/form-data"
                        method="post" action="{{ oq_engine_server_url }}/v1/calc/run">
                    <input type="hidden" name="calculation_type" value="hazard"/>
                    <label for="hazard_archive">Run a Calculation</label>
                    <input id="hazard_archive" type="file" name="archive" style="display: none;" />
                    <input type="hidden" name="database" value="openquake2"/>
                  </form>
                </li>
  {% endblock nav-items %}

  {% block main %}
  <div class="content-wrap">
    <div class="container">
      <div class="row">
        <div id="oq-body-wrapper">
          <div id="new-release-box" class="alert alert-warning">
          </div>
          <div class="span12">
            <h2>List of calculations{% if server_name %} from {{ server_name }}{% endif %}</h2>
            <div id="my-calculations" class="well"></div>
          </div>
        </div>
      </div>
    </div> <!-- /.container -->
  </div>
  {% endblock main %}

  {% block templates %}
  <script type="text/template" id="calculation-table-template">
    <table id="calculation_table" class="table table-hover">
      <thead>
        <tr>
          <th style="width: 50px;">ID</th>
          <th style="width: 50px;">User</th>
          <th style="width: 130px;">Calculation mode</th>
          <th style="width: 300px;">Description</th>
          <th style="width: 120px;">Status</th>
          <th style="width: 150px;">Action</th>
        </tr>
      </thead>
      <tbody>
        <% _.each(calculations, function(calc) { %>
        <tr class="<%= (calc.get('status') == 'created' || calc.get('is_running') == true) ? 'warning' : (calc.get('status') == 'complete' ? 'success' : 'error') %>">
          <td><%= calc.get('id') || 'New' %></td>
          <td><%= calc.get('owner') %></td>
          <td><%= calc.get('calculation_mode') %></td>
          <td><%= calc.get('description') %></td>
          <td>
            <% if (calc.get('status') == 'created' || calc.get('status') == 'complete' || calc.get('is_running') == true) { %>
              <%= calc.get('status') %>
            <% } else { %>
              failed<br>( <%= calc.get('status') %> )
            <% } %>
          </td>
          <td>
            <% if (calc.get('status') != 'created') { %>
              <a href="#" data-calc-id="<%= calc.get('id') %>" is-running="<%= calc.get('is_running') %>" class="btn btn-sm btn-log" style="margin: 2px 0 2px 0;">Console</a>
              <% if (calc.get('is_running') == false) { %>
                <a href="#" data-calc-id="<%= calc.get('id') %>" class="btn btn-sm btn-danger" style="margin: 2px 0 2px 0;">Remove</a>
                <!-- confirm_modal -->
                <div class="modal-backdrop in hide back_confirmDialog<%= calc.get('id') %>"></div>
                <div id="confirmDialog<%= calc.get('id') %>" class="modal hide" data-keyboard="true" tabindex="-1">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h4 class="modal-title">Remove calculation</h4>
                    </div>
                    <div class="modal-body" style="font-size: 12px;">
                        <pre style="font-size: 12px;" class="modal-body-pre">Are you sure to remove calculation:<br><b>(<%= calc.get('id') %>) <%= calc.get('description') %></b> ?</pre>
                    </div>
                    <div class="modal-footer">
                      <button type="button" data-calc-id="<%= calc.get('id') %>" data-calc-desc="<%= calc.get('description') %>" class="btn btn-show-remove">Yes</button>
                      <button type="button" data-calc-id="<%= calc.get('id') %>" class="btn btn-default btn-hide-no">No</button>
                    </div>
                  </div>
                </div>
                </div>
                <!-- end confirm_modal -->
                <% if (calc.get('status') == 'complete') { %>
                  <a href="{% url "index" %}/<%= calc.get('id') %>/outputs" class="btn btn-sm" style="margin: 2px 0 2px 0">Outputs</a>
                  <form class="calc-form" enctype="multipart/form-data"
                    style="margin: 0; display: inline-block"
                    method="post" action="{{ oq_engine_server_url }}/v1/calc/run">
                  <input type="hidden" name="calculation_type" value="risk"/>
                  <div class="fileinput-new" data-provides="fileinput" style="margin: 2px 0 2px 0">
                    <span class="btn btn-default btn-sm btn-file"><span class="fileinput-new">Continue</span><input type="file" name="archive"/></span>
                  </div>
                  <input type="hidden" name="hazard_job_id" value="<%= calc.get('id') %>"/>
                  </form>
                <% } else { %>
                  <a href="#" data-calc-id="<%= calc.get('id') %>" class="btn btn-sm btn-traceback" style="margin: 2px 0 2px 0;">Traceback</a>
                <% } %>
              <% } else if (calc.get('abortable')) { %>
              <a href="#" data-calc-id="<%= calc.get('id') %>" class="btn btn-sm btn-danger" style="margin: 2px 0 2px 0;">Abort</a>
              <!-- confirm_modal -->
              <div class="modal-backdrop in hide back_confirmDialog<%= calc.get('id') %>"></div>
              <div id="confirmDialog<%= calc.get('id') %>" class="modal hide" data-keyboard="true" tabindex="-1">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <h4 class="modal-title">Abort calculation</h4>
                  </div>
                  <div class="modal-body" style="font-size: 12px;">
                      <pre style="font-size: 12px;" class="modal-body-pre">Are you sure to abort calculation:<br><b>(<%= calc.get('id') %>) <%= calc.get('description') %></b> ?</pre>
                  </div>
                  <div class="modal-footer">
                    <button type="button" data-calc-id="<%= calc.get('id') %>" data-calc-desc="<%= calc.get('description') %>" class="btn btn-show-abort">Yes</button>
                    <button type="button" data-calc-id="<%= calc.get('id') %>" class="btn btn-default btn-hide-no">No</button>
                  </div>
                </div>
              </div>
              </div>
              <!-- end confirm_modal -->
            <% } %>
          <% } %>
          </td>
        </tr>
      <% }); %>
      </tbody>
    </table>
  </script>

  {% endblock templates %}

  {% block extra_script %}
  {{ block.super }}
  <script type="text/javascript" src="{{ STATIC_URL }}js/engine.js"></script>
  {% endblock extra_script %}
