{if $error}
        <div class="alert alert-danger">
            <strong>Error:</strong> {$error}
        </div>
    {else}
        <div class="row">
            <div class="col-md-6">
                {if $formatted_config}
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">
                                <i class="fa fa-qrcode"></i> QR Code
                            </h3>
                        </div>
                        <div class="panel-body text-center">
                            <div id="qrcode" style="display: inline-block; margin-bottom: 10px;"></div>
                            <p class="text-muted">Scan this QR code with your WireGuard client</p>
                            <div class="text-center" style="margin-top: 15px;">
                                <button class="btn btn-info btn-sm" onclick="showInstructions()">
                                    <i class="fa fa-info-circle"></i> Installation Instructions
                                </button>
                            </div>
                        </div>
                    </div>
                {else}
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">
                                <i class="fa fa-qrcode"></i> QR Code
                            </h3>
                        </div>
                        <div class="panel-body text-center">
                            <p class="text-muted">Configuration not available</p>
                        </div>
                    </div>
                {/if}
            </div>

            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            <i class="fa fa-cog"></i> WireGuard Configuration
                        </h3>
                    </div>
                    <div class="panel-body">
                        {if $formatted_config}
                            <div class="form-group">
                                <label>Configuration File:</label>
                                <pre class="wireguard-config" style="background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; padding: 15px; font-family: 'Courier New', monospace; font-size: 13px; line-height: 1.4; color: #333; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word; max-height: 350px; overflow-y: auto;">{$formatted_config|escape}</pre>
                            </div>
                            <div class="text-center">
                                <button class="btn btn-primary" onclick="downloadFormattedConfig()">
                                    <i class="fa fa-download"></i> Download Configuration
                                </button>
                                <button class="btn btn-default" onclick="copyFormattedConfig()">
                                    <i class="fa fa-copy"></i> Copy to Clipboard
                                </button>
                            </div>
                        {else}
                            <p class="text-muted">Configuration not available</p>
                        {/if}
                    </div>
                </div>
            </div>
        </div>
    {/if}

    {* Instructions Modal *}
    <div class="modal fade" id="instructionsModal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">WireGuard Setup Instructions</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <h5>Mobile Devices (Android/iOS):</h5>
                    <ol>
                        <li>Install the WireGuard app from Google Play Store or App Store</li>
                        <li>Open the app and tap the "+" button</li>
                        <li>Select "Scan from QR code"</li>
                        <li>Scan the QR code displayed above</li>
                        <li>Give your tunnel a name and save</li>
                    </ol>

                    <h5>Desktop (Windows/macOS/Linux):</h5>
                    <ol>
                        <li>Download and install WireGuard from <a href="https://www.wireguard.com/install/" target="_blank">wireguard.com</a></li>
                        <li>Click "Add Tunnel" → "Add empty tunnel..."</li>
                        <li>Copy the configuration above and paste it</li>
                        <li>Save and activate the tunnel</li>
                    </ol>

                    <h5>Command Line (Linux):</h5>
                    <ol>
                        <li>Save the configuration to a file (e.g., <code>wg0.conf</code>)</li>
                        <li>Run: <code>sudo wg-quick up wg0</code></li>
                        <li>To stop: <code>sudo wg-quick down wg0</code></li>
                    </ol>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://api.qrserver.com/v1/create-qr-code/?size=250x250&format=svg&data=test" style="display:none;"></script>
    <script>
    var configForQR = null;

    function generateQRCode(configText) {
        var qrCodeElement = document.getElementById('qrcode');
        
        if (qrCodeElement && configText && configText.trim() !== '') {
            try {
                var qrUrl = 'https://api.qrserver.com/v1/create-qr-code/?size=250x250&data=' + encodeURIComponent(configText);
                var img = document.createElement('img');
                img.src = qrUrl;
                img.alt = 'WireGuard QR Code';
                img.style.border = '3px solid #ddd';
                img.style.borderRadius = '4px';
                img.onerror = function() {
                    qrCodeElement.innerHTML = '<p class="text-danger">Failed to generate QR code</p>';
                };
                qrCodeElement.innerHTML = '';
                qrCodeElement.appendChild(img);
            } catch (e) {
                console.error('QR code generation failed:', e);
                qrCodeElement.innerHTML = '<p class="text-danger">Failed to generate QR code</p>';
            }
        } else {
            if (qrCodeElement) {
                qrCodeElement.innerHTML = '<p class="text-warning">Configuration not available for QR code</p>';
            }
        }
    }

    {if $formatted_config}
    document.addEventListener('DOMContentLoaded', function() {
        configForQR = {$formatted_config|json_encode};
        generateQRCode(configForQR);
    });
    {/if}

    function downloadFormattedConfig() {
        {if $formatted_config}
        var config = {$formatted_config|json_encode};
        var element = document.createElement('a');
        element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(config));
        element.setAttribute('download', '{$peer_name|default:"wireguard"}.conf');
        element.style.display = 'none';
        document.body.appendChild(element);
        element.click();
        document.body.removeChild(element);
        {/if}
    }

    function copyFormattedConfig() {
        {if $formatted_config}
        var config = {$formatted_config|json_encode};
        if (navigator.clipboard && window.isSecureContext) {
            navigator.clipboard.writeText(config).then(function() {
                alert('Configuration copied to clipboard!');
            }).catch(function(err) {
                fallbackCopyTextToClipboard(config);
            });
        } else {
            fallbackCopyTextToClipboard(config);
        }
        {/if}
    }

    function fallbackCopyTextToClipboard(text) {
        var textArea = document.createElement("textarea");
        textArea.value = text;
        textArea.style.top = "0";
        textArea.style.left = "0";
        textArea.style.position = "fixed";
        document.body.appendChild(textArea);
        textArea.focus();
        textArea.select();
        try {
            var successful = document.execCommand('copy');
            if (successful) {
                alert('Configuration copied to clipboard!');
            } else {
                alert('Failed to copy configuration. Please copy manually.');
            }
        } catch (err) {
            alert('Failed to copy configuration. Please copy manually.');
        }
        document.body.removeChild(textArea);
    }

    // Legacy functions for backward compatibility
    function downloadConfig() {
        var textarea = document.querySelector('textarea');
        if (textarea) {
            var config = textarea.value;
            var element = document.createElement('a');
            element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(config));
            element.setAttribute('download', '{$peer_name|default:"wireguard"}.conf');
            element.style.display = 'none';
            document.body.appendChild(element);
            element.click();
            document.body.removeChild(element);
        }
    }

    function copyConfig() {
        var textarea = document.querySelector('textarea');
        if (textarea) {
            textarea.select();
            try {
                document.execCommand('copy');
                alert('Configuration copied to clipboard!');
            } catch (err) {
                alert('Failed to copy configuration. Please select and copy manually.');
            }
        }
    }

    function showInstructions() {
        $('#instructionsModal').modal('show');
    }
    </script>

    <style>
    .panel-heading .fa {
        margin-right: 5px;
    }

    .center-block {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    code {
        word-break: break-all;
    }

    .table-condensed td {
        padding: 5px;
    }

    .modal-body h5 {
        color: #337ab7;
        margin-top: 20px;
        margin-bottom: 10px;
    }

    .modal-body h5:first-child {
        margin-top: 0;
    }

    /***** Modal close button alignment *****/
    .modal-header {
        position: relative;
    }
    .modal-header .close {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 28px;
        line-height: 1;
    }

    .wireguard-config {
        max-height: 350px;
        overflow-y: auto;
    }

    #qrcode canvas {
        border: 1px solid #ddd;
        border-radius: 4px;
    }
    </style>