{% extends "base.html" %}

{% block title %}Site-to-Site & Branch Networks - Enterprise VPN Hub{% endblock %}

{% block content %}
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
    <div>
        <h1 style="font-size: 1.6rem; font-weight: 700;">Site-to-Site & Branch Networks</h1>
        <p style="color: var(--text-muted); font-size: 0.9rem;">Connect local company networks, Headquarters, and remote branches to this VPN Hub</p>
    </div>
    <button onclick="document.getElementById('branch-modal').style.display='block'" class="btn btn-primary">
        ➕ Add Branch Network
    </button>
</div>

<!-- Primary Company Network (Headquarters) -->
<div class="card">
    <div class="card-header">
        <div>
            <div style="display: flex; align-items: center; gap: 0.5rem;">
                <span style="font-size: 1.4rem;">🏢</span>
                <h2 class="card-title">Primary Company Network (Headquarters)</h2>
            </div>
            <p style="color: var(--text-muted); font-size: 0.85rem; margin-top: 0.25rem;">
                Permanent site-to-site tunnel. Connected remote users are automatically routed into this primary network.
            </p>
        </div>
        <a href="/admin/download/main-router-conf" class="btn btn-success btn-sm">
            ⬇️ Download Router Config (.conf)
        </a>
    </div>

    <form method="POST" action="/admin/networks/s2s">
        <div class="grid-3">
            <div class="form-group">
                <label for="s2s_name">Network Name</label>
                <input type="text" id="s2s_name" name="name" value="{{ s2s['name'] }}">
            </div>

            <div class="form-group">
                <label for="s2s_subnet">Main Network Subnet (e.g. 192.168.1.0/24)</label>
                <input type="text" id="s2s_subnet" name="subnet" value="{{ s2s['subnet'] }}" placeholder="192.168.1.0/24">
                <small style="color: var(--text-muted);">Users will be routed to this subnet.</small>
            </div>

            <div class="form-group">
                <label for="s2s_tunnel_peer">Headquarters Gateway Tunnel IP</label>
                <input type="text" id="s2s_tunnel_peer" name="tunnel_peer_ip" value="{{ s2s['tunnel_peer_ip'] }}">
            </div>
        </div>

        <div class="grid-2">
            <div class="form-group">
                <label for="s2s_peer_pubkey">Headquarters Gateway Peer Public Key</label>
                <input type="text" id="s2s_peer_pubkey" name="peer_public_key" value="{{ s2s['peer_public_key'] or '' }}" placeholder="Paste router public key here" style="font-family: monospace;">
                <small style="color: var(--text-muted);">Public key of the main network's router / gateway.</small>
            </div>

            <div class="form-group">
                <label for="s2s_endpoint">Headquarters Router Endpoint (Optional)</label>
                <input type="text" id="s2s_endpoint" name="peer_endpoint" value="{{ s2s['peer_endpoint'] or '' }}" placeholder="e.g. hq.company.com:51821">
                <small style="color: var(--text-muted);">Leave empty if HQ router initiates outbound connection.</small>
            </div>
        </div>

        <div style="text-align: right; margin-top: 0.5rem;">
            <button type="submit" class="btn btn-primary btn-sm">Update Primary Network</button>
        </div>
    </form>
</div>

<!-- Branch Networks -->
<div class="card">
    <div class="card-header">
        <div>
            <div style="display: flex; align-items: center; gap: 0.5rem;">
                <span style="font-size: 1.4rem;">🌐</span>
                <h2 class="card-title">Connected Branch Networks ({{ branches|length }})</h2>
            </div>
            <p style="color: var(--text-muted); font-size: 0.85rem; margin-top: 0.25rem;">
                Branches can be configured in <strong>Routed Mode</strong> (Layer 3) or <strong>Full Extension Mode</strong> (Layer 2 Bridged).
            </p>
        </div>
    </div>

    {% if branches %}
    <div style="overflow-x: auto;">
        <table>
            <thead>
                <tr>
                    <th>Branch Name</th>
                    <th>Subnet</th>
                    <th>Connection Mode</th>
                    <th>Tunnel IPs</th>
                    <th>Peer Endpoint</th>
                    <th style="text-align: right;">Router Config & Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for b in branches %}
                <tr>
                    <td><strong>{{ b['name'] }}</strong></td>
                    <td><code>{{ b['branch_subnet'] }}</code></td>
                    <td>
                        {% if b['mode'] == 'routed' %}
                            <span class="badge badge-info" title="Layer 3 routed into main company network">
                                🔀 Routed into Main Network
                            </span>
                        {% else %}
                            <span class="badge badge-success" title="Layer 2 Bridge - Appears as one unified network">
                                🔗 Full Extension (L2 Bridge)
                            </span>
                        {% endif %}
                    </td>
                    <td><small>{{ b['tunnel_peer_ip'] }}</small></td>
                    <td><small>{{ b['peer_endpoint'] or 'Inbound' }}</small></td>
                    <td style="text-align: right;">
                        <a href="/admin/download/branch-conf/{{ b['id'] }}" class="btn btn-secondary btn-sm" title="Download config for branch router">
                            ⬇️ Download Config
                        </a>
                        <form method="POST" action="/admin/networks/branch/delete/{{ b['id'] }}" style="display: inline-block;" onsubmit="return confirm('Remove branch \'{{ b['name'] }}\'?');">
                            <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                        </form>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div style="text-align: center; padding: 2rem; color: var(--text-muted);">
        No branch networks configured yet. Click "Add Branch Network" to connect a remote office.
    </div>
    {% endif %}
</div>

<!-- Modal: Add Branch Network -->
<div id="branch-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 200; overflow-y: auto;">
    <div style="max-width: 580px; margin: 4% auto; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 10px; padding: 1.5rem; position: relative;">
        <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--card-border); padding-bottom: 0.75rem; margin-bottom: 1rem;">
            <h3 style="color: #fff;">Connect Remote Branch Network</h3>
            <button onclick="document.getElementById('branch-modal').style.display='none'" style="background: none; border: none; color: #fff; font-size: 1.2rem; cursor: pointer;">&times;</button>
        </div>

        <form method="POST" action="/admin/networks/branch/add">
            <div class="form-group">
                <label for="b_name">Branch Office Name</label>
                <input type="text" id="b_name" name="name" required placeholder="e.g. Branch Berlin / Branch Tokyo">
            </div>

            <div class="form-group">
                <label for="b_subnet">Branch Local Subnet</label>
                <input type="text" id="b_subnet" name="branch_subnet" value="192.168.20.0/24" placeholder="192.168.20.0/24">
            </div>

            <!-- Branch Mode Choice -->
            <div class="form-group">
                <label style="font-size: 0.95rem; color: #fff; margin-bottom: 0.5rem;">Branch Integration Mode</label>
                
                <div style="background: rgba(0,0,0,0.3); border: 1px solid var(--card-border); border-radius: 8px; padding: 1rem; margin-bottom: 0.75rem;">
                    <label class="checkbox-group" style="cursor: pointer; align-items: flex-start;">
                        <input type="radio" name="mode" value="routed" checked style="margin-top: 3px;">
                        <div>
                            <strong style="color: #60a5fa;">Option A: Routing into Main Network (Layer 3 Routing)</strong>
                            <p style="color: var(--text-muted); font-size: 0.82rem; margin-top: 0.25rem;">
                                Users and devices at the branch can access all services and servers located at the main company network. Routing is handled cleanly via IP routing.
                            </p>
                        </div>
                    </label>
                </div>

                <div style="background: rgba(0,0,0,0.3); border: 1px solid var(--card-border); border-radius: 8px; padding: 1rem;">
                    <label class="checkbox-group" style="cursor: pointer; align-items: flex-start;">
                        <input type="radio" name="mode" value="bridged" style="margin-top: 3px;">
                        <div>
                            <strong style="color: #34d399;">Option B: Fully Extend the Main Network (Layer 2 Bridge)</strong>
                            <p style="color: var(--text-muted); font-size: 0.82rem; margin-top: 0.25rem;">
                                Both endpoints seem to the networks as ONE unified network. Broadcast domains are bridged so devices from the branch are directly discoverable and visible from the main network (mDNS, Bonjour, discovery services).
                            </p>
                        </div>
                    </label>
                </div>
            </div>

            <div class="form-group">
                <label for="b_pubkey">Branch Gateway Public Key (Optional)</label>
                <input type="text" id="b_pubkey" name="peer_public_key" placeholder="Paste branch router public key here" style="font-family: monospace;">
                <small style="color: var(--text-muted);">Can also be configured after generating the branch config.</small>
            </div>

            <div class="form-group">
                <label for="b_endpoint">Branch Router Public Endpoint (Optional)</label>
                <input type="text" id="b_endpoint" name="peer_endpoint" placeholder="e.g. branch.company.com:51820">
                <small style="color: var(--text-muted);">Leave blank if the branch connects dynamically to this VPN Hub.</small>
            </div>

            <div style="display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.5rem;">
                <button type="button" onclick="document.getElementById('branch-modal').style.display='none'" class="btn btn-secondary">Cancel</button>
                <button type="submit" class="btn btn-primary">Create Branch Connection</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}