{% load static %}
{% load custom_tags_and_filters %}
{% block extrahead %}
    <script type="text/javascript" src="{% static "pickadate/picker.js" %}"></script>
    <script type="text/javascript" src="{% static "pickadate/picker.date.js" %}"></script>
    <script type="text/javascript" src="{% static "pickadate/picker.time.js" %}"></script>
    <link rel="stylesheet" type="text/css" href="{% static "pickadate/default.css" %}" />
    <link rel="stylesheet" type="text/css" href="{% static "pickadate/default.date.css" %}" />
    <link rel="stylesheet" type="text/css" href="{% static "pickadate/default.time.css" %}" />
{% endblock %}
<div class="row" style="margin-top:30px">
    <div class="col-xs-offset-3 col-xs-6"
         onclick="tool_information('{% url 'kiosk_tool_information' tool.id customer.id back %}')">
        <div class="alert alert-warning" style="text-align:center; margin-bottom:0; font-size:x-large">Go back</div>
    </div>
</div>
<h2>Post a comment</h2>
<h4>
    Use this form to comment on the operating status of the selected tool.
    The comment will be visible to everyone on the website for <strong>informational purposes</strong>.
    (Note: if there is something wrong with the tool then please report a problem instead of creating a comment).
    You may remove the comment at any time because you are its author.
</h4>
{% if message %}
    <div class="alert alert-danger">
        <h4>Please correct the following errors:</h4>
        <h4>{{ message }}</h4>
    </div>
{% endif %}
<form id="tool_post_comment" method="post">
    {% csrf_token %}
    <input type="hidden" name="back" value="{{ back }}">
    <input type="hidden" name="tool" value="{{ tool.id }}">
    <input type="hidden" name="customer_id" value="{{ customer.id }}">
    <div class="form-group">
        <label class="form-inline">
            How many days would you like the comment to be visible?
            <select name="expiration" id="expiration" class="form-control" style="width:250px;font-size:18px;" required>
                <option value="" disabled selected></option>
                <option value="1">1 day</option>
                <option value="7">7 days</option>
                <option value="30">30 days</option>
                <option value="60">60 days</option>
                <option value="90">90 days</option>
                <option value="-1">Indefinitely</option>
                {% if user.is_any_part_of_staff %}<option value="0">Not visible</option>{% endif %}
            </select>
        </label>
    </div>
    <div class="form-group">
        <label for="content-area">What would you like to say?</label>
        <textarea name="content" id="content-area" class="form-control" rows="6" required>{{form.content.value}}</textarea>
    </div>
    {% if user.is_staff %}
        <div class="form-group">
            <input type="checkbox" id="staff_only" name="staff_only" {% if form.staff_only.value %}checked{% endif %} />
            <label for="staff_only">Make this comment only visible to staff users</label>
        </div>
    {% endif %}
    <div class="form-group text-center" style="margin-top:40px">
        {% button type="save" submit=False style="text-align:center; margin-bottom:0; font-size:x-large" icon="glyphicon-send" onclick="post_comment()" value="Post comment" %}
    </div>
</form>
<script>
	$('#content-area').keyboard();
	$('#expiration option[value="{{form.expiration.value}}"]').prop('selected', true);

	revert(90);
</script>
