{% import 'languages/'+lang|default('en')+'.html' as lang %}
{% from 'include/input_macros.html' import input, checkbox, copy_to_clipboard %}
{% set thead = ' <thead>
<tr class="overviewHead">
    <th class="padding10" style="padding-left: 10px; width: 50px;">'+lang.words.number|title()+'</th>
    <th>'+lang.words.target|title()+'</th>
    <th>'+lang.words.protocol|title()+'</th>
    <th>'+lang.words.source|title()+'</th>
    <th>'+lang.words.dest|title()+'</th>
    <th>'+lang.words.port|title()+'</th>
</tr>
</thead>' %}
<div id="firewall_tabs">
    <ul>
        <li><a href="#input" title="Input firewall rules">{{lang.words.w_input|title()}}</a></li>
        <li><a href="#IN_public_allow" title="IN_public_allow firewall rules">IN_public_allow</a></li>
        <li><a href="#output" title="Output firewall rules">{{lang.words.output|title()}}</a></li>
    </ul>
    <div id="input">
        <table class="overview">
           {{thead|safe}}
            <tbody>
            {% for p in input_chain %}
            <tr class="{{ loop.cycle('odd', 'even') }}">
                <td class="padding10" style="padding-left: 10px;">
                    {{p.split(' ')[0]}}
                </td>
                <td>
                    {{p.split(' ')[1]}}
                </td>
                <td>
                    {{p.split(' ')[2]}}
                </td>
                <td>
                    {{p.split(' ')[4]}}
                </td>
                <td>
                    {{p.split(' ')[5]}}
                </td>
                <td>
                    {{p.split(' ')[7]}}
                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
    <div id="IN_public_allow">
        <table class="overview">
            {{thead|safe}}
            <tbody>
            {% for p in IN_public_allow %}
            <tr class="{{ loop.cycle('odd', 'even') }}">
                <td class="padding10" style="padding-left: 10px;">
                    {{p.split(' ')[0]}}
                </td>
                <td>
                    {{p.split(' ')[1]}}
                </td>
                <td>
                    {{p.split(' ')[2]}}
                </td>
                <td>
                    {{p.split(' ')[4]}}
                </td>
                <td>
                    {{p.split(' ')[5]}}
                </td>
                <td>
                    {{p.split(' ')[7]}}
                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
    <div id="output">
        <table class="overview">
            {{thead|safe}}
            <tbody>
            {% for p in output_chain %}
            <tr class="{{ loop.cycle('odd', 'even') }}">
                <td class="padding10" style="padding-left: 10px;">
                    {{p.split(' ')[0]}}
                </td>
                <td>
                    {{p.split(' ')[1]}}
                </td>
                <td>
                    {{p.split(' ')[2]}}
                </td>
                <td>
                    {{p.split(' ')[4]}}
                </td>
                <td>
                    {{p.split(' ')[5]}}
                </td>
                <td>
                    {{p.split(' ')[7]}}
                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>
<div class="alert alert-warning">{{lang.phrases.fwd_warn}}</div>
<script>
    $( function() {
        $("#firewall_tabs").tabs();
    });
</script>
<style>
    #firewall_tabs {
        border: none !important;
        width: 100% !important;
    }
</style>