{% extends "layout.twig" %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h3><i class="fas fa-check-circle text-success"></i> Сервер добавлен</h3>
            </div>
            <div class="card-body">
                <div class="alert alert-success" role="alert">
                    <h4 class="alert-heading">Сервер "{{ server.name }}" успешно добавлен!</h4>
                    <p>Для подключения агента мониторинга используйте следующий токен:</p>
                    <hr>
                    <div class="row">
                        <div class="col-md-10">
                            <input type="text" class="form-control" value="{{ token }}" readonly onclick="this.select();">
                        </div>
                        <div class="col-md-2">
                            <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('{{ token }}')">
                                <i class="fas fa-copy"></i>
                            </button>
                        </div>
                    </div>
                    <p class="mb-0 mt-3">Скачайте скрипт установки агента мониторинга:</p>
                    <a href="/agent/install.sh?token={{ token }}" class="btn btn-primary mt-2">
                        <i class="fas fa-download"></i> Скачать install.sh
                    </a>
                </div>
                
                <div class="mt-4">
                    <h5>Инструкция по установке агента:</h5>
                    <ol>
                        <li>Скачайте скрипт установки с помощью кнопки выше</li>
                        <li>Загрузите его на сервер, который вы хотите мониторить</li>
                        <li>Выполните команду: <code>chmod +x install.sh && ./install.sh</code></li>
                        <li>Агент начнет отправлять метрики на сервер мониторинга</li>
                    </ol>
                </div>
                
                <div class="d-grid gap-2 d-md-flex justify-content-md-end mt-4">
                    <a href="/servers" class="btn btn-primary me-md-2">
                        <i class="fas fa-server"></i> К списку серверов
                    </a>
                    <a href="/servers/{{ server.id }}/edit" class="btn btn-outline-primary">
                        <i class="fas fa-edit"></i> Редактировать сервер
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function copyToClipboard(text) {
    navigator.clipboard.writeText(text).then(function() {
        const originalText = event.target.innerHTML;
        event.target.innerHTML = '<i class="fas fa-check"></i>';
        setTimeout(() => {
            event.target.innerHTML = originalText;
        }, 2000);
    });
}
</script>
{% endblock %}