{% extends "base.html" %}

{% block title %}SSH Setup - Server Monitoring{% endblock %}

{% block page_title %}SSH Setup{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Flash Messages -->
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
                <div class="alert alert-{{ 'danger' if category == 'error' else category }} alert-dismissible fade show">
                    {{ message }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            {% endfor %}
        {% endif %}
    {% endwith %}

    <div class="row g-4">

        <!-- SSH Key Management -->
        <div class="col-lg-6">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i class="fas fa-key me-2"></i>SSH Key Pair</h5>
                </div>
                <div class="card-body">
                    {% if key_exists %}
                        <div class="alert alert-success">
                            <i class="fas fa-check-circle me-2"></i>SSH key exists at
                            <code>~/.ssh/ansible_key</code>
                        </div>
                        {% if public_key %}
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Public Key</label>
                            <textarea class="form-control font-monospace" rows="4" readonly>{{ public_key }}</textarea>
                            <small class="text-muted">Copy this key to <code>~/.ssh/authorized_keys</code> on each device.</small>
                        </div>
                        {% endif %}
                    {% else %}
                        <div class="alert alert-warning">
                            <i class="fas fa-exclamation-triangle me-2"></i>No SSH key found. Generate one below.
                        </div>
                    {% endif %}

                    <form method="post" action="{{ url_for('ansible_web.generate_ssh_keys') }}">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-sync me-1"></i>
                            {{ 'Regenerate' if key_exists else 'Generate' }} SSH Keys
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <!-- SSH Settings -->
        <div class="col-lg-6">
            <div class="card shadow-sm">
                <div class="card-header bg-secondary text-white">
                    <h5 class="mb-0"><i class="fas fa-lock me-2"></i>SSH Authentication Settings</h5>
                </div>
                <div class="card-body">
                    <p class="text-muted small">
                        When key-based authentication fails, the server falls back to password auth.
                        Set the default password for devices on this network below.
                    </p>

                    <form method="post" action="{{ url_for('ansible_web.save_ssh_settings') }}">
                        <div class="mb-3">
                            <label class="form-label fw-semibold">SSH Fallback Password</label>
                            <div class="input-group">
                                <input type="password" name="ssh_fallback_password" id="sshFallbackPassword"
                                       class="form-control"
                                       value="{{ settings.get('ssh_fallback_password', '') }}"
                                       placeholder="Enter fallback password"
                                       required>
                                <button class="btn btn-outline-secondary" type="button"
                                        onclick="togglePassword()">
                                    <i class="fas fa-eye" id="toggleIcon"></i>
                                </button>
                            </div>
                            <small class="text-muted">
                                Used when SSH key auth is not available on the target device.
                            </small>
                        </div>

                        <button type="submit" class="btn btn-success">
                            <i class="fas fa-save me-1"></i>Save Settings
                        </button>
                    </form>
                </div>
            </div>
        </div>

    </div><!-- /row -->
</div><!-- /container -->

<script>
function togglePassword() {
    const input = document.getElementById('sshFallbackPassword');
    const icon = document.getElementById('toggleIcon');
    if (input.type === 'password') {
        input.type = 'text';
        icon.classList.replace('fa-eye', 'fa-eye-slash');
    } else {
        input.type = 'password';
        icon.classList.replace('fa-eye-slash', 'fa-eye');
    }
}
</script>
{% endblock %}