{% extends "base.html" %}
{% block content %}
<div class="flex justify-between items-center mb-6">
    <h1 class="text-3xl font-bold text-gray-800">Meine Verträge</h1>
    <div class="space-x-2">
        <button onclick="toggleAllSecrets()" class="bg-gray-500 text-white px-4 py-2 rounded">PIN/PUK zeigen</button>
        <a href="/add" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition">+ Neuer Vertrag</a>
    </div>
</div>

<div class="bg-white shadow-md rounded-lg overflow-hidden">
    <table class="w-full text-left border-collapse">
        <thead class="bg-gray-50 border-b">
            <tr>
                <th class="p-4 text-gray-600">Provider</th>
                <th class="p-4 text-gray-600">Nummer</th>
                <th class="p-4 text-gray-600">PIN</th>
                <th class="p-4 text-gray-600">PUK</th>
                <th class="p-4 text-gray-600">Kosten</th>
                <th class="p-4 text-gray-600">Aktionen</th>
            </tr>
        </thead>
        <tbody>
            {% for c in contracts %}
            <tr class="border-b hover:bg-gray-50 transition">
                <td class="p-4 font-medium">{{ c.provider }}</td>
                <td class="p-4">{{ c.phone_number }}</td>
                <td class="p-4"><span class="secret-field bg-gray-200 px-2 rounded">****</span></td>
                <td class="p-4"><span class="secret-field bg-gray-200 px-2 rounded">****</span></td>
                <td class="p-4">€{{ "%.2f"|format(c.monthly_cost) }}</td>
                <td class="p-4">
                    <a href="/edit/{{ c.id }}" class="text-blue-600 hover:underline mr-2">Bearbeiten</a>
                    <a href="/delete/{{ c.id }}" class="text-red-600 hover:underline" onclick="return confirm('Wirklich löschen?')">Löschen</a>
                </td>
            </tr>
            {% endfor %}
            {% if not contracts %}
            <tr>
                <td colspan="6" class="p-8 text-center text-gray-500">Keine Verträge vorhanden.</td>
            </tr>
            {% endif %}
        </tbody>
    </table>
</div>

<script>
    function toggleAllSecrets() {
        const elements = document.querySelectorAll('.secret-field');
        elements.forEach(el => {
            if (el.innerText === '****') {
                // In a real app, you'd fetch the actual values via API or pass them in the template
                // For simplicity in this demo, we'll just toggle visibility of a data-attribute
                el.innerText = el.dataset.value || '****';
                el.classList.replace('bg-gray-200', 'bg-yellow-100');
            } else {
                el.innerText = '****';
                el.classList.replace('bg-yellow-100', 'bg-gray-200');
            }
        });
    }
</script>
{% endblock %}