{% extends 'base.html' %}

{% block content %}

<div id="settings">
    <h1>Differences</h1>
    <form class="pure-form " action="" method="GET">
        <fieldset>
            {% if versions|length >= 1 %}
            <label for="diff-version">Compare newest (<span id="current-v-date"></span>) with</label>
            <select id="diff-version" name="previous_version">
                {% for version in versions %}
                <option value="{{version}}" {% if version== current_previous_version %} selected="" {% endif %}>
                    {{version}}
                </option>
                {% endfor %}
            </select>
            <button type="submit" class="pure-button pure-button-primary">Go</button>
            {% endif %}
        </fieldset>
    </form>

</div>

<div id="diff-ui">
  <img style="max-width: 100%" src="{{ url_for('render_diff_image', uuid=uuid, compare_date=current_previous_version) }}" />

    <div>
        <span style="width: 50%">
            <img style="max-width: 100%" src="{{ url_for('show_single_image', uuid=uuid, datestr=newest_version_timestamp) }}" />
        </span>
        <span style="width: 50%">
            <img style="max-width: 100%" src="{{ url_for('show_single_image', uuid=uuid, datestr=current_previous_version) }}" />
        </span>
    </div>
</div>


<script type="text/javascript" src="{{url_for('static_content', group='js', filename='diff.js')}}"></script>

<script defer="">
window.onload = function() {
    /* Set current version date as local time in the browser also */
    var current_v = document.getElementById("current-v-date");
    var dateObject = new Date({{ newest_version_timestamp }}*1000);
    current_v.innerHTML=dateObject.toLocaleString();

    /* Convert what is options from UTC time.time() to local browser time */
    var diffList=document.getElementById("diff-version");
    if (typeof(diffList) != 'undefined' && diffList != null) {
        for (var option of diffList.options) {
          var dateObject = new Date(option.value*1000);
          option.label=dateObject.toLocaleString();
        }
    }
}
</script>

{% endblock %}