{% load custom_tags_and_filters %}
<div style="margin: 15px 0">
    <div style="display: table-cell; width: 100%">
        {% if staff_assistance_requests_description %}
            <div class="well" style="display: table; margin-right: 15px">
                <span class="requests-description-info glyphicon glyphicon-info-sign primary-highlight"></span>
                <div class="requests-description">{{ staff_assistance_requests_description|safe|linebreaksbr }}</div>
            </div>
        {% endif %}
    </div>
    <div class="text-right" style="display: table-cell; vertical-align: top">
        {% if not user.is_staff %}
            {% url 'create_staff_assistance_request' as create_staff_assistance_request_url %}
            {% button type="add" value="New request" data_toggle="modal" data_target="#requestModal" data_request_description="" data_request_url=create_staff_assistance_request_url data_request_action="Create" %}
        {% endif %}
    </div>
</div>
<!-- Modal -->
<div class="modal fade"
     id="requestModal"
     tabindex="-1"
     role="dialog"
     aria-labelledby="requestModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="requestModalLabel">New Request</h4>
            </div>
            <div class="modal-body">
                <form id="staffAssistanceRequestForm"
                      action="{% if form.instance.id %}{% url 'edit_staff_assistance_request' form.instance.id %}{% else %}{% url 'create_staff_assistance_request' %}{% endif %}"
                      method="post">
                    {% if form.non_field_errors %}<div class="alert alert-danger">{{ form.non_field_errors }}</div>{% endif %}
                    {% csrf_token %}
                    <div class="form-group">
                        <label for="description">Description</label>
                        {% if form.description.errors %}- <span style="color:red">{{ form.description.errors|striptags }}</span>{% endif %}
                        <textarea class="form-control"
                                  rows="3"
                                  name="description"
                                  id="description"
                                  style="resize: vertical"
                                  maxlength="{{ form.fields.description.max_length }}"
                                  placeholder="Describe your request"
                                  required>{{ form.description.value|default_if_none:"" }}</textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                {% button type="save" icon="glyphicon-send" value="Send" form="staffAssistanceRequestForm" id="staffAssistanceRequestFormSubmitButton" %}
            </div>
        </div>
    </div>
</div>
{% if open_staff_assistance_requests %}
    {% include 'requests/staff_assistance_requests/open_staff_assistance_requests.html' with staff_assistance_request_list=open_staff_assistance_requests %}
{% else %}
    <div class="italic" style="margin-top: 20px">There are no open staff assistance requests</div>
{% endif %}
{% if resolved_staff_assistance_requests %}
    <h3>
        <a onclick="toggle_details(this)"
           data-toggle="collapse"
           data-target="#resolved_staff_assistance_requests"
           class="pointer">
            <span class="glyphicon glyphicon-chevron-right pull-left chevron"></span>Resolved ({{ resolved_staff_assistance_requests|length }})
        </a>
    </h3>
    <div id="resolved_staff_assistance_requests" class="collapse">
        {% include 'requests/staff_assistance_requests/resolved_staff_assistance_requests.html' with staff_assistance_request_list=resolved_staff_assistance_requests %}
    </div>
{% endif %}
<script>
    $('#requestModal').on('show.bs.modal', function (event) {
        let button = $(event.relatedTarget);

        let description = button.data('request-description');
        let url = button.data('request-url');
        let action = button.data('request-action');

        let modal = $(this);
        modal.find('form').attr("action", url);
        modal.find('.modal-title').text(action + " Request");
        modal.find('#description').val(description);
    })

    function show_or_send_reply(button_element, form_selector)
    {
        let form_element = $('#'+form_selector)
        if (form_element.is(":visible"))
        {
            form_element.submit();
        }
        else
        {
            form_element.parents('li').fadeIn('50');
            form_element.children('textarea').focus();
            $(button_element).html('<i class="glyphicon glyphicon-send"></i> Send');
        }
    }
    function resolve(button_element, form_selector)
    {
        let form_element = $('#'+form_selector)
        if (form_element.is(":visible"))
        {
            form_element.submit();
        }
        else
        {
            form_element.parents('li').fadeIn('50');
            form_element.children('textarea').focus();
            $(button_element).html('<i class="glyphicon glyphicon-send"></i> Send');
        }
    }
    $(function ()
    {
        {# Scroll to msg id if available #}
        let msg_id = window.location.hash.substring(1);
        if (msg_id) document.getElementById(msg_id).scrollIntoView();

        $('[data-toggle="tooltip"]').tooltip();
    })
</script>
