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

  {% block nav-items %}
  {{ block.super }}
                {% if application_mode != 'AELO' and application_mode != 'IMPACT' and application_mode != 'READ_ONLY' %}
                <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;" multiple />
                    <input type="hidden" name="database" value="openquake2"/>
                  </form>
                </li>
                {% endif %}
  {% endblock nav-items %}

  {% block main %}
  {{ block.super }}
  <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>
          {% if application_mode == 'AELO' %}
          {% include './includes/aelo_form.html' %}
          {% elif application_mode == 'IMPACT' %}
          {% with './includes/impact_form_level_'|addstr:user_level|add:'.html' as template_path %}
          {% include template_path %}
          {% endwith %}
          {% endif %}
          <div class="span12">
            <h2>List of calculations{% if application_mode != 'AELO' %}{% if server_name %} from {{ server_name }}{% endif %}{% endif %}</h2>
            <div id="tag-filters">
                <label for="list_preferred_only">
                    <input type="checkbox" id="list_preferred_only" name="list_preferred_only">
                    List preferred calculations only
                </label>
                <label for="tag_selector">Filter by tag:</label>
                <select id="tag_selector" class="form-control" style="width: 200px;">
                    <option value="">All tags</option>
                </select>
            </div>
            <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: 100px;">User</th>
          <th style="width: 100px;">Calculation</th>
          <th style="width: 280px;">Description</th>
          <th style="width: 100px;">Tags</th>
          <th style="width: 100px;">Start time</th>
          <th style="width: 70px;">Status</th>
          <th style="width: 150px;">Action</th>
        </tr>
      </thead>
      <tbody>
        <% _.each(calculations, function(calc) { %>
        <% if (calc.get('status') == 'deleted' || calc.get('relevant') == 0) { return 0; } %>
        <tr class="<%= (calc.get('status') == 'created' || calc.get('is_running') == true) ? 'warning' : (calc.get('status') == 'complete' || calc.get('status') == 'shared' ? '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><%= calc.get('tags') %></td>
          <td><%= calc.get('start_time') %></td>
          <td>
            <% if (calc.get('status') == 'created' || calc.get('status') == 'complete' || calc.get('status') == 'shared' || 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 calc-list-btn" style="margin: 2px 0 2px 0;">Console</a>
              <% if (calc.get('is_running') == false) { %>
                {% if application_mode != 'READ_ONLY' and user_level > 0 %}
                <a href="#" data-calc-id="<%= calc.get('id') %>" data-calc-desc="<%= calc.get('description') %>" class="btn btn-sm btn-danger calc-list-btn btn-remove" style="margin: 2px 0 2px 0;">Remove</a>
                {% endif %}
                <% if (calc.get('status') == 'complete' || calc.get('status') == 'shared') { %>

                {% if application_mode != 'READ_ONLY' and user_level >= 2 and lockdown %}
                <% if (calc.get('status') == 'complete') { %>
                  <a href="#" data-calc-id="<%= calc.get('id') %>" data-calc-desc="<%= calc.get('description') %>" class="btn btn-sm btn-info calc-list-btn btn-share" style="margin: 2px 0 2px 0;">Share</a>
                <% } else if (calc.get('status') == 'shared') { %>
                  <a href="#" data-calc-id="<%= calc.get('id') %>" data-calc-desc="<%= calc.get('description') %>" class="btn btn-sm btn-info calc-list-btn btn-unshare" style="margin: 2px 0 2px 0;">Unshare</a>
                <% } %>
                {% endif %}

                <a href="{% url "index" %}/<%= calc.get('id') %>/{% if application_mode == 'AELO'%}outputs_aelo{% elif  application_mode == 'IMPACT' %}outputs_impact{% else %}outputs{% endif %}" class="btn btn-sm calc-list-btn" style="margin: 2px 0 2px 0">Outputs</a>
                  {% if application_mode != 'AELO' and application_mode != 'IMPACT' and application_mode != 'READ_ONLY' and user_level > 0 %}
                  <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 calc-list-btn"><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>
                  {% endif %}
                <% } else { %>
                  <a href="#" data-calc-id="<%= calc.get('id') %>" class="btn btn-sm btn-traceback calc-list-btn" style="margin: 2px 0 2px 0;">Traceback</a>
                <% } %>
              <% } else if (calc.get('abortable')) { %>
              {% if application_mode != 'READ_ONLY' and user_level > 0 %}
              <a href="#" data-calc-id="<%= calc.get('id') %>" data-calc-desc="<%= calc.get('description') %>" class="btn btn-sm btn-danger calc-list-btn btn-abort" style="margin: 2px 0 2px 0;">Abort</a>
              {% endif %}
            <% } %>
          <% } %>
          </td>
        </tr>
      <% }); %>
      </tbody>
    </table>
  </script>
  <!-- Confirm Modal -->
  <div id="confirmModal" class="modal hide" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Confirm Action</h4>
        </div>
        <div class="modal-body">
          <pre style="font-size: 12px;" class="modal-body-pre">Default message</pre>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary btn-confirm">Yes</button>
          <button type="button" class="btn btn-secondary btn-cancel" onclick="closeModal()">No</button>
        </div>
      </div>
    </div>
  </div>
  <!-- Generic modal -->
  <div id="genericModal" class="modal hide fade">
    <div class="modal-header">
      <a class="close" data-dismiss="modal">×</a>
      <h3 id="genericModalTitle">Message</h3>
    </div>
    <div class="modal-body" id="genericModalBody">
      <!-- dynamic text goes here -->
    </div>
    <div class="modal-footer">
      <button class="btn" data-dismiss="modal">OK</button>
    </div>
  </div>
  {% endblock templates %}

  {% block extra_script %}
  {{ block.super }}
  <script>
    window.application_mode = "{{ application_mode|escapejs }}";
  </script>
  <script type="text/javascript" src="{{ STATIC_URL }}js/utils.js"></script>
  <script type="text/javascript" src="{{ STATIC_URL }}js/calculations.js"></script>
  {% if application_mode == 'AELO' %}
  <script type="text/javascript" src="{{ STATIC_URL }}js/aelo.js"></script>
  {% elif application_mode == 'IMPACT' %}
  <script type="text/javascript" src="{{ STATIC_URL }}js/impact.js"></script>
  {% endif %}
  <script type="text/javascript" src="{{ STATIC_URL }}js/engine.js"></script>
  {% endblock extra_script %}