{% extends "base.html" %}
{% block content %}

<h2>Switche</h2>

{% if current_user.is_admin %}
<h4>Neuen Switch hinzufügen</h4>
<form method="post" class="row g-2 mb-4">
    <input type="hidden" name="add_switch" value="1">
    <div class="col col-small"><input type="text" name="hostname" placeholder="Hostname" class="form-control" required></div>
    <div class="col col-ip"><input type="text" name="ip" placeholder="IP-Adresse" class="form-control" required></div>
    <div class="col col-small"><input type="text" name="username" placeholder="Username" class="form-control" required></div>
    <div class="col"><input type="password" name="password" placeholder="Password" class="form-control" required></div>
    <div class="col"><button class="btn btn-success w-100">Hinzufügen</button></div>
</form>
{% endif %}

<table class="table table-bordered custom-table">
    <thead>
        <tr>
            <th class="col-small">Hostname</th>
            <th class="col-ip">IP-Adresse</th>
            <th class="col-small">Username</th>
            <th>Password</th>
            {% if current_user.is_admin %}<th>Aktionen</th>{% endif %}
        </tr>
    </thead>
    <tbody>
        {% for s in switches %}
        <tr>
            {% if current_user.is_admin %}
            <td class="col-small"><input name="hostname" value="{{ s['hostname'] }}" class="form-control" required disabled></td>
            <td class="col-ip"><input name="ip" value="{{ s['ip'] }}" class="form-control" required disabled></td>
            <td class="col-small"><input name="username" value="{{ s['username'] }}" class="form-control" required disabled></td>
            <td><input name="password" value="{{ s['password'] }}" type="password" class="form-control" disabled></td>
            <td class="custom-actions d-flex gap-1 align-items-center">
                <!-- Bearbeiten Button -->
                <button type="button" class="btn btn-warning btn-sm" onclick="enableSwitchEdit(this)">Bearbeiten</button>

                <!-- Speichern Button -->
                <form method="post" style="display:inline;">
                    <input type="hidden" name="edit_switch" value="1">
                    <input type="hidden" name="old_hostname" value="{{ s['hostname'] }}">
                    <button class="btn btn-primary btn-sm d-none" type="submit">Speichern</button>
                </form>

                <!-- Löschen Button -->
                <form method="post" style="display:inline;">
                    <button name="delete_switch" value="{{ s['hostname'] }}" class="btn btn-danger btn-sm"
                        onclick="return confirm('Willst du den Switch wirklich löschen?');">Löschen</button>
                </form>
            </td>
            {% else %}
            <td>{{ s['hostname'] }}</td>
            <td>{{ s['ip'] }}</td>
            <td>{{ s['username'] }}</td>
            <td>******</td>
            {% endif %}
        </tr>
        {% endfor %}
    </tbody>
</table>

<script>
function enableSwitchEdit(btn) {
    const row = btn.closest('tr');
    // Inputs aktivieren
    row.querySelectorAll('input').forEach(el => el.disabled = false);
    row.querySelector('.btn-primary').classList.remove('d-none'); // Speichern sichtbar
    btn.classList.add('d-none'); // Bearbeiten ausblenden
}
</script>

{% endblock %}