{% extends "template.html" %}
{% block extrahead %}
    <SCRIPT TYPE="text/javascript" SRC="/static/js/jquery-ui.min.js"></SCRIPT>
    <link rel="stylesheet" type="text/css" href="/static/css/jquery-ui.css" />
{% endblock %}
{% block breadcrumbs %}{{block.super}}<li>{{e.id}}</li>{% endblock %}
{% block content %}
<ul class="object-tools">
    <li><a href="#" onclick="return show_popup('JSON', '{% url fm:event:to_json e.id%}')">JSON</a></li>
    {% if e.status == "A" or e.status == "S" or e.status == "F" %}
    <li><a href="{% url fm:event:reclassify e.id%}">Reclassify</a></li>
{% endif %}
    <LI><A HREF="{% url fm:classificationrule:from_event e.id %}"class="addlink">Create Rule</A></LI>
</ul>
<style>
    div#s-toc ul, div#s-toc li{
        margin: 0px;
        padding: 0px;
        margin-right: 4px;
        display: inline;
        list-style: none;
    }
    
    .help-title {
        font-weight: bold;
        padding-left: 4px;
    }
    
    .help-text {
        padding-left: 12px;
        padding-bottom: 8px;
        white-space: pre;
    }
    
    .mib-help {
        float: right;
    }
    
    #tabs-overview #subject-row {
        width: 100%;
    }
    
    #tabs-overview #subject-row #subject-label {
        font-weight: bold;
        display: inline;
    }
    
    #tabs-overview #subject-row #subject {
        display: inline;
    }
    
    #tabs-overview #body {
        width: 100%;
        border-top: 1px solid #c0c0c0;
        white-space: pre;
    }
    
    #tabs-data .data-key {
        font-weight: bold;
        width: 200px;
    }
    
    .v-caption {
        font-weight: bold;
        background-color: #c0c0c0;
    }
</style>
<script type="text/javascript">
    function toggle_module(m_selector, l_selector) {
        var $m = $(m_selector);
        var $l = $(l_selector);
        
        if ($m.is(":hidden")) {
            $l.html("[Hide]");
            $m.show();
        } else {
            $l.html("[Show]");
            $m.hide();
        }
        return false;
    }
</script>
<h1>Event #{{e.id}}: {{subject}}</h1>
<div class="module">
    <a name="summary"></a>
    <h2>Summary</h2>
    <table WIDTH="100%">
        <tr><TD STYLE="width: 150px"><b>Managed Object:</b></td><td>{{e.managed_object.name}} {% if e.managed_object.platform %}({{e.managed_object.platform}}){% endif %}</td></tr>
        {% if e.status == 'A' or e.status == 'C' %}
        <tr><td><b>Event Class:</b></td><td>{{e.event_class}}</td></tr>
        {% endif %}
        <tr><td><b>Event Status:</b></td>
            <td>
                {% if e.status == "N" %}New{% endif %}
                {% if e.status == "A" %}Active{% endif %}
                {% if e.status == "S" %}Archived{% endif %}
                {% if e.status == "F" %}Failed{% endif %}
            </td>
        </tr>
        <tr><td><b>Time:</b></td><td>{{e.timestamp}}</TD</tr>
    </table>
</div>

<div class="module" id="tabs">
    <ul style="height:25pt">
        {% if e.status == 'A' or e.status == 'S' %}
            <li><a href="#tabs-overview">Overview</a></li>
        {% endif %}
        {% if syptoms or probable_causes or recommended_actions %}
            <li><a href="#tabs-help">Help</a></li>
        {% endif %}
        <li><a href="#tabs-data">Data</a></li>
        {% if e.status == "F" %}
            <li><a href="#tabs-traceback">Traceback</a></li>
        {% endif %}
        {% if alarms %}
            <li><a href="#tabs-alarms">Alarms({{n_alarms}})</a></li>
        {% endif %}
        <li><a href="#tabs-log">Log</a></li>
    </ul>

    {% if e.status == 'A' or e.status == 'C' %}    
        <div id="tabs-overview">
            <div id="subject-row">
                <div id="subject-label">Subject:</div>
                <div id="subject">{{subject}}</div>
            </div>
            <div id="body">{{body}}</div>
        </div>
    {% endif %}
    
    {% if syptoms or probable_causes or recommended_actions %}
        <div id="tabs-help">
            {% if symptoms %}
                <div class="help-title">Symptoms:</div>
                <div class="help-text">{{symptoms}}</div>
            {%endif%}
            
            {% if probable_causes %}
                <div class="help-title">Probable causes:</div>
                <div class="help-text">{{probable_causes}}</div>
            {%endif%}
            
            {% if recommended_actions %}
                <div class="help-title">Recommended actions:</div>
                <div class="help-text">{{recommended_actions}}</div>
            {%endif%}    
        </div>
    {% endif %}
    
    <div id="tabs-data">
        <table width="100%">
            {% if e.status == "A" or e.status == "S" %}
                <tr class="v-caption"><td colspan="2">Event Variables</td></tr>
                {% for k, v in e.vars.items %}
                    <tr class="{% cycle 'row1' 'row2' %}">
                        <td class="data-key">{{k}}</td>
                        <td>{{v}}</td>
                    </tr>
                {% endfor %}
                <tr class="v-caption"><td colspan="2">Resolved Variables</td></tr>
                {% for k, v in e.resolved_vars.items %}
                    <tr class="{% cycle 'row1' 'row2' %}">
                        <td class="data-key">{{k}}</td>
                        <td>{{v}}{% if "::" in k %}<a href="#" class="mib-help" onclick="return show_popup('MIB Help', '{% url fm:mib:help k%}');"><img src="/media/img/admin/selector-addall.gif" title="Show MIB help"/></a>{% endif %}</td>
                    </tr>
                {% endfor %}
            {% endif %}
            <tr class="v-caption"><td colspan="2">Raw Variables</td></tr>
            {% for k, v in e.raw_vars.items %}
                <tr class="{% cycle 'row1' 'row2' %}">
                    <td class="data-key">{{k}}</td>
                    <td>{{v}}</td>
                </tr>
            {% endfor %}
        </table>
    </div>

    {% if e.status == "F" %}
        <div id="tabs-traceback">
            <table border="0" width="100%">
                <tr>
                    <td><b>NOC version</b></td>
                    <td>{{e.version}}</td>
                </tr>
                <tr>
                    <td><b>Traceback</b></td>
                    <td><pre>{{e.traceback}}</pre></td>
                </tr>
        </div>
    {% endif %}
    
    {% if alarms %}
        <div id="tabs-alarms">
            <table border="0" width="100%">
                <thead>
                </thead>
                {% for a_id, a_class, ts, duration, subject in alarms %}
                    <tr>
                        <td><a href="{% url fm:alarm:alarm a_id %}">{{a_id}}</a></td>
                        <td>{{a_calss}}</td>
                        <td>{{ts}}</td>
                        <td>{{duration}}</td>
                        <td>{{subject}}</td>
                    </tr>
                {% endfor %}
            </table>
        </div>
    {% endif %}
    <div id="tabs-log">
        <table width="100%">
            <thead>
                <tr><th>Timestamp</th><th>Status</th><th>Message</th></tr>
            </thead>
            {% for l in e.log %}
                <tr class="{% cycle 'row1' 'row2' %}">
                    <td>{{l.timestamp}}</td>
                    <td>{{l.from_status}} -&gt; {{l.to_status}}</td>
                    <td>{{l.message}}</td>
                </tr>
            {% endfor %}
            <tr>
                <td colspan="5">
                    <b>Post a message:</b><br/>
                    <form action="{% url fm:event:message e.id %}" method="POST" id="message_form">{% csrf_token %}
                        <textarea id="id_message" name="message" rows="5" cols="80"></textarea><br/>
                        <input type="submit" value="Post message" />
                    </form>
                </td>
        </table>
    </div>
</div>

<script>
    $(document).ready(function(){
        $("#e_priority").corner();
        $("#tabs").tabs();
    });
</script>
{%endblock%}