{% 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 %}
			<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 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 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>
		<tr>
			<td>Identifier:</td>
			<td>{{ outage.id }}</td>
		</tr>
		{% if outage.details or user.is_staff %}
			{% if user.is_staff %}
				<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 %}
        <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 %}