{% extends "base.html" %}
{% block content %}
<section class="section">
    <h1 class="title">Firewall</h1>
    <div class="columns">
        <div class="column is-6">
            <div class="box">
                <h2 class="subtitle">Status</h2>
                <pre class="log-box">{{ status }}</pre>
                <div class="buttons mt-2">
                    <button class="button is-success" hx-post="/system/firewall/enable" hx-target="#fw-result">Enable</button>
                    <button class="button is-danger" hx-post="/system/firewall/disable" hx-target="#fw-result">Disable</button>
                </div>
            </div>
        </div>
        <div class="column is-6">
            <div class="box">
                <h2 class="subtitle">Add Rule</h2>
                <form hx-post="/system/firewall/allow" hx-target="#fw-result">
                    <div class="field has-addons">
                        <div class="control is-expanded">
                            <input class="input" name="port" placeholder="80 or 3000:3100" required>
                        </div>
                        <div class="control">
                            <div class="select">
                                <select name="protocol">
                                    <option value="tcp">tcp</option>
                                    <option value="udp">udp</option>
                                    <option value="">both</option>
                                </select>
                            </div>
                        </div>
                        <div class="control">
                            <button class="button is-success">Allow</button>
                        </div>
                    </div>
                </form>
                <form hx-post="/system/firewall/deny" hx-target="#fw-result" class="mt-2">
                    <div class="field has-addons">
                        <div class="control is-expanded">
                            <input class="input" name="port" placeholder="port number" required>
                        </div>
                        <div class="control">
                            <div class="select">
                                <select name="protocol">
                                    <option value="tcp">tcp</option>
                                    <option value="udp">udp</option>
                                    <option value="">both</option>
                                </select>
                            </div>
                        </div>
                        <div class="control">
                            <button class="button is-danger">Deny</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="box">
                <h2 class="subtitle">Delete Rule</h2>
                <form hx-post="/system/firewall/delete" hx-target="#fw-result">
                    <div class="field has-addons">
                        <div class="control is-expanded">
                            <input class="input" name="rule_num" placeholder="rule number (e.g. 3)" required>
                        </div>
                        <div class="control">
                            <button class="button is-warning">Delete</button>
                        </div>
                    </div>
                </form>
                <button class="button is-small mt-2" hx-get="/system/firewall/status" hx-target="#fw-result">Show numbered rules</button>
            </div>
        </div>
    </div>
    <div id="fw-result" class="mt-2"></div>
</section>
{% endblock %}