{% extends "base.html" %}

{% load filters %}

{% block title %}{{project_name}}: {{record.label}}{% endblock %}

{% block css %}
    <link href="/static/css/dataTables.bootstrap.css" rel="stylesheet">
{% endblock %}

{% block navbar %}
            <li><a href="..">{{project_name}}</a></li>
            <li><a href="/{{project_name}}/{{record.label}}/"> {{record.label}}</a></li>
{% endblock %}

{% block content %}

<!-- General information -->

<div class="panel panel-info">
    <div class="panel-heading clearfix">
        {% if not read_only %}
        <div class="pull-right" role="group">
            <button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#deleteModal"><span class="glyphicon glyphicon-trash"></span> Delete record</button>
        </div>
        {% endif %}
        <h2 class="panel-title" style="padding-top: 6px;">{{record.label}}</h2>
    </div>
    <div class="panel-body">
        <div class="well well-sm"><code>$ {{record.command_line}}</code></div>
        <p>Run on {{record.timestamp|date:"d/m/Y H:i:s"}} by {{record.user}}</p>

        <dl class="dl-horizontal">
            <dt>Working directory:</dt><dd>{{record.working_directory}}</dd>
            <dt>Code version:</dt><dd>{{record.version}}{% if record.diff %}* (<a href="diff">diff</a>){% endif %}</dd>
            <dt>Repository:</dt><dd>{{record.repository.url}}
            {% if record.repository.upstream %} - cloned from {{record.repository.upstream|urlize}}{% endif %}</dd>
            <dt>{{record.executable.name}} version:</dt><dd>{{record.executable.version}}</dd>
            <dt>Reason:</dt><dd>
                {% if not read_only %}
                <button type="button" class="btn btn-xs pull-right" data-toggle="modal" data-target="#editReasonModal"><span class="glyphicon glyphicon-pencil"></span> Edit</button>
                {% endif %}
                {{record.reason|restructuredtext}}</dd>
            <dt>Tags:</dt><dd>
                {% if not read_only %}
                <button type="button" class="btn btn-xs pull-right" data-toggle="modal" data-target="#editTagsModal"><span class="glyphicon glyphicon-pencil"></span> Edit</button>
                {% endif %}
                {% for tag in record.tag_objects %}{{tag.name|labelize_tag}} {% endfor %}</dd>
        </dl>
        {% if not read_only and not record.outcome %}
        <p><button type="button" class="btn btn-xs btn-success pull-right" data-toggle="modal" data-target="#editOutcomeModal"><span class="glyphicon glyphicon-plus"></span> Add outcome</button></p>
        {% endif %}
    </div>
</div>

<!-- Outcome -->

{% if record.outcome %}
<div class="panel panel-default">
    <div class="panel-heading">
        {% if not read_only %}
        <button type="button" class="btn btn-xs pull-right" data-toggle="modal" data-target="#editOutcomeModal"><span class="glyphicon glyphicon-pencil"></span> Edit</button>
        {% endif %}
        <h4 class="panel-title">
            <a data-toggle="collapse" href="#outcome-panel">Outcome</a>
        </h4>
    </div>
    <div class="panel-body collapse in" id="#outcome-panel">
        {{record.outcome|restructuredtext}}
    </div>
</div>
{% endif %}

<!-- Parameters -->

{% if parameters %}
<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a data-toggle="collapse" href="#parameters-panel">Parameters</a>
        </h4>
    </div>
    <div class="panel-body collapse in" id="parameters-panel">
    {% with dict=parameters template="nested_dict.html" %}
        {% include template %}
    {% endwith %}
    </div>
</div>
{% endif %}

<!-- Input data -->

{% if record.input_data.count %}
<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a data-toggle="collapse" href="#input-data-panel">Input data</a></h4>
    </div>
    <div class="panel-body collapse in" id="input-data-panel">
        <table id="input-data" class="table table-striped table-condensed">
            <thead>
            <tr>
                <th>Filename</th>
                <th>Path</th>
                <th>Digest</th>
                <th>Size</th>
                <th>Date/Time</th>
                <th>Output of</th>
                <th>Input to</th>
            </tr>
            </thead>

            <tbody>
            {% for data in record.input_data.all %}
            <tr>
                <td>
                    <a href="/{{project_name}}/data/datafile?path={{data.path|urlencode}}&digest={{data.digest}}&creation={{data.creation|date:"c"}}">
                        {{data.path|basename|ubreak}}
                    </a>
                </td>
                <td>
                    {{data.path|ubreak}}
                </td>
                <td>
                    {{data.digest|truncatechars:12 }}
                </td>
                <td>
                    {{data|eval_metadata:'size'|filesizeformat}}
                </td>
                <td>
                <span style='display:none;'>
                  <!-- hack for correct sorting -->
                  {{data.output_from_record.timestamp|date:"YmdHis"}}
                </span>
                    {{data.output_from_record.timestamp|date:"d/m/Y H:i:s"}}
                </td>
                <td>
                    <a href="/{{project_name}}/{{data.output_from_record.label}}/">
                        {{data.output_from_record.label|ubreak}}
                    </a>
                </td>
                <td>
                    {% for record in data.input_to_records.all %}
                    <a href="/{{project_name}}/{{record.label}}/">
                        {{record.label|ubreak}}<!--
                                           -->{% if not forloop.last %}, {% endif %}
                    </a>
                    {% endfor %}
                </td>
            </tr>
            {% endfor %}
            <tbody>
        </table>
    </div>
</div>
{% endif %}


<!-- Output data -->

{% if record.output_data.count %}
<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a data-toggle="collapse" href="#output-data-panel">Output data</a>
        </h4>
    </div>
    <div class="panel-body collapse in" id="output-data-panel">
        <table id="output-data" class="table table-striped table-condensed">
            <thead>
            <tr>
                <th>Filename</th>
                <th>Path</th>
                <th>Digest</th>
                <th>Size</th>
                <th>Date/Time</th>
                <th>Output of</th>
                <th>Input to</th>
            </tr>
            </thead>

            <tbody>
            {% for data in record.output_data.all %}
            <tr>
                <td>
                    <a href="/{{project_name}}/data/datafile?path={{data.path|urlencode}}&digest={{data.digest}}&creation={{data.creation|date:"c"}}">
                        {{data.path|basename|ubreak}}
                    </a>
                </td>
                <td>
                    {{data.path|ubreak}}
                </td>
                <td>
                    {{data.digest|truncatechars:12 }}
                </td>
                <td>
                    {{data|eval_metadata:'size'|filesizeformat}}
                </td>
                <td>
                <span style='display:none;'>
                  <!-- hack for correct sorting -->
                  {{data.output_from_record.timestamp|date:"YmdHis"}}
                </span>
                    {{data.output_from_record.timestamp|date:"d/m/Y H:i:s"}}
                </td>
                <td>
                    <a href="/{{project_name}}/{{data.output_from_record.label}}/">
                        {{data.output_from_record.label|ubreak}}
                    </a>
                </td>
                <td>
                    {% for record in data.input_to_records.all %}
                    <a href="/{{project_name}}/{{record.label}}/">
                        {{record.label|ubreak}}<!--
                                           -->{% if not forloop.last %}, {% endif %}
                    </a>
                    {% endfor %}
                </td>
            </tr>
            {% endfor %}
            <tbody>
        </table>
    </div>
</div>
{% endif %}


<!-- Dependencies -->

{% if record.dependencies.count %}
<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a data-toggle="collapse" href="#dependencies-panel">Dependencies</a>
        </h4>
    </div>
    <div id="dependencies-panel" class="panel-body collapse in">
        <table id="dependencies" class="table table-striped table-condensed">
            <thead>
            <tr>
                <th>Name</th>
                <th>Path</th>
                <th>Version</th>
            </tr>
            </thead>

            <tbody>
            {% for dep in record.dependencies.all %}
            <tr>
                <td>{{dep.name}}</td>
                <td>{{dep.path}}</td>
                <td>{{dep.version}}{% if dep.diff %}* (<a href="diff/{{dep.name}}">diff</a>){% endif %}</td>
            </tr>
            {% endfor %}
            <tbody>
        </table>
    </div>
</div>
{% endif %}


<!-- Platform information -->

{% if record.platforms.count %}
<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a data-toggle="collapse" href="#platform-info-panel">Platform information</a>
        </h4>
    </div>
    <div id="platform-info-panel" class="panel-body collapse in">
        <table id="platform-info" class="table table-striped table-condensed">
            <thead>
            <tr>
                <th>Name</th>
                <th>IP address</th>
                <th>Processor</th>
                <th colspan="2">Architecture</th>
                <th>System type</th>
                <th>Release</th>
                <th>Version</th>
            </tr>
            </thead>

            <tbody>
            {% for platform in record.platforms.all %}
            <tr class="{% cycle 'odd' 'even' %}">
                <td>{{platform.network_name}}</td>
                <td>{{platform.ip_addr}}</td>
                <td>{{platform.processor}} {{platform.machine}}</td>
                <td style='padding-right:5px'>{{platform.architecture_bits}}</td>
                <td>{{platform.architecture_linkage}}</td>
                <td>{{platform.system_name}}</td>
                <td>{{platform.release}}</td>
                <td>{{platform.version}}</td>
            </tr>{% endfor %}
            <tbody>
        </table>
    </div>
</div>
{% endif %}

<!-- stdout and stderr -->

{% if record.stdout_stderr %}
<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a data-toggle="collapse" href="#stdout-stderr-panel">Stdout & Stderr</a>
        </h4>
    </div>
    <div id="stdout-stderr-panel" class="panel-body collapse in">
      <code>{{ record.stdout_stderr | linebreaksbr }}</code>
    </div>
</div>
{% endif %}


{% endblock content %}


<! -- Dialog boxes for editing -->

{% block dialogs %}
<div class="modal fade" id="editReasonModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Reason/Motivation</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
            <p>Use <a href="http://sphinx-doc.org/rest.html" target="_blank">reStructuredText</a> for formatting.</p>
            <textarea class="form-control" rows="10" id="reason">{{record.reason}}</textarea>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary" id="saveReason">Save</button>
      </div>
    </div> <!-- modal-content -->
  </div> <!-- modal-dialog -->
</div> <!-- modal -->

<div class="modal fade" id="editOutcomeModal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Outcome</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
            <p>Use <a href="http://sphinx-doc.org/rest.html" target="_blank">reStructuredText</a> for formatting.</p>
            <textarea class="form-control" rows="10" id="outcome">{{record.outcome}}</textarea>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary" id="saveOutcome">Save</button>
      </div>
    </div> <!-- modal-content -->
  </div> <!-- modal-dialog -->
</div> <!-- modal -->

<div class="modal fade" id="editTagsModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Tags</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
            <p>Separate tags with commas. Tags may contain spaces.</p>
            <input type="text" class="form-control" id="tag_list" value="{{record.tags}}">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary" id="saveTags">Save</button>
      </div>
    </div> <!-- modal-content -->
  </div> <!-- modal-dialog -->
</div> <!-- modal -->

<div class="modal fade" id="editStatusModal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Status</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <select id="status">
            {% with "initialized pre_run running finished failed killed succeeded crashed" as statuses %}
              {% for status in statuses.split %}
                <option value={{status}} 
                {% if status == record.status %}selected="selected"{% endif %}>
                  {{status|title}}
                </option>
              {% endfor %}  
            {% endwith %}
          </select>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary" id="saveStatus">Save</button>
      </div>
    </div> <!-- modal-content -->
  </div> <!-- modal-dialog -->
</div> <!-- modal -->

<div class="modal fade" id="deleteModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Delete record</h4>
      </div>
      <div class="modal-body">
        <p>Are you sure you want to delete this record?</p>
        <div class="form-group">
          <label>
              <input type="checkbox" id='is_data'> Delete associated data
          </label>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
        <button type="button" class="btn btn-primary" id="confirm-delete">Yes</button>
      </div>
    </div> <!-- modal-content -->
  </div> <!-- modal-dialog -->
</div> <!-- modal -->

{% endblock %}

<! -- Javascript -->

{% block scripts %}
    <script type="text/javascript" language="javascript" src="/static/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" language="javascript" src="/static/js/dataTables.bootstrap.js"></script>
    <script type="text/javascript">
$(document).ready(function() {
    /* Configure DataTable */
    var table = $('#output-data').dataTable( {
        "info": false,
        "paging": false,
        "ordering": false,
        "filter": false
    } );

    /* Save the reason/motivation */
    $('#saveReason').click(function() {
        $.ajax({
            type: 'POST',
            url: '.',
            data: {'reason': $('#reason').val()},
            success: function() {
                success = true;
            },
            async: false
        });
        if (success) {
            window.open('.','_self');
        };
    });

    /* Save the outcome */
    $('#saveOutcome').click(function() {
        $.ajax({
            type: 'POST',
            url: '.',
            data: {'outcome': $('#outcome').val()},
            success: function() {
                success = true;
            },
            async: false
        });
        if (success) {
            window.open('.','_self');
        };
    });

    /* Save tags */
    $('#saveTags').click(function() {
        $.ajax({
            type: 'POST',
            url: '.',
            data: {'tags': $('#tag_list').val()},
            success: function() {
                success = true;
            },
            async: false
        });
        if (success) {
            window.open('.','_self');
        };
    });

    /* Save status */
    $('#saveStatus').click(function() {
        $.ajax({
            type: 'POST',
            url: '.',
            data: {'status': $('#status').val()},
            success: function() {
                success = true;
            },
            async: false
        });
        if (success) {
            window.open('.','_self');
        };
    });

    /* Delete this record */
    $('#confirm-delete').click(function() {
        var success = false;
        var includeData = function(){
            if ($('#is_data').attr('checked')) {
                return true;
            } else {
                return false;
            };
        };
        var deleteArr = new Array(); // records to delete

        deleteArr.push('{{record.label}}');
        console.log(deleteArr);

        $.ajax({
            type: 'POST',
            url: '../delete/',
            data: {'delete': deleteArr,
                   'delete_data': includeData()},
            success: function() {
                success = true;
            },
            async: false
        });
        if (success) {
            window.open('..', '_self');
        };
    });
} );
    </script>
{% endblock %}

<!-- TODO: initialize input-data DataTable -->
