{% extends 'base.html' %}
{% load i18n %}

{% block page_custom_head %}
    <style>
        .first-line-container {
            display: flex;
            align-items: center;
            width: 100%;
        }

        .more-link {
            margin-left: auto;
            text-decoration: none;
        }

        .more-text {
            display: none;
            width: 100%;
        }

        .fw_automatic_rule {
            display: none;
        }

    </style>
{% endblock%}

{% block content %}

    <div class="card card-primary card-outline">
        <div class="card-body">
            {% include "firewall/firewall_nav_tabs.html" %}
            <div class="tab-content" id="custom-content-below-tabContent">
                <div class="tab-pane fade show active" id="custom-content-below-home" role="tabpanel" aria-labelledby="custom-content-below-home-tab">
                    <table class="table table-striped table-hover">
                        <thead>
                        <th>#</th>
                        <th><i class="fas fa-info-circle"></i></th>
                        <th>{% trans 'In' %}</th>
                        <th>{% trans 'Out' %}</th>
                        <th>{% trans 'Source' %}</th>
                        <th>{% trans 'Destination' %}</th>
                        <th>{% trans 'Protocol' %}</th>
                        <th>{% trans 'Port' %}</th>
                        <th>{% trans 'State' %}</th>
                        <th>{% trans 'Action' %}</th>
                        <th><i class="far fa-edit"></i></th>
                        </thead>
                        <tbody>
                        <tr class="fw_automatic_rule">
                            <td>-</td>
                            <td><i class="fas fa-info-circle" title="{% trans 'Automatic rule: Allow established/related traffic' %}"></i></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>{% trans 'all' %}</td>
                            <td></td>
                            <td>{% trans 'Related' %}<br>
                                {% trans 'Established' %}
                            </td>
                            <td>{% trans 'ACCEPT' %}</td>
                            <td></td>
                        </tr>

                        {% for rule in port_forward_list %}
                            {% if rule.add_forward_rule and current_chain == 'forward' %}
                                <tr class="fw_automatic_rule">
                                    <td>-</td>
                                    <td><i class="fas fa-info-circle" title="{% trans 'Automatic Rule: Port forward.' %} {{ rule.description|default_if_none:'' }}"></i></td>
                                    <td>{{ firewall_settings.wan_interface }}</td>
                                    <td>wg{{ rule.wireguard_instance.instance_id }}</td>
                                    <td></td>
                                    <td>
                                        {% if rule.ip_address %}
                                            {{ rule.ip_address }}
                                        {% elif rule.peer %}
                                            {{ rule.peer }}
                                        {% endif %}
                                    </td>
                                    <td>{{ rule.get_protocol_display }}</td>
                                    <td>
                                        {% if rule.port_forward %}
                                            {{ rule.port_forward }}
                                        {% else %}
                                            {{ rule.port }}
                                        {% endif %}
                                    </td>
                                    <td></td>
                                    <td>{% trans 'ACCEPT' %}</td>
                                    <td></td>
                                </tr>
                            {% elif rule.masquerade_source and current_chain == 'postrouting' %}
                                <tr class="fw_automatic_rule">
                                    <td>-</td>
                                    <td><i class="fas fa-info-circle" title="{% trans 'Automatic Rule: Port forward.' %} {{ rule.description|default_if_none:'' }}"></i></td>
                                    <td></td>
                                    <td>wg{{ rule.wireguard_instance.instance_id }}</td>
                                    <td></td>
                                    <td>
                                        {% if rule.ip_address %}
                                            {{ rule.ip_address }}
                                        {% elif rule.peer %}
                                            {{ rule.peer }}
                                        {% endif %}
                                    </td>
                                    <td>{{ rule.get_protocol_display }}</td>
                                    <td>
                                        {% if rule.port_forward %}
                                            {{ rule.port_forward }}
                                        {% else %}
                                            {{ rule.port }}
                                        {% endif %}
                                    </td>
                                    <td></td>
                                    <td>MASQUERADE</td>
                                    <td></td>
                                </tr>
                            {% endif %}
                        {% endfor %}

                        {% for rule in firewall_rule_list %}
                            <tr>
                                <td style="width: 1%; white-space: nowrap;">{{ rule.sort_order }}</td>
                                <td style="width: 1%; white-space: nowrap;">{% if rule.description %}<i class="fas fa-info-circle" title="{{ rule.description }}"></i>{% endif %}</td>
                                <td>{{ rule.in_interface|default_if_none:'' }}</td>
                                <td>{{ rule.out_interface|default_if_none:'' }}</td>
                                <td>
                                    {% if rule.source_ip %}{% if rule.not_source %}<span title="Not source">!</span> {% endif %}{{ rule.source_ip }}/{{ rule.source_netmask }}<br>{% endif%}
                                    {% for peer in rule.source_peer.all %}{% if rule.not_source %}<span title="Not source">!</span> {% endif %}{{ peer }}{% if rule.source_peer_include_networks %} <span title="Include peer networks">+</span>{% endif %}<br>{% endfor %}

                                </td>
                                <td>
                                    {% if rule.destination_ip %}{% if rule.not_destination %}<span title="Not destination">!</span> {% endif %}{{ rule.destination_ip }}/{{ rule.destination_netmask }}<br>{% endif%}
                                    {% for peer in rule.destination_peer.all %}{% if rule.not_destination %}<span title="Not destination">!</span> {% endif %}{{ peer }}{% if rule.destination_peer_include_networks %} <span title="Include peer networks">+</span>{% endif %}<br>{% endfor %}
                                </td>
                                <td>{% if rule.protocol %}{{ rule.get_protocol_display }}{% else %}{% trans 'all' %}{% endif %}</td>
                                <td>{{ rule.destination_port|default_if_none:'' }}</td>
                                <td>
                                    {% if rule.state_new %}{% if rule.not_state %}<span title="Not state">! </span>{% endif %}{% trans 'New' %}<br>{% endif %}
                                    {% if rule.state_related %}{% if rule.not_state %}<span title="Not state">! </span>{% endif %}{% trans 'Related' %}<br>{% endif %}
                                    {% if rule.state_established %}{% if rule.not_state %}<span title="Not state">! </span>{% endif %}{% trans 'Established' %}<br>{% endif %}
                                    {% if rule.state_invalid %}{% if rule.not_state %}<span title="Not state">! </span>{% endif %}{% trans 'Invalid' %}<br>{% endif %}
                                    {% if rule.state_untracked %}{% if rule.not_state %}<span title="Not state">! </span>{% endif %}{% trans 'Untracked' %}<br>{% endif %}
                                </td>
                                <td>{{ rule.get_rule_action_display }}</td>
                                <td style="width: 1%; white-space: nowrap;">
                                    <a href="/firewall/manage_firewall_rule/?uuid={{ rule.uuid }}" ><i class="far fa-edit"></i></a>
                                </td>
                            </tr>
                        {% endfor %}

                        {% if current_chain == 'forward' %}
                            {% for wireguard_instance in wireguard_instances %}
                                <tr class="fw_automatic_rule">
                                    <td>-</td>
                                    <td><i class="fas fa-info-circle" title="{% trans 'Automatic Rule: Firewall Settings Peer to Peer traffic' %}"></i></td>
                                    <td>wg{{ wireguard_instance.instance_id }}</td>
                                    <td>wg{{ wireguard_instance.instance_id }}</td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td>
                                        {% if firewall_settings.allow_peer_to_peer %}
                                            {% trans 'ACCEPT' %}
                                        {% else %}
                                            {% trans 'REJECT' %}
                                        {% endif %}
                                    </td>
                                    <td></td>
                                </tr>
                            {% endfor %}

                            <tr class="fw_automatic_rule">
                                <td>-</td>
                                <td><i class="fas fa-info-circle" title="{% trans 'Automatic Rule: Firewall Settings Instance to Instance' %}"></i></td>
                                <td>wg+</td>
                                <td>wg+</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td>{% if firewall_settings.allow_instance_to_instance %}{% trans 'ACCEPT' %}{% else %}{% trans 'REJECT' %}{% endif %}</td>
                                <td></td>
                            </tr>
                        {% endif %}
                        </tbody>
                    </table>

                    <a href="/firewall/manage_firewall_rule/?chain={{ current_chain }}" class='btn btn-primary'>{% trans 'Create Firewall Rule' %}</a>
                    <a href="/firewall/firewall_settings/?chain={{ current_chain }}" class='btn btn-outline-primary'>{% trans 'Firewall Settings' %}</a>
                    <a class='btn btn-outline-primary' onclick=$('.fw_automatic_rule').slideToggle();>{% trans 'Display automatic rules' %}</a>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block custom_page_scripts %}
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            document.querySelectorAll('td').forEach(function(td) {
                let brCount = (td.innerHTML.match(/<br>/g) || []).length;

                if (brCount >= 2) {
                    let contentParts = td.innerHTML.split('<br>');
                    let firstLineContainer = `<div class="first-line-container">${contentParts[0]}<a href="#" class="more-link">more</a></div>`;

                    td.innerHTML = firstLineContainer +
                        '<span class="more-text" style="display: none;">' +
                        contentParts.slice(1).join('<br>') + '</span>';
                }
            });

            document.querySelectorAll('.more-link').forEach(function(link) {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    let moreText = this.parentNode.nextElementSibling;
                    if (moreText.style.display === "none") {
                        moreText.style.display = "inline";
                        this.textContent = "less";
                    } else {
                        moreText.style.display = "none";
                        this.textContent = "more";
                    }
                });
            });
        });
    </script>

{% endblock %}