{% load custom_tags_and_filters %}
<div class="alert alert-danger" role="alert">
    <span style="cursor:pointer"
          class="pull-right glyphicon glyphicon-chevron-down"
          data-toggle="collapse"
          data-target="#extended_outage_information_{{ outage.id }}"></span>
    <span style="cursor:pointer"
          data-toggle="collapse"
          data-target="#extended_outage_information_{{ outage.id }}"><strong>{{ outage.title }}</strong></span>
    <br>
    Starting {{ outage.start }}
    <br>
    Ending {{ outage.end }}
    <br>
    <div id="extended_outage_information_{{ outage.id }}" class="collapse">
        <div style="height:10px">{# Vertical spacer #}</div>
        Created by {{ outage.creator }}
        <br>
        {% if outage.details %}
            Details:
            <br>
            {{ outage.details|linebreaksbr }}
        {% endif %}
        {% if user.is_staff %}
            <div style="height:10px">{# Vertical spacer #}</div>
            <form method="post" action="{% url 'cancel_outage' outage.id %}">
                {% csrf_token %}
                {% button type="delete" submit=True value="Cancel this outage" %}
            </form>
        {% endif %}
    </div>
</div>
