{% extends "base.html" %}

{% block title %}Internet Access Routing Policy - Enterprise VPN Hub{% endblock %}

{% block content %}
<div style="margin-bottom: 1.5rem;">
    <h1 style="font-size: 1.6rem; font-weight: 700;">Internet Access Routing Policy</h1>
    <p style="color: var(--text-muted); font-size: 0.9rem;">
        Define how connected remote VPN users and branch exits route their public internet traffic
    </p>
</div>

<div class="card">
    <div class="card-header">
        <h2 class="card-title">Select Outbound Internet Routing Mode</h2>
    </div>

    <form method="POST" action="/admin/internet">
        <div style="display: flex; flex-direction: column; gap: 1.25rem;">

            <!-- Choice 1: No access while connected -->
            <div style="background: rgba(0,0,0,0.25); border: 2px solid {% if current_mode == 'none' %}var(--warning){% else %}var(--card-border){% endif %}; border-radius: 8px; padding: 1.25rem; transition: all 0.2s;">
                <label class="checkbox-group" style="align-items: flex-start; cursor: pointer;">
                    <input type="radio" name="internet_access_mode" value="none" {% if current_mode == 'none' %}checked{% endif %} style="margin-top: 4px;">
                    <div>
                        <div style="display: flex; align-items: center; gap: 0.5rem;">
                            <strong style="font-size: 1.1rem; color: #fbbf24;">1. No Access While Connected (Split-Tunneling)</strong>
                            {% if current_mode == 'none' %}<span class="badge badge-warning">CURRENT ACTIVE</span>{% endif %}
                        </div>
                        <p style="color: #cbd5e1; font-size: 0.88rem; margin-top: 0.4rem; line-height: 1.4;">
                            Remote users only route internal corporate networks (Main Network, Branch subnets, and VPN services) over the VPN tunnel.
                            All public WAN internet traffic is either blocked or stays on the user's local connection without crossing company gateways.
                        </p>
                        <div style="margin-top: 0.5rem; font-size: 0.8rem; color: var(--text-muted);">
                            • Client AllowedIPs: Limited to internal corporate subnets<br>
                            • Server Firewall: Rejects any forwarding of public internet destinations
                        </div>
                    </div>
                </label>
            </div>

            <!-- Choice 2: Main network provides access -->
            <div style="background: rgba(0,0,0,0.25); border: 2px solid {% if current_mode == 'main_network' %}var(--info){% else %}var(--card-border){% endif %}; border-radius: 8px; padding: 1.25rem; transition: all 0.2s;">
                <label class="checkbox-group" style="align-items: flex-start; cursor: pointer;">
                    <input type="radio" name="internet_access_mode" value="main_network" {% if current_mode == 'main_network' %}checked{% endif %} style="margin-top: 4px;">
                    <div>
                        <div style="display: flex; align-items: center; gap: 0.5rem;">
                            <strong style="font-size: 1.1rem; color: #38bdf8;">2. The Main Network Provides Access to the Internet</strong>
                            {% if current_mode == 'main_network' %}<span class="badge badge-info">CURRENT ACTIVE</span>{% endif %}
                        </div>
                        <p style="color: #cbd5e1; font-size: 0.88rem; margin-top: 0.4rem; line-height: 1.4;">
                            Remote users' public internet traffic is forwarded through the permanent site-to-site tunnel and exits through the <strong>Main Company Network's internet gateway</strong>.
                        </p>
                        <div style="margin-top: 0.5rem; font-size: 0.8rem; color: var(--text-muted);">
                            • <strong>External Public IP:</strong> To external websites, remote users appear with the public IP address of the <em>Main Company Headquarters</em>.<br>
                            • Security Benefit: User traffic is inspected by the corporate perimeter firewall and filtering appliance at headquarters.
                        </div>
                    </div>
                </label>
            </div>

            <!-- Choice 3: VPN server provides access -->
            <div style="background: rgba(0,0,0,0.25); border: 2px solid {% if current_mode == 'vpn_server' %}var(--success){% else %}var(--card-border){% endif %}; border-radius: 8px; padding: 1.25rem; transition: all 0.2s;">
                <label class="checkbox-group" style="align-items: flex-start; cursor: pointer;">
                    <input type="radio" name="internet_access_mode" value="vpn_server" {% if current_mode == 'vpn_server' %}checked{% endif %} style="margin-top: 4px;">
                    <div>
                        <div style="display: flex; align-items: center; gap: 0.5rem;">
                            <strong style="font-size: 1.1rem; color: #34d399;">3. The VPN Server Provides Access to the Internet</strong>
                            {% if current_mode == 'vpn_server' %}<span class="badge badge-success">CURRENT ACTIVE</span>{% endif %}
                        </div>
                        <p style="color: #cbd5e1; font-size: 0.88rem; margin-top: 0.4rem; line-height: 1.4;">
                            Remote users' public internet traffic is masqueraded (NAT) directly out of this <strong>VPN Server's own external WAN interface</strong>.
                        </p>
                        <div style="margin-top: 0.5rem; font-size: 0.8rem; color: var(--text-muted);">
                            • <strong>External Public IP:</strong> To external websites, remote users appear with the public IP address of <em>this VPN Server</em>.<br>
                            • Performance Benefit: Direct internet egress from the cloud/hosting provider without loading the headquarters uplink.
                        </div>
                    </div>
                </label>
            </div>

        </div>

        <div style="margin-top: 1.75rem; text-align: right;">
            <button type="submit" class="btn btn-primary" style="padding: 0.75rem 2rem;">
                🚀 Apply Internet Routing Policy
            </button>
        </div>
    </form>
</div>
{% endblock %}