{% extends "base.html" %}
{% block body %}
<script src="/static/js/index.js"></script>
<!--suppress HtmlUnknownTarget -->
<div class="main-wrapper">
    <div class="fixed-width-wrapper">
        <table class="summary" >
            <tr class="summary-header">
                <td> <div class="main-title">boofuzz Fuzz Control</div> </td>
                <td align=right>
                    {% if state.session.is_paused %}
                        <div id="is_paused_indicator" class="paused" >paused</div>
                    {% else %}
                        <div id="is_paused_indicator" class="running" >running</div>
                    {% endif %}
                </td>
            </tr>
            <tr class="summary-content"> <td colspan=2 align="center"> <table>
                <tr>
                    <td class="summary-content-row-header-text">Total:</td>
                    <td id="current_index"> {{ state.total_mutant_index }} </td>
                    <td> of </td>
                    {% if state.total_num_mutations is not none %}
                        <td id="num_mutations"> {{ state.total_num_mutations }} </td>
                        <td class="fixed" id="progress_bar_total"> {{ state.progress_total_bar | safe }} </td>
                        <td id="progress_percentage_total"> {{ state.progress_total }} </td>
                    {% else %}
                        <td id="num_mutations">many</td>
                        <td class="fixed" id="progress_bar_total"> </td>
                        <td id="progress_percentage_total"> </td>
                    {% endif %}
                </tr>
                <tr>
                    <td id="current_element" class="summary-content-row-header-text"> {{ state.current_name }}: </td>
                    <td id="current_index_element"> {{ state.current_mutant_index }} </td>
                    <td> of </td>
                    <td id="num_mutations_element"> {{ state.current_num_mutations }} </td>
                    <td id="progress_bar_element" class="fixed"> {{ state.progress_current_bar | safe }} </td>
                    <td id="progress_percentage_element"> {{ state.progress_current }} </td>
                </tr>
                <tr>
                    <td class="summary-content-row-header-text">run time</td>
                    <td id="run_time"> {{ state.session.runtime | round | int }} sec</td>
                </tr>
                <tr>
                    <td class="summary-content-row-header-text">exec speed</td>
                    <td id="exec_speed"> {{ state.session.exec_speed | round(1) }}/sec</td>
                </tr>
                <tr>
                    <td class="summary-content-row-header-text">current</td>
                    <td id="current_test_case_name" colspan="5"> {{ state.session.current_test_case_name }} </td>
                </tr>
            </table> </td> </tr>
            <tr> <td>
                <form method=get action="/togglepause">
                    {% if state.session.is_paused %}
                        <input class="input" type="submit" value="Resume">
                    {% else %}
                        <input class="input" type="submit" value="Pause">
                    {% endif %}
                </form>
            </td> </tr>
        </table>

        <table class="summary" id="crash-summary-table"  width="100%">
            <tr class="summary-header">
                <td nowrap>Test Case #</td>
                <td>Crash Synopsis</td>
            </tr>
            {% for crash in crashes %}
                <tr>
                    <td class="fixed"> <span class="link"> {{crash.key}} </span> </td>
                    <td> {% for reason in crash.reasons %} <div>{{reason}}</div> {% endfor %} </td>
                    <!--<td align=right> {{crash.status_bytes}} </td>-->
                </tr>
            {% endfor %}
        </table>
        <header class="test-case-log-header">
            <h2 class="test-case-log-title">Test Case Log: <span id="test-case-log-title-index"></span></h2>
            <div class="test-case-log-input-area">
                <div class="test-case-log-input-center">
                    <span><button id="test-case-log-left" class="input"> <div> <i class="arrow left"></i> </div> </button></span>
                    <span><input type="text" class="test-case-log-index-input" id="test-case-log-index-input"/></span>
                    <span><button  id="test-case-log-right" class="input"> <i class="arrow right"></i> </button></span>
                    <span><label><input type="checkbox" checked id="test-case-log-snap"/>snap to current test case</label></span>
                </div>
            </div>
        </header>
    </div>
    <div class="log-wrapper">
        <table class="test-steps" id="test-steps-table"> </table>
    </div>
</div>
{% endblock %}