<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.3/js/tether.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<style>
table.table>tbody .hiddenRow {
  padding: 0 8px;
}
p, h1, h2, h3, h4, h5, div, table, body{
  color: #26265e
}
body {
  background-color: #fefefe
}
tr.exploding { cursor: pointer; }
</style>
</head>
  <body>
    <div class="container">
    <div class="row">
      <br/>
    </div>
    <div class="row jumbotron">
      <div>
        <h1>Clowdr Share</h1>
      </div>
    </div>
    <div class="row">
      <h3>Session Info</h3>
        <table class="table table-condensed" style="border-collapse:collapse; width:100%">
          <tbody>
            <tr>
              <th>Tool</th>
              <td>{{ data.tool.name }}</td>
            </tr>
            <tr>
              <th>Session Location</th>
              <td>{{ data.clowdrloc }}</td>
            </tr>
        </table>
    </div>
    <div class="row">
      <div class="modal fade" id="logModal" tabindex="-1" role="dialog" aria-labelledby="logModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="logModalLabel">Placeholder</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <pre><code id="modal-code-content"> placeholder </code></pre>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary" data-dismiss="modal" id="download-modal" href="#">Download</button>
            </div>
          </div>
        </div>
      </div>
    <h3 style="display:inline">Executions</h3>
    <a href="/refresh"><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/4985-200.png" height="20pt" style="display:inline;" class="mt-2" align="bottom"/></a>
    <table class="table table-condensed" style="border-collapse:collapse; width:100%">
        <thead>
            <tr>
                <th>#</th>
                <th>Invocation</th>
                <th>Date Launched</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
        {% for task in data.tasks %}
          <tr data-toggle="collapse" data-target="#demo{{loop.index}}" class="accordion-toggle exploding">
              <td>{{ task.id }}</td>
              <td>{{ task.invoc.name }}</td>
              <td>{{ task.date }}</td>
              {% if task.summary.exitcode == 0 %}
                <td class="text-success">Complete
              {% elif task.summary.exitcode %}
                <td class="text-danger">Failed ({{ task.summary.exitcode }})
              {% else %}
                <td class="text-warning">Incomplete
              {% endif %}
              </td>
          </tr>
          <tr style="background-color:#ddd">
              <td colspan="6" class="hiddenRow"><div class="accordian-body collapse" id="demo{{loop.index}}">
                  <table class="table table-condensed table-sm small" style="width:95%; float:left; margin-right:2%; background-color:#ddd">
                      <thead>
                        <th colspan="2">Property</th>
                        <th colspan="8">Value(s)</th>
                      </thead>
                      <tbody>
                          <tr>
                              <th colspan="2">Task Files</th>
                              <td colspan="8">
                                <a data-toggle="modal" data-target="#logModal" data-fname="task-{{task.id}}.json" data-content="{{task.contents}}" data-name="Task Definition (Task: {{task.id}})" href="#">Task Definition</a>,
                                <a data-toggle="modal" data-target="#logModal" data-fname="{{data.tool.name}}.json" data-content="{{data.tool.contents}}" data-name="Tool Descriptor (Task: {{task.id}})" href="#">Tool Descriptor</a>,
                                <a data-toggle="modal" data-target="#logModal" data-fname="{{task.invoc.name}}" data-content="{{task.invoc.contents}}" data-name="Invocation (Task: {{task.id}})" href="#">Invocation</a>
                              </td>
                          </tr>
                          <tr>
                              <th colspan="2">Input Data Location</th>
                              <td colspan="8">
                                {% for dloc in task.contents.dataloc %}
                                  {% if loop.index > 1 %}
                                    ,
                                  {% endif %}
                                  {{ dloc }}
                                {% endfor %}
                              </td>
                          </tr>
                          <tr>
                              <th colspan="2">Output Data Location</th>
                              <td colspan="8">
                                {{ task.contents.taskloc }}
                              </td>
                          </tr>
                      </tbody>
                  </table>
                  <table class="table table-condensed table-sm small" style="width:65%; float:left; margin-right:2%; background-color:#ddd">
                      <thead>
                          <th colspan="2">Tool Inputs</th>
                      </thead>
                      <tbody>
                          {% for param in task.invoc.contents.keys() %}
                          <tr>
                              <td>
                              {% for inam in data.tool.contents.inputs %}
                                {% if inam["id"] == param %}
                                  {{ inam["name"] }}
                                {% endif %}
                              {% endfor %}
                              </td>
                              <td>
                                {{ task.invoc.contents[param] }}
                              </td>
                          </tr>
                          {% endfor %}
                      </tbody>
                  </table>
                  <table class="table table-condensed table-sm small" style="width:25%; float:right; margin-right:2%; background-color:#ddd">
                      <thead>
                          <th>Logs</th>
                      </thead>
                      <tbody>
                          <tr>
                              <td>
                                <a data-toggle="modal" data-target="#logModal" data-fname="stdout-{{task.id}}.txt" data-content="{{task.summary.out}}" data-name="Output Log (Task: {{task.id}})" href="#">Output Log</a>,
                                <a data-toggle="modal" data-target="#logModal" data-fname="stderr-{{task.id}}.txt" data-content="{{task.summary.err}}" data-name="Error Log (Task: {{task.id}})" href="#">Error Log</a>
                              </td>
                          </tr>
                      </tbody>
                  </table>
                  <table class="table table-condensed table-sm small" style="width:25%; float:right; margin-right:2%; background-color:#ddd">
                      <thead>
                          <th>Task Duration</th>
                      </thead>
                      <tbody>
                          <tr>
                              <td>
                                {{ task.summary.duration }}
                              </td>
                          </tr>
                      </tbody>
                  </table>
              </div></td>
          </tr>
        {% endfor %}
        </tbody>
    </table>
    </div></div>

<script type="text/javascript">
$('#logModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var name = button.data('name') // Extract info from data-* attributes
  var content = button.data('content') // Extract info from data-* attributes
  var filename = button.data('fname') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text(name)

  if (filename.endsWith(".json")) {
    content = content.replace(/True/g, true).replace(/False/g, false) // Replaces True and Falses'
    content = content.replace(/"/g, '\\\"').replace(/'/g, '"') //  Replaces all quotes in string
    content = JSON.stringify(JSON.parse(content), undefined, 2)
  }
  modal.find('.modal-body code').html(content)
  modal.find('#download-modal').on('click', function a(event) {
    var element = document.createElement('a');
    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(content));
    element.setAttribute('download', filename);

    element.style.display = 'none';
    document.body.appendChild(element);

    element.click();

    document.body.removeChild(element);
    element.remove();
  })
})
$('#logModal').on('hide.bs.modal', function (event) {
  var modal = $(this)
  modal.find('#download-modal').off('click');
})
</script>
  </body>
</html>
