<|start_filename|>sumatra/web/templates/data_list.html<|end_filename|>
{% extends "base.html" %}

{% load filters %}

{% block title %}{{project.id}}: List of data files{% endblock %}

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

{% block navbar %}
            <li><a href="#">{{project.id}}</a></li>
{% endblock %}

{% block content %}

{% if project.name %}
<h3>{{project.name}}</h3>
{% endif %}

<div class="btn-group" role="group">
    <a type="button" class="btn btn-default" href="/{{project.id}}/">Record View</a>
    <button type="button" class="btn btn-primary">Data View</button>
    <a type="button" class="btn btn-default" href="/{{project.id}}/image/">Image View</a>
    <a type="button" class="btn btn-default" href="/{{project.id}}/parameter">Parameter View</a>
    <a type="button" class="btn btn-default" href="/{{project.id}}/about/">About</a>
</div>


<table id="data-keys" class="table table-striped table-condensed" cellspacing="0" width="100%">
    <thead>
    <tr>
      <th>Directory</th>
      <th>Filename</th>
      <th>Digest</th>
      <th>Size</th>
      <th>Date/Time</th>
      <th>Output of</th>
      <th>Input to</th>
    </tr>
    </thead>

    <tbody>

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

    <tbody>
</table>

{% endblock %}

{% 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() {
    var table = $('#data-keys').dataTable( {
        "info": false,
        "dom": 'ftlp',
        "order": [[ 4, "desc" ]]
    } );

    $('#data-keys tbody').on( 'click', 'tr', function () {
        $(this).toggleClass('info');
    } );
} );
    </script>
{% endblock %}


<|start_filename|>sumatra/web/templates/data_detail_base.html<|end_filename|>
{% extends "base.html" %}

{% load filters %}

{% block title %}{{project_name}}: Data file: {{data_key.path}}{% endblock %}

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

{% block content %}

<!-- General information -->

<div class="panel panel-info">
    <div class="panel-heading">
        <h2 class="panel-title">{{data_key.path}} <small>{{data_key.digest}}</small> {{data_key.get_metadata.mimetype|default_if_none:"unknown"}} {{data_key.get_metadata.size|filesizeformat}}</h2>
    </div>
    <div class="panel-body">

        {% if data_key.output_from_record %}
        <p>Generated by <a href="/{{project_name}}/{{data_key.output_from_record.label}}/" class="label label-primary">{{data_key.output_from_record.label}}</a> on <b>{{data_key.output_from_record.timestamp|date:"d/m/Y"}}</b> at <b>{{data_key.output_from_record.timestamp|date:"H:i:s"}}</b></p>
        {% endif %}
        {% if data_key.input_to_records.count %}
        <p>Input to {% for record in data_key.input_to_records.all %}<a href="/{{project_name}}/{{record.label}}/" class="label label-primary">{{record.label}}</a> {% endfor %}</p>
        {% endif %}
        <p>{{data_key.get_metadata.description}}</p>

        {% block data %}
        <p>File contents cannot be shown.</p>
        {% endblock %}

    </div>
</div>


{% if truncated %}
    <p>File contents truncated. <a href="/{{project_name}}/data/datafile?path={{data_key.path|urlencode}}&digest={{data_key.digest}}&creation={{data_key.creation|date:"c"}}&truncate=false" class="btn btn-default">Show entire contents</a></p>
{% endif %}

<p><a href="/data/{{datastore_id}}?path={{data_key.path|urlencode}}&digest={{data_key.digest}}&creation={{data_key.creation|date:"c"}}" class="btn btn-default" type="{{data_key.get_metadata.mimetype|default_if_none:"application/unknown"}}" download="{{data_key.path}}">Download</a></p>
{% endblock content %}


<|start_filename|>sumatra/web/templates/record_comparison.html<|end_filename|>
{% extends "base.html" %}

{% load filters %}

{% block title %}{{project.id}}: comparison{% endblock %}

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

{% block navbar %}
            <li><a href="..">{{project.id}}</a></li>
            <li><a href="#">Comparison</a></li>
{% endblock %}

{% block content %}


<div class="panel panel-info">
    <div class="panel-heading clearfix">
        <h2 class="panel-title">Comparison of <i>{{diff.recordA.label}}</i> and <i>{{diff.recordB.label}}</i></h2>
    </div>
    {% if not diff %}
    <div class="panel-body">
        <div class="well well-sm">There are no differences in executable, code, parameters data between the records</div>
    </div>
    {% endif %}
</div>

<!-- Code -->

{% if diff.script_arguments_differ or diff.code_differs %}
<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a data-toggle="collapse" href="#code-panel">Code</a>
        </h4>
    </div>
    <div class="panel-body collapse in" id="code-panel">

        {% if diff.script_arguments_differ or diff.executable_differs or diff.main_file_differs %}
        <div class="well well-sm">
        <span class="label label-A">A</span> <code>$ {{diff.recordA.command_line}}</code>
        </div>
        <div class="well well-sm">
        <span class="label label-B">B</span> <code>$ {{diff.recordB.command_line}}</code>
        </div>
        {% endif %}

        {% if diff.code_differs %}
        <div class="row">
            <div class="col-md-6">
                <span class="label label-A">A</span>
            </div>
            <div class="col-md-6">
                <span class="label label-B">B</span>
            </div>
        </div>
        {% endif %}

        {% if diff.executable_differs %}
        <div class="row">
            <div class="col-md-6">
                {{diff.recordA.executable.name}} version {{diff.recordA.executable.version}}
            </div>
            <div class="col-md-6">
                {{diff.recordB.executable.name}} version {{diff.recordB.executable.version}}
            </div>
        </div>
        {% endif %}

        {% if diff.repository_differs %}
        <div class="row">
            <div class="col-md-6">
                {{diff.recordA.repository}} {% if diff.recordA.repository.upstream %}(upstream: {{diff.recordA.repository.upstream|urlize}}){% endif %}
            </div>
            <div class="col-md-6">
                {{diff.recordB.repository}} version diff.recordB.executable.version}} {% if diff.recordB.repository.upstream %}(upstream: {{diff.recordB.repository.upstream|urlize}}){% endif %}
            </div>
        </div>
        {% endif %}

        {% if diff.version_differs %}
        <div class="row">
            <div class="col-md-6">
                Version <strong>{{diff.recordA.version}}</strong>
            </div>
            <div class="col-md-6">
                Version <strong>{{diff.recordB.version}}</strong>
            </div>
        </div>
        {% endif %}

        {% ifequal diff.recordA.main_file diff.recordB.main_file %}
        <hr>
        <div class="row">
            <div class="col-md-6">
                {% for change,line in diff.recordA_script_content_diff %}
                <div style="background-color:{% if change == '+' %}YellowGreen{% elif change == '-' %}Salmon{% endif %}">
                    <span style="display: inline-block; width:30px">{{forloop.counter}}</span> {{ line }} </div>
                {% endfor %}
            </div>
            <div class="col-md-6">
                {% for change,line in diff.recordB_script_content_diff %}
                <div style="background-color:{% if change == '+' %}YellowGreen{% elif change == '-' %}Salmon{% endif %}">
                    <span style="display: inline-block; width:30px">{{forloop.counter}}</span> {{ line }} </div>
                {% endfor %}
            </div>
        </div>
        <hr>
        {% endifequal %}

        {% if diff.diff_differs %}
        <div class="row">
            <div class="col-md-6">
                <pre>{{diff.recordA.diff}}</pre>
            </div>
            <div class="col-md-6">
                <pre>{{diff.recordB.diff}}</pre>
            </div>
        </div>
        {% endif %}

        {% if diff.dependencies_differ %}
        <h5>Dependencies</h5>
        <table class="table">
            <tr><th>Name</th><th>Version in <span class="label label-A">A</span></th><th>Version in <span class="label label-B">B</span></th></tr>
            {% for name, dep in diff.dependency_differences.items %}
            <tr>
                <td>{{name}}</td>
                <td>{{dep.0.version|default:"-"}} {% if dep.0.diff %}<pre>dep.0.diff</pre> {% endif %}</td>
                <td>{{dep.1.version|default:"-"}} {% if dep.1.diff %}<pre>dep.1.diff</pre> {% endif %}</td>
            </tr>
            {% endfor %}
        </table>
        {% endif %}

    </div>
</div>
{% endif %}


<!-- Parameters -->

{% if diff.parameters_differ %}

<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">
        <div class="row">
            <div class="col-md-6">
            <span class="label label-A">A</span>
            {% with dict=diff.parameter_differences.0 template="nested_dict.html" %}
                {% include template %}
            {% endwith %}
            </div>
            <div class="col-md-6">
            <span class="label label-B">B</span>
            {% with dict=diff.parameter_differences.1 template="nested_dict.html" %}
                {% include template %}
            {% endwith %}
            </div>
        </div>
    </div>
</div>
{% endif %}


<!-- Input data -->

{% if diff.input_data_differ %}
<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">
        {% for keyA, keyB in input_data_pairs.matches %}
        <div class="row">
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                     <span class="label label-A">A</span>
                    {{keyA.path}} <small>{{keyA.digest}}</small> {{keyA.metadata.mimetype}} {{keyA.metadata.size|filesizeformat}}
                    </div>
                    {% if keyA.metadata.mimetype == 'image/png' or keyA.metadata.mimetype == 'image/jpeg' %}
                    <div class="panel-body">
                    <img src="/data/{{db_records.0.input_datastore.id}}?path={{keyA.path}}&digest={{keyA.digest}}&creation={{keyA.creation|date:"c"}}" alt="Image {{keyA.path}}" width="100%">
                    </div>
                    {% endif %}
                </div>
            </div>
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                    <span class="label label-B">B</span>
                    {{keyB.path}} <small>{{keyB.digest}}</small> {{keyB.metadata.mimetype}} {{keyB.metadata.size|filesizeformat}}
                    </div>
                    {% if keyB.metadata.mimetype == 'image/png' or keyB.metadata.mimetype == 'image/jpeg' %}
                    <div class="panel-body">
                    <img src="/data/{{db_records.1.input_datastore.id}}?path={{keyB.path}}&digest={{keyB.digest}}&creation={{keyB.creation|date:"c"}}" alt="Image {{keyB.path}}" width="100%">
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}

        {% if output_data_pairs.unmatched_a or output_data_pairs.unmatched_b %}
        <div class="row">
            <div class="col-md-6">
                <span class="label label-B">A</span>
                <ul>
                {% for data_key in output_data_pairs.unmatched_a %}
                    <li>{{data_key.path}} <small>{{data_key.digest}}</small> {{data_key.metadata.mimetype}} {{data_key.metadata.size|filesizeformat}}</li>
                {% endfor %}
                </ul>
            </div>
            <div class="col-md-6">
                <span class="label label-B">B</span>
                <ul>
                {% for data_key in output_data_pairs.unmatched_b %}
                    <li>{{data_key.path}} <small>{{data_key.digest}}</small> {{data_key.metadata.mimetype}} {{data_key.metadata.size|filesizeformat}}</li>
                {% endfor %}
                </ul>
            </div>
        {% endif %}
    </div>
</div>
{% endif %}

<!-- Output data -->

{% if diff.output_data_differ %}
<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">
        {% for keyA, keyB in output_data_pairs.matches %}
        <div class="row">
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                     <span class="label label-A">A</span>
                    {{keyA.path}} <small>{{keyA.digest}}</small> {{keyA.metadata.mimetype}} {{keyA.metadata.size|filesizeformat}}
                    </div>
                    {% if keyA.metadata.mimetype == 'image/png' or keyA.metadata.mimetype == 'image/jpeg' %}
                    <div class="panel-body">
                    <img src="/data/{{db_records.0.datastore.id}}?path={{keyA.path}}&digest={{keyA.digest}}&creation={{keyA.creation|date:"c"}}" alt="Image {{keyA.path}}" width="100%">
                    </div>
                    {% endif %}
                </div>
            </div>
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                    <span class="label label-B">B</span>
                    {{keyB.path}} <small>{{keyB.digest}}</small> {{keyB.metadata.mimetype}} {{keyB.metadata.size|filesizeformat}}
                    </div>
                    {% if keyB.metadata.mimetype == 'image/png' or keyB.metadata.mimetype == 'image/jpeg' %}
                    <div class="panel-body">
                    <img src="/data/{{db_records.1.datastore.id}}?path={{keyB.path}}&digest={{keyB.digest}}&creation={{keyB.creation|date:"c"}}" alt="Image {{keyB.path}}" width="100%">
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}

        {% if output_data_pairs.unmatched_a or output_data_pairs.unmatched_b %}
        <div class="row">
            <div class="col-md-6">
                <span class="label label-B">A</span>
                <ul>
                {% for data_key in output_data_pairs.unmatched_a %}
                    <li>{{data_key.path}} <small>{{data_key.digest}}</small> {{data_key.metadata.mimetype}} {{data_key.metadata.size|filesizeformat}}</li>
                {% endfor %}
                </ul>
            </div>
            <div class="col-md-6">
                <span class="label label-B">B</span>
                <ul>
                {% for data_key in output_data_pairs.unmatched_b %}
                    <li>{{data_key.path}} <small>{{data_key.digest}}</small> {{data_key.metadata.mimetype}} {{data_key.metadata.size|filesizeformat}}</li>
                {% endfor %}
                </ul>
            </div>
        {% endif %}
    </div>
</div>
{% endif %}

{% endblock content %}


<|start_filename|>sumatra/web/static/css/styles.css<|end_filename|>
body {
    padding-top: 75px;
}

div.container {
    width: 100%;
}

code {
    color: black;
}

#projectDescriptionPanel {
    margin-top: 20px;
}

.dl-horizontal dt{
    text-align: left;
    width: auto;
}

.navbar-inverse {
    background-color: #003300;
}

.selected {
    background-color: #60c0dc;
    text-color: white;
}

.label-A {
    background-color: orange;
}

.label-B {
    background-color: green;
}

ul.hierarchical {
    list-style-type: none;
}

<|start_filename|>sumatra/web/templates/diff_view.html<|end_filename|>
{% extends "base.html" %}

{% load filters %}

{% block title %}{{project_name}}: {{label}}: Difference in {{package}}{% endblock %}

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

{% block content %}

<div class="panel panel-info">
    <div class="panel-heading">
        <h2 class="panel-title">{{package}}: Difference between the code used in {{label}} and version {{parent_version}}</h2>
    </div>
    <div class="panel-body">
    <code>
    {{diff|escape|linebreaksbr}}
    </code>
    </div>
</div>

{% endblock %}


<|start_filename|>sumatra/web/templates/image_list.html<|end_filename|>
{% extends "base.html" %}

{% load filters %}

{% block title %}{{project.id}}: List of data files{% endblock %}

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

{% block navbar %}
            <li><a href="#">{{project.id}}</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">
                    <span class="glyphicon glyphicon-tag"></span>
                    <span id="tag-label">Tag</span>
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu" role="menu" id="tagList">
                    {% if tags %}
                        {% for tag in tags %}
                        <li id="id_tag_{{tag.name}}"><a data-target="#" value="{{tag.name}}" class="tag">{{tag.name}}</a></li>
                        {% endfor %}
                        <li role="presentation" class="divider"></li>
                        <li><a data-target="#" value="null" class="tag"><i>clear selection</i></a></li>
                    {% else %}
                    <li role="presentation" class="dropdown-header">No tags defined.</li>
                    {% endif %}
                </ul>
            </li>
{% endblock %}

{% block content %}

{% if project.name %}
<h3>{{project.name}}</h3>
{% endif %}

<div class="btn-group" role="group">
    <a type="button" class="btn btn-default" href="/{{project.id}}/">Record View</a>
    <a type="button" class="btn btn-default" href="/{{project.id}}/data/">Data View</a>
    <button type="button" class="btn btn-primary">Image View</button>
    <a type="button" class="btn btn-default" href="/{{project.id}}/parameter">Parameter View</a>
    <a type="button" class="btn btn-default" href="/{{project.id}}/about/">About</a>
</div>

<div role="group" class="pull-right" style="padding-left:2px">
    <button class="btn btn-default btn-sm active"><span class="glyphicon glyphicon-th-list"></span></button>
    <a href='/{{project.id}}/image/thumbgrid' type="button" class="btn btn-default btn-sm" id="layout">
        <span class="glyphicon glyphicon-th"></span>
    </a>
</div>

<table id="data-keys" class="table table-striped table-condensed" cellspacing="0" width="100%">
    <thead>
    <tr>
      <th>Date/Time</th>
      <th>Image</th>
      <th>Output of</th>
      <th>Reason</th>
      <th>Outcome</th>
      <!-- <th>Parameter</th> -->
      <th>Tags</th>
    </tr>
    </thead>

    <tbody>

    {% for data_key in data_keys %}
    <tr id="{{data_key.digest}}">
        <td>
            <span style='display:none;'>
              <!-- hack for correct sorting -->
                {{data_key.output_from_record.timestamp|date:"YmdHis"}}
            </span>
                {{data_key.output_from_record.timestamp|date:"d/m/Y H:i:s"}}
        </td>
        <td>
            <a href="/{{project.id}}/data/datafile?path={{data_key.path|urlencode}}&digest={{data_key.digest}}&creation={{data_key.creation|date:"c"}}" title="{{data_key.path|urlencode}}">
                <img src="/data/{{data_key.output_from_record.datastore.id}}?path={{data_key.path}}&digest={{data_key.digest}}&creation={{data_key.creation|date:"c"}}" style="width:250px">
            </a>
        </td>
        <td>
            <a href="/{{project.id}}/{{data_key.output_from_record.label}}/">
                {{data_key.output_from_record.label|ubreak}}
            </a>
        </td>
        <td title="{{data_key.output_from_record.reason}}">
            {{data_key.output_from_record.reason|truncatechars:400 }}
        </td>
        <td title="{{data_key.output_from_record.outcome}}">
            {{data_key.output_from_record.outcome|truncatechars:400 }}
        </td>
        <!-- <td>
            {{data_key.output_from_record.parameters.to_sumatra }}
        </td> -->
        <td id="id_button_tags">
            {% for tag in data_key.output_from_record.tag_objects %}
                <button class="btn btn-default btn-xs tag" value="{{tag}}">{{tag}}</button>
            {% endfor %}
        </td>
    </tr>
    {% endfor %}

    <tbody>
</table>

{% endblock %}

{% 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">

/* filter by tag */
var selected_tag = null;

$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
        if (selected_tag) {
        for (var i in settings.aoColumns) {
            if (settings.aoColumns[i].sTitle == 'Tags') {
                var tags = data[settings.aoColumns[i].idx].split(" ")
            }
        }
        return tags.indexOf(selected_tag) > -1
        }
        return true;
    }
);

$(document).ready(function() {
    $('#nav-image').addClass('active');

    var table = $('#data-keys').DataTable( {
        "info": false,
        "dom": 'ftlp',
        "order": [[ 0, "desc" ]]
    } );

    $('#data-keys tbody').on( 'click', 'tr', function () {
        $(this).toggleClass('info');
    } );

    /* select tag from dropdown menu and from tag button */
    $('body').on('click', '.tag', function () {
        $('button.tag').removeClass("active");
        $('#tagList li').removeClass('selected');
        $('#tag-label').html('');

        if ( selected_tag == $(this).attr('value') ) {
            selected_tag = 'null';
        } else {
            selected_tag = $(this).attr('value');
        }

        if (selected_tag == 'null') {
            selected_tag = null;
        } else {
            $("#tagList #id_tag_"+selected_tag).addClass('selected');
            $('#tag-label').html(selected_tag);
        }
        table.draw();
        $('button.tag[value='+ selected_tag+']').addClass("active");
        // $('button.tag').off('click', tag_click_event).on('click', tag_click_event);
    });
} );
    </script>
{% endblock %}


<|start_filename|>sumatra/web/templates/project_list.html<|end_filename|>
{% extends "base.html" %}

{% load filters %}

{% block title %}List of projects{% endblock %}

{% block content %}
    {% for project in projects %}
    <div class="well">
        <a href="/{{project.id}}/"><h3>{{project.get_name}}</h3></a>
        <span class="label label-info">{{project.record_set.count}} records</span>
        {% if project.description %}
        <hr>
        {{project.description|restructuredtext}}&nbsp;
        {% endif %}
    </div>
    {% endfor %}
{% endblock %}


<|start_filename|>sumatra/web/templates/parameter_list.html<|end_filename|>
{% extends "base.html" %}

{% load filters %}

{% block title %}{{project.id}}{{ main_file }}: List of parameters{% endblock %}

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

{% block navbar %}
            <li><a href="#">{{project.id}}</a></li>
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    <span class="glyphicon glyphicon-file"></span> {% if main_file %}{{main_file}}{% else %}Script file{% endif %}
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                {% for mainfile in  project.get_main_files %}
                  <li><a tabindex="-1" href="/{{project.id}}/parameter?main_file={{mainfile}}">{{mainfile}}</a></li>
                {% endfor %}
                </ul>
            </li>
{% endblock %}

{% block content %}

{% if project.name %}
<h3>{{project.name}}</h3>
{% endif %}

<div class="btn-group" role="group">
    <a type="button" class="btn btn-default" href="/{{project.id}}/">Record View</a>
    <a type="button" class="btn btn-default" href="/{{project.id}}/data/">Data View</a>
    <a type="button" class="btn btn-default" href="/{{project.id}}/image/">Image View</a>
    <button type="button" class="btn btn-primary">Parameter View</button>
    <a type="button" class="btn btn-default" href="/{{project.id}}/about/">About</a>
</div>

{% if main_file %}
    <table id="records" class="table table-striped table-condensed" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Label</th>
                <th>Date</th>
                <th>Version</th>
                {% for key in keys %}
                    <th>{{ key }}</th>
                {% endfor %}
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Date</th><th>Label</th><th>Version</th>
                {% for key in keys %}
                    <th>{{ key }}</th>
                {% endfor %}
            </tr>
        </tfoot>
        <tbody>
            {% for record in object_list %}
                <tr id='{{record.label}}'>
                    <td><a href="/{{project.id}}/{{record.label}}/">{{record.label|ubreak}}</a></td>
                    <td>
                        <span style='display:none;'>
                            <!-- hack for correct sorting -->
                            {{record.timestamp|date:"YmdHis"}}
                        </span>
                        {{record.timestamp|date:"d/m/Y H:i:s"}}
                    </td>
                    <td><a target="script_content" style='cursor:pointer'
                        onclick="window.open('/{{project.id}}/{{record.label}}/script','script_content','width=640,height=600,scrollbars=yes,resizable=yes')">
                        <span class="glyphicon glyphicon-file"></span></a> {{ record.version|truncatechars:12 }}</td>
                    {% for key in keys %}
                        <td>{{ record.parameters.to_sumatra|get_item:key }}</td>
                    {% endfor %}
                </tr>
            {% endfor %}
        </tbody>
    </table>

{% else %}
    <p style="margin:10px"> Please first select a script file. </p>
{% endif %}
{% endblock %}


{% 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() {
    $('#nav-parameter').addClass('active');


    /* initialize DataTable */
    var table = $('#records').DataTable({
        "info": false,
        "dom": 'ftlp',
        "order": [[ 1, "desc" ]],
    });

    // Setup - add a text input to each footer cell
    $('#records tfoot th').each( function () {
        var title = $('#records thead th').eq( $(this).index() ).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    });

    // Apply the search
    table.columns().every( function () {
        var that = this;
        $( 'input', this.footer() ).on( 'keyup change', function () {
            that.search( this.value ).draw();
        } );
    } );
});
</script>
{% endblock %}


<|start_filename|>sumatra/web/templates/record_detail.html<|end_filename|>
{% 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 -->


<|start_filename|>sumatra/web/templates/data_detail_csv.html<|end_filename|>
{% extends "data_detail_base.html" %}

{% block data %}
<table class="table table-striped">
    {% for row in reader %}
    <tr>
        {% if forloop.first %}
            {% for col in row %}<th>{{col}}</th>{% endfor %}
        {% else %}
            {% for col in row %}<td>{{col}}</td>{% endfor %}
        {% endif %}
    </tr>
    {% endfor %}
</table>



{% endblock %}


<|start_filename|>sumatra/web/templates/base.html<|end_filename|>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>{% block title %}{% endblock %}</title>

    <!-- Bootstrap core CSS -->
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom Sumatra styles -->
    <link href="/static/css/styles.css" rel="stylesheet">

    {% block css %}
    {% endblock %}
  </head>

  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/"><span class="glyphicon glyphicon-home"></span></a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            {% block navbar %}
            {% endblock %}
          </ul>
          <ul class="nav navbar-nav navbar-right">
            {% block navbar-right %}
            {% endblock %}
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container">

      {% block content %}

      {% endblock %}

    </div><!-- /.container -->

    {% block dialogs %}

    {% endblock %}

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    {% block scripts %}

    {% endblock %}
  </body>
</html>


<|start_filename|>sumatra/web/templates/nested_dict.html<|end_filename|>
<ul class="hierarchical">
{% for key, val in dict.items %}
    {% if val.items %}
    <li>{{key}}:
        {% with dict=val template="nested_dict.html" %}
            {% include template %}
        {% endwith %}
    </li>
    {% else %}
    <li>{{key}}: {{val}}</a></li>
    {% endif %}
{% endfor %}
</ul>

<|start_filename|>doc/exercises/Makefile<|end_filename|>
pdf:
	rst2latex.py --stylesheet=docutils.tex worksheet.txt worksheet.tex
	pdflatex worksheet; pdflatex worksheet

clean:
	rm -f *.aux *.log worksheet.pdf worksheet.tex *.out

