{% extends 'layout-single.html' %}

{% block title %}Reported Plugin Errors{% endblock %}
{% block content %}

<div style="text-align: right; font-size: 85%">
    <a href="#" id="expandall">Expand All</a>
    <a href="#" id="collapseall">Collapse All</a>
</div>

<style type="text/css">
    .accordion2 tr td { padding: 0 5px; }
    .accordion2 { margin: 10px 0 }
    .accordion > h2, .accordion2 > h3 { cursor: pointer; border: 1px solid #EEE ; border-top: none; padding: 0 10px}
    .accordion > h2:first-child, .accordion2 > h3:first-child { border-top: 1px solid #EEE; }
    .accordion > h2:hover, .accordion2 > h3:hover, .accordion3 > h4:hover { background: #EEE; }
    .accordion > div, .accordion2 > div, .accordion3 > div { border: 1px solid #EEE; padding: 10px 20px}
    .accordion > h2.open, .accordion2 > h3.open, .accordion3 > h4.open { background: #EEE; }
</style>

<div class="accordion">
    {% for name, errors in plugerr %}
    <h2>{{ name }}</h2>
    <div>
        <div class="accordion2">
            {% for id, err in errors %}
            <h3>{{ id }} </h3>
            <div>
                <div class="accordion3">
                    <h4>List of hosts</h4>
                    <div>
                        {% for host in err['hosts'][1] %}
                        {{ host }}<br>
                        {% endfor %}
                    </div>
                </div>
                <table>
                    <tr>
                        <th>Error:</th>
                        <td>&nbsp;&nbsp;</td>
                        <td>{{ err['error'] }}</td>
                    </tr>
                    <tr>
                        <th>Hosts:</th>
                        <td>&nbsp;&nbsp;</td>
                        <td>{{ numfmt('%d', err['hosts'][0]) }}</td>
                    </tr>
                    {% if 'timeout' in err %}
                    <tr>
                        <th>Timeout:</th>
                        <td>&nbsp;&nbsp;</td>
                        <td>{{ tdfmt(err['timeout']) }}</td>
                    </tr>
                    {% else %}
                    <tr>
                        <th>Return code:</th>
                        <td>&nbsp;&nbsp;</td>
                        <td>{{ err['returncode'] }}</td>
                    </tr>
                    <tr>
                        <th>STDOUT:</th>
                        <td>&nbsp;&nbsp;</td>
                        <td><pre>{{ err['stdout'] }}</pre></td>
                    </tr>
                    <tr>
                        <th>STDERR:</th>
                        <td>&nbsp;&nbsp;</td>
                        <td><pre>{{ err['stderr'] }}</pre></td>
                    </tr>
                    {% endif %}
                </table>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endfor %}
</div>

<form id="mainform" method="GET">
<select name="deadline" id="deadline" style="font-size: 85%">
    {% for value, name, selected in deadlines %}
    <option value="{{value}}" {% if selected %} selected {% endif %}>{{ name }}</option>
    {% endfor %}
</select>
</form>

<script type="text/javascript">
    $(function() {
        $('.accordion > h2, .accordion2 > h3, .accordion3 > h4').click(function() {
            var v = $(this).next().toggle();
            if (v.is(':visible')) {
                $(this).addClass('open');
            } else {
                $(this).removeClass('open');
            };
            return false;
        }).each(function() {
            if (!$(this).hasClass('open')) {
                $(this).next().hide();
            }
        })
    });

    $(function() {
        $("#expandall").click(function() {
            $('.accordion > h2, .accordion2 > h3, .accordion3 > h4').each(function() {
                $(this).addClass('open');
                $(this).next().show();
            })
            return false;
        });
    });

    $(function() {
        $("#collapseall").click(function() {
            $('.accordion > h2, .accordion2 > h3, .accordion3 > h4').each(function() {
                $(this).removeClass('open');
                $(this).next().hide();
            })
            return false;
        });
    });

    $(function() {
        $("#deadline").change(function() {
            $("#mainform").submit()
        });
    });
</script>

{% endblock %}