{% extends popup_view|yesno:"base/popup.html,base.html" %}
{% load custom_tags_and_filters %}
{% load tz %}
{% if not popup_view %}
    {% block extrahead %}
        <script type="text/javascript">
    function callback_success(){
        // if on a standalone page, reload the browser window to display the results of the change to the outage
        location.reload()
    }

    function cancel_outage(url)
    {
        let failure_dialog = ajax_failure_callback("Unable to cancel this outage");
        ajax_post(url, undefined, callback_success, [failure_dialog, callback_success]);
    }

    function change_outage_title(url, title)
    {
        let failure_dialog = ajax_failure_callback("Unable to change outage title");
        ajax_post(url, {'title': title}, callback_success, [failure_dialog]);
    }

    function change_outage_details(url, details)
    {
        let failure_dialog = ajax_failure_callback("Unable to change outage details");
        ajax_post(url, {'details': details}, callback_success, [failure_dialog]);
    }

    function change_outage_date(url, outage_id, param, value)
    {
        let failure_dialog = ajax_failure_callback("Unable to change outage date");
        let data = {'id': outage_id};
        data[param] = value;
        ajax_post(url, data, callback_success, [failure_dialog]);
    }

        </script>
    {% endblock %}
{% endif %}
{% block title %}Scheduled outage details{% endblock %}
{% block content %}
    {% if not popup_view %}<h1>Scheduled outage details</h1>{% endif %}
    <table class="table table-striped" style="margin-bottom: 0">
        {% if user.is_staff or user|is_staff_on_tool:outage.tool %}
            <tr>
                <td>
                    <label for="outage_title" style="margin-bottom: 0">Title:</label>
                </td>
                <td>
                    <div id="outage_display_title" style="display: inline">
                        {{ outage.title }}
                        <span class="glyphicon glyphicon-pencil pull-right"
                              title="Change the outage title"
                              onclick="$('#outage_display_title').hide();$('#outage_change_title').css('display', 'inline');"></span>
                    </div>
                    <div id="outage_change_title" style="display: none">
                        <div class="input-group" style="display: inline-flex; vertical-align: middle">
                            <input type="text" id="outage_title" class="form-control" value="{{ outage.title }}">
                            <span class="input-group-btn">
                                <button type="button" class="btn btn-success" data-dismiss="modal" onclick="{% if popup_view %}$('#dialog').one('hidden.bs.modal', function() {
                                {% endif %}
                                change_outage_title('{% url 'change_outage_title' outage.id %}', $('#outage_title').val()) {% if popup_view %}}){% endif %}
                            ">Change title</button>
                    </span>
                </div>
            </div>
        </td>
    </tr>
{% else %}
    <tr>
        <td>Title:</td>
        <td>{{ outage.title }}</td>
    </tr>
{% endif %}
<tr>
    <td>Created by:</td>
    <td>{{ outage.creator }}</td>
</tr>
{% if outage.tool %}
    <tr>
        <td>Tool:</td>
        <td>{{ outage.tool }}</td>
    </tr>
{% endif %}
{% if outage.resource %}
    <tr>
        <td>Resource:</td>
        <td>
            {{ outage.resource }} <span class="light-grey">({{ outage.resource.category }})</span>
        </td>
    </tr>
{% endif %}
{% if outage.category %}
    <tr>
        <td>Outage category:</td>
        <td>{{ outage.category }}</td>
    </tr>
{% endif %}
<tr>
    {% if user|is_staff_on_tool:outage.tool and outage.has_not_ended and outage.has_not_started %}
        <td style="vertical-align: middle">
            <label for="outage_start" style="margin-bottom: 0">Start:</label>
        </td>
        <td id="outage_display_start">
            {{ outage.start }}
            <span class="glyphicon glyphicon-pencil pull-right"
                  title="Change the start date"
                  onclick="$('#outage_display_start').hide();$('#outage_change_start').show();"></span>
        </td>
        <td id="outage_change_start" style="display: none">
            <div class="input-group">
                <input type="text"
                       id="outage_start"
                       class="form-control"
                       value="{{ outage.start|localtime|input_date_format }}">
                <span class="input-group-btn">
                    <button type="button" class="btn btn-success" data-dismiss="modal" onclick="{% if popup_view %}$('#dialog').one('hidden.bs.modal', function() {
                    {% endif %}
                    change_outage_date('{% url 'change_outage_date' %}', {{ outage.id }}, 'new_start', $('#outage_start').val()) {% if popup_view %}}){% endif %}
                ">Change start</button>
        </span>
    </div>
</td>
{% else %}
<td>Start:</td>
<td>{{ outage.start }}</td>
{% endif %}
</tr>
<tr>
    {% if user|is_staff_on_tool:outage.tool and outage.has_not_ended and outage.has_not_started %}
        <td style="vertical-align: middle">
            <label for="outage_end" style="margin-bottom: 0">End:</label>
        </td>
        <td id="outage_display_end">
            {{ outage.end }}
            <span class="glyphicon glyphicon-pencil pull-right"
                  title="Change the end date"
                  onclick="$('#outage_display_end').hide();$('#outage_change_end').show();"></span>
        </td>
        <td id="outage_change_end" style="display: none">
            <div class="input-group">
                <input type="text"
                       id="outage_end"
                       class="form-control"
                       value="{{ outage.end|localtime|input_date_format }}">
                <span class="input-group-btn">
                    <button type="button" class="btn btn-success" data-dismiss="modal" onclick="{% if popup_view %}$('#dialog').one('hidden.bs.modal', function() {
                    {% endif %}
                    change_outage_date('{% url 'change_outage_date' %}', {{ outage.id }}, 'new_end', $('#outage_end').val()) {% if popup_view %}}){% endif %}
                ">Change end</button>
        </span>
    </div>
</td>
{% else %}
<td>End:</td>
<td>{{ outage.end }}</td>
{% endif %}
</tr>
{% if outage.reminder_days and outage.reminder_emails %}
    <tr>
        <td>Reminder day(s):</td>
        <td>{{ outage.reminder_days }}</td>
    </tr>
    <tr>
        <td>Reminder email(s):</td>
        <td>{{ outage.reminder_emails|join:', ' }}</td>
    </tr>
{% endif %}
<tr>
    <td>Identifier:</td>
    <td>{{ outage.id }}</td>
</tr>
{% if outage.details or user.is_staff or user|is_staff_on_tool:outage.tool %}
    {% if user.is_staff or user|is_staff_on_tool:outage.tool %}
        <tr>
            <td>
                <label for="outage_details" style="margin-bottom: 0">Details:</label>
            </td>
            <td id="outage_display_details">
                <span class="glyphicon glyphicon-pencil pull-right"
                      title="Change the outage details"
                      onclick="$('#outage_display_details').hide();$('#outage_change_details').show();auto_size_textarea(document.getElementById('outage_details'))"></span>
                {{ outage.details|linebreaksbr }}
            </td>
            <td id="outage_change_details" style="display: none">
                <div class="input-group" style="width: 100%;">
                    <textarea id="outage_details" class="form-control" oninput="auto_size_textarea(this);">{{ outage.details }}</textarea>
                    <span class="input-group-addon btn btn-success" style="color: #fff" data-dismiss="modal" onclick="{% if popup_view %}$('#dialog').one('hidden.bs.modal', function() {
                    {% endif %}
                    change_outage_details('{% url 'change_outage_details' outage.id %}', $('#outage_details').val()) {% if popup_view %}}){% endif %}
            ">Change details</span>
        </div>
    </td>
</tr>
{% else %}
<tr>
    <td>Details:</td>
    <td>{{ outage.details|linebreaksbr }}</td>
</tr>
{% endif %}
{% endif %}
</table>
{# Allow the user to cancel the outage if they have that privilege. only in popup view #}
{% if user.is_staff or user|is_staff_on_tool:outage.tool %}
    <div class="modal-footer" style="padding: 15px 0 0 0;">
        <button type="button" class="btn btn-danger" data-dismiss="modal" onclick="{% if popup_view %}$('#dialog').one('hidden.bs.modal', function() {
        {% endif %}
        cancel_outage('{% url 'cancel_outage' outage.id %}', 'Outage {{ outage.id }}'); {% if popup_view %}}){% endif %}
    ">Cancel this outage</button>
</div>
{% endif %}
{% endblock %}