{% extends "base.html" %}

{% block title %}Tunnel Config - Paracord Console{% endblock %}

{% block content %}
<div class="mb-8">
    <h1 class="text-2xl font-bold text-gray-900">Cloudflare Tunnel Configuration</h1>
    <p class="mt-1 text-sm text-gray-500">Generate cloudflared configuration for your projects</p>
</div>

<div class="grid gap-8 lg:grid-cols-2">
    <div>
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-5 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-medium text-gray-900">Generated Configuration</h2>
            </div>
            <div class="p-5">
                <div class="relative">
                    <pre class="bg-gray-900 text-gray-100 p-4 rounded-lg text-sm overflow-x-auto font-mono">{{ config }}</pre>
                    <button
                        onclick="navigator.clipboard.writeText(document.querySelector('pre').textContent)"
                        class="absolute top-2 right-2 p-2 bg-gray-700 hover:bg-gray-600 rounded-md text-gray-300 hover:text-white transition-colors"
                        title="Copy to clipboard"
                    >
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
                        </svg>
                    </button>
                </div>
                <p class="mt-3 text-sm text-gray-500">
                    Save this to <code class="px-1.5 py-0.5 bg-gray-100 rounded text-gray-700">~/.cloudflared/config.yml</code>
                </p>
            </div>
        </div>

        <div class="mt-6 bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-5 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-medium text-gray-900">Projects with Tunnel Config</h2>
            </div>
            <div class="divide-y divide-gray-200">
                {% for path, project in projects.items() %}
                {% if project.cloudflare and project.cloudflare.subdomain %}
                <div class="px-5 py-3 flex items-center justify-between">
                    <div>
                        <span class="font-medium text-gray-900">{{ project.name }}</span>
                        <span class="ml-2 text-sm text-gray-500">Port {{ project.port }}</span>
                    </div>
                    <span class="text-sm font-mono text-paracord-600">{{ project.cloudflare.subdomain }}</span>
                </div>
                {% endif %}
                {% else %}
                <div class="px-5 py-8 text-center text-gray-500">
                    <p>No projects have tunnel subdomains configured.</p>
                    <p class="mt-2 text-sm">Use <code class="px-1.5 py-0.5 bg-gray-100 rounded">paracord console init</code> to add one.</p>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>

    <div>
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-5 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-medium text-gray-900">Setup Instructions</h2>
            </div>
            <div class="p-5 prose prose-sm max-w-none">
                <pre class="whitespace-pre-wrap text-sm text-gray-700 font-mono bg-gray-50 p-4 rounded-lg">{{ instructions }}</pre>
            </div>
        </div>
    </div>
</div>
{% endblock %}