{% extends "admin/base_site.html" %}
{% load markup humanize %}


{% block coltype %}colMS{% endblock %}


{% block extrahead %}
    {{block.super}}
    <style type="text/css">
    /* css for timepicker */
    .ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; }
    .ui-timepicker-div dl{ text-align: left; }
    .ui-timepicker-div dl dt{ height: 25px; }
    .ui-timepicker-div dl dd{ margin: 0px 0 10px 65px; }
    .ui-timepicker-div td { font-size: 90%; }
    </style>
{% endblock extrahead %}


{% block content %}
<div id="content-main">
<h1>Date-shifting observations for: <a href="{%url 'admin:signalbox_membership_change' membership.id%}">{{membership}}</a></h1>



{% if not membership.observations %}
    <h3>No observations available to shift</h3>
{% else %}



    <table>


        <tr>
            <td width=55%>
            <h2>Current randomisation date: {{membership.date_randomised|naturalday}}</h2>
                    <form action="." method="POST" >
                        {% csrf_token %}
                        {{form.as_p}}
                        <p><input type="submit" value="Shift &rarr;"></p>
                    </form>

            </td>

            <td>
                <h4>Observations affected:</h4>

                <ul>
                     {% for i in membership.observations %}
                        {% if not i.timeshift_allowed %}<s>{%endif%}
                            <li>{{i.due.time}} {{i.due|naturalday}}: {{i.script}}</li>
                        {% if not i.timeshift_allowed %}</s>{%endif%}
                     {% endfor %}
                </ul>
            </td>

            </tr>



    </table>

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

{% block sidebar %}
<div id="content-related">

<div class="module">
       <h2>Information on date shifting</h2>

       <ul>
       <li>Only observations without participant data be time-shifted using this form.</li>
       <li>Complete or failed observations will appear with a strikethough and will not be changed.</li>
       <li>Be really careful with this form, and think what the effects will be on the final data to be
       exported before you do anything</li>
       <li>REMEMBER - this will not change any observations for which replies already exist.
       HOWEVER - and this important - changing the randomisation date when some observations have data might mean that
       estimates for how long the user had been in the study when the data was collected would be
       inaccurate.</li>
       </ul>

       </div>

</div>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#id_new_randomised_date').datepicker({ dateFormat: "dd/mm/yy" });
        });
    </script>


{% endblock %}


