{% extends "base.html" %}

{% block title %}Удаленное управление - AWM{% endblock %}

{% block extra_head %}
<style>
    .rdp-page { display: grid; gap: 16px; }
    .rdp-hero {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
        padding: 18px 20px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--surface);
    }
    .rdp-hero h2 { margin: 0; font-size: 1.35rem; color: var(--gray-900); }
    .rdp-subtitle { color: var(--text-muted); font-size: 13px; margin: 6px 0 0; max-width: 52rem; line-height: 1.45; }
    .rdp-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    .rdp-panel {
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--surface);
        padding: 16px 18px;
        min-width: 0;
    }
    .rdp-panel-head {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 8px;
    }
    .rdp-panel-head h3 { margin: 0; font-size: 15px; color: var(--gray-800); }
    .rdp-hint { font-size: 12px; color: var(--text-muted); margin: 0 0 14px; }
    .rdp-tiles {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 16px;
    }
    .rdp-tile {
        position: relative;
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 0;
        background: var(--surface);
        display: flex;
        flex-direction: column;
        text-align: left;
        transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
        min-width: 0;
        overflow: hidden;
    }
    .rdp-tile-cover {
        position: relative;
        height: 104px;
        flex-shrink: 0;
        overflow: hidden;
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border);
    }
    .rdp-tile-cover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
        display: block;
    }
    .rdp-tile-cover::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            180deg,
            transparent 35%,
            color-mix(in srgb, var(--gray-900) 55%, transparent) 100%
        );
        pointer-events: none;
    }
    .rdp-tile-cover-badge {
        position: absolute;
        left: 12px;
        bottom: 10px;
        z-index: 1;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        padding: 3px 8px;
        border-radius: 999px;
        border: 1px solid color-mix(in srgb, var(--surface) 35%, transparent);
        background: color-mix(in srgb, var(--surface) 82%, transparent);
        color: var(--gray-800);
        backdrop-filter: blur(4px);
    }
    .rdp-tile-cover-badge.is-rdp { color: var(--primary); }
    .rdp-tile-cover-badge.is-vnc { color: var(--success); }
    .rdp-tile-cover-badge.is-ssh { color: var(--warning); }
    .rdp-tile-cover .rdp-tile-fav {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 1;
        font-size: 15px;
        line-height: 1;
        padding: 4px 7px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--surface) 82%, transparent);
        border: 1px solid color-mix(in srgb, var(--surface) 35%, transparent);
        backdrop-filter: blur(4px);
    }
    .rdp-tile:hover {
        border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
        box-shadow: 0 10px 28px color-mix(in srgb, var(--gray-900) 9%, transparent);
        transform: translateY(-2px);
    }
    .rdp-tile-body {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 16px 18px 4px;
        flex: 1;
        min-width: 0;
    }
    .rdp-tile-head {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
    }
    .rdp-tile-title-row {
        display: flex;
        align-items: center;
        gap: 8px;
        justify-content: space-between;
    }
    .rdp-tile-title {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        color: var(--gray-900);
        word-break: break-word;
        line-height: 1.25;
    }
    .rdp-tile-fav {
        flex-shrink: 0;
        font-size: 14px;
        line-height: 1;
        color: var(--warning);
    }
    .rdp-tile-host {
        display: block;
        margin-top: 4px;
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        font-size: 12px;
        color: var(--gray-500);
        word-break: break-all;
        line-height: 1.35;
    }
    .rdp-tile-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 8px;
        font-size: 12px;
        color: var(--gray-500);
    }
    .rdp-tile-meta-dot {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: var(--gray-400);
        flex-shrink: 0;
    }
    .rdp-proto {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.03em;
        color: var(--gray-700);
    }
    .rdp-proto.is-rdp { color: var(--primary); }
    .rdp-proto.is-vnc { color: var(--success); }
    .rdp-proto.is-ssh { color: var(--warning); }
    .rdp-scope {
        font-size: 12px;
        font-weight: 500;
        color: var(--gray-500);
    }
    .rdp-tile-actions {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: auto;
        padding: 14px 18px 18px;
    }
    .rdp-tile-actions-secondary {
        display: flex;
        gap: 8px;
    }
    .rdp-tile-actions-secondary .btn {
        flex: 1 1 0;
        min-width: 0;
    }
    .rdp-tile-actions .btn {
        width: 100%;
        justify-content: center;
        text-align: center;
        margin: 0;
        box-sizing: border-box;
    }
    .rdp-tile-actions .btn-primary {
        padding-top: 9px;
        padding-bottom: 9px;
        font-weight: 600;
    }
    .rdp-empty {
        text-align: center;
        padding: 40px 18px;
        color: var(--gray-500);
        font-size: 14px;
        grid-column: 1 / -1;
        border: 1px dashed var(--border);
        border-radius: 14px;
        background: var(--bg-secondary);
    }
    .rdp-modal-content {
        max-width: min(960px, 96vw);
        width: 100%;
        max-height: 92vh;
        padding: 28px 32px 24px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .rdp-modal-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding-right: 4px;
        margin-right: -4px;
    }
    .rdp-modal-footer {
        flex-shrink: 0;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        margin-top: 16px;
        padding-top: 14px;
        border-top: 1px solid var(--border);
    }
    .rdp-modal-tabs {
        display: flex;
        gap: 6px;
        margin: 0 0 14px;
        border-bottom: 1px solid var(--border);
        padding-bottom: 8px;
        flex-shrink: 0;
    }
    .rdp-modal-tab {
        border: 1px solid transparent;
        background: transparent;
        color: var(--gray-600);
        font-size: 13px;
        font-weight: 600;
        padding: 8px 12px;
        border-radius: 8px;
        cursor: pointer;
    }
    .rdp-modal-tab:hover {
        background: var(--bg-secondary);
        color: var(--gray-800);
    }
    .rdp-modal-tab.active {
        color: var(--primary);
        background: color-mix(in srgb, var(--primary) 12%, var(--surface));
        border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
    }
    .rdp-tab-pane { display: none; }
    .rdp-tab-pane.active { display: block; }
    .rdp-form-grid { display: grid; gap: 12px; }
    .rdp-adv-hint {
        font-size: 12px;
        color: var(--gray-500);
        margin: 0 0 12px;
        line-height: 1.45;
    }
    .rdp-adv-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
        overflow: visible;
        max-height: none;
        padding-right: 0;
    }
    .rdp-adv-section {
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--bg-secondary);
        padding: 14px 16px 12px;
    }
    .rdp-adv-section[data-adv-section="access"],
    .rdp-adv-section[data-adv-section="drive"] {
        border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
        background: color-mix(in srgb, var(--primary) 5%, var(--bg-secondary));
    }
    .rdp-adv-section-title {
        margin: 0 0 4px;
        font-size: 13px;
        font-weight: 700;
        color: var(--gray-800);
    }
    .rdp-adv-section-desc {
        margin: 0 0 12px;
        font-size: 12px;
        color: var(--gray-500);
        line-height: 1.4;
    }
    .rdp-adv-fields {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .rdp-adv-field {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 10px 12px;
    }
    .rdp-adv-field-label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: var(--gray-700);
        margin-bottom: 6px;
    }
    .rdp-adv-field-help {
        display: block;
        margin-top: 6px;
        font-size: 12px;
        color: var(--gray-500);
        line-height: 1.4;
    }
    .rdp-adv-field.is-bool {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 2px 12px;
        align-items: start;
    }
    .rdp-adv-field.is-bool .rdp-adv-check {
        grid-row: 1 / span 2;
        margin-top: 2px;
    }
    .rdp-adv-field.is-bool .rdp-adv-field-label {
        margin: 0;
    }
    .rdp-adv-field.is-bool .rdp-adv-field-help {
        margin: 2px 0 0;
        grid-column: 2;
    }
    .rdp-adv-pair {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    @media (max-width: 640px) {
        .rdp-adv-pair { grid-template-columns: 1fr; }
    }
    .rdp-adv-empty {
        text-align: center;
        padding: 24px 12px;
        color: var(--gray-500);
        font-size: 13px;
        border: 1px dashed var(--border);
        border-radius: 10px;
        background: var(--bg-secondary);
    }
</style>
{% endblock %}

{% block content %}
<div class="rdp-page">
    <div class="rdp-hero">
        <div>
            <h2>Удаленное управление</h2>
            <p class="rdp-subtitle">Поддерживаются протоколы RDP, VNC и SSH. Сессия открывается в отдельном окне; доступна передача файлов в удалённую сессию.</p>
        </div>
        <div class="rdp-hero-actions">
            {% if can_write %}
            <button type="button" class="btn btn-primary btn-sm" onclick="rdpOpenForm()">Новое подключение</button>
            {% endif %}
            {% if can_manage_settings %}
            <button type="button" class="btn btn-secondary btn-sm" onclick="rdpImportFromGuacamole()">Импорт из Guacamole</button>
            <a class="btn btn-secondary btn-sm" href="/settings#settings-spoiler-guacamole">Настройки Guacamole</a>
            {% endif %}
        </div>
    </div>

    <div class="rdp-panel">
        <div class="rdp-panel-head">
            <h3>Подключения</h3>
        </div>
        <p class="rdp-hint">Повторное «Подключиться» вернёт фокус в уже открытое окно этого подключения.</p>
        <div id="rdp-connections" class="rdp-tiles">
            <div class="rdp-empty">Загрузка…</div>
        </div>
    </div>
</div>

<div id="rdp-connection-modal" class="modal">
    <div class="modal-content rdp-modal-content">
        <div class="modal-header">
            <h3 id="rdp-form-title">Новое подключение</h3>
            <button type="button" class="close-btn" onclick="rdpCloseForm()">&times;</button>
        </div>
        <div class="rdp-modal-tabs" role="tablist">
            <button type="button" class="rdp-modal-tab active" data-rdp-tab="basic" role="tab" aria-selected="true">Основные</button>
            <button type="button" class="rdp-modal-tab" data-rdp-tab="advanced" role="tab" aria-selected="false">Расширенные</button>
        </div>

        <div class="rdp-modal-body">
        <div id="rdp-tab-basic" class="rdp-tab-pane active" role="tabpanel">
            <p class="rdp-adv-hint">Основные сведения о подключении. Поля со звёздочкой обязательны. Секрет и SSH-ключ — только из доступных вам записей; они передаются в Guacamole при сохранении.</p>
            <div class="rdp-adv-list">
                <section class="rdp-adv-section">
                    <h4 class="rdp-adv-section-title">Подключение</h4>
                    <p class="rdp-adv-section-desc">Имя в списке AWM, протокол и адрес удалённого хоста.</p>
                    <div class="rdp-adv-fields">
                        <div class="rdp-adv-field">
                            <label class="rdp-adv-field-label" for="rdp-name">Имя <span style="color:var(--danger)">*</span></label>
                            <input id="rdp-name" class="form-control" type="text" placeholder="srv-rdp-01" required>
                            <span class="rdp-adv-field-help">Отображаемое имя в плитке подключений. Должно быть уникальным.</span>
                        </div>
                        <div class="rdp-adv-field">
                            <label class="rdp-adv-field-label" for="rdp-protocol">Протокол</label>
                            <select id="rdp-protocol" class="form-control">
                                <option value="rdp">RDP — удалённый рабочий стол (Windows / Linux)</option>
                                <option value="vnc">VNC — графический доступ</option>
                                <option value="ssh">SSH — терминал</option>
                            </select>
                            <span class="rdp-adv-field-help">От протокола и целевой ОС зависят блоки на вкладке «Расширенные» и способ передачи файлов.</span>
                        </div>
                        <div class="rdp-adv-field" id="rdp-guest-os-wrap">
                            <label class="rdp-adv-field-label" for="rdp-guest-os">Целевая ОС (RDP)</label>
                            <select id="rdp-guest-os" class="form-control">
                                <option value="windows">Windows</option>
                                <option value="linux">Linux (xrdp / Astra и аналоги)</option>
                            </select>
                            <span class="rdp-adv-field-help">Задаёт набор расширенных параметров и имя общего диска. Для Linux по умолчанию диск «awm_drive_rd» в ~/thinclient_drives/.</span>
                        </div>
                        <div class="rdp-adv-pair">
                            <div class="rdp-adv-field">
                                <label class="rdp-adv-field-label" for="rdp-hostname">Адрес хоста <span style="color:var(--danger)">*</span></label>
                                <input id="rdp-hostname" class="form-control" type="text" placeholder="10.0.0.10" required>
                                <span class="rdp-adv-field-help">IP или DNS-имя. Хост должен входить в список разрешённых (как для SSH-терминала).</span>
                            </div>
                            <div class="rdp-adv-field">
                                <label class="rdp-adv-field-label" for="rdp-port">Порт</label>
                                <input id="rdp-port" class="form-control" type="number" min="1" max="65535" placeholder="авто">
                                <span class="rdp-adv-field-help">Подставляется по протоколу (RDP 3389, VNC 5900, SSH 22). Можно изменить вручную.</span>
                            </div>
                        </div>
                    </div>
                </section>

                <section class="rdp-adv-section">
                    <h4 class="rdp-adv-section-title">Учётные данные</h4>
                    <p class="rdp-adv-section-desc">Логин и способ передачи пароля или ключа в Guacamole.</p>
                    <div class="rdp-adv-fields">
                        <div class="rdp-adv-field">
                            <label class="rdp-adv-field-label" for="rdp-username">Пользователь</label>
                            <input id="rdp-username" class="form-control" type="text" placeholder="administrator">
                            <span class="rdp-adv-field-help">Имя пользователя на удалённом хосте. Может подставиться из выбранного секрета или SSH-ключа.</span>
                        </div>
                        <div class="rdp-adv-field">
                            <label class="rdp-adv-field-label" for="rdp-password">Пароль (ручной ввод)</label>
                            <input id="rdp-password" class="form-control" type="password" autocomplete="new-password" placeholder="Введите пароль">
                            <span class="rdp-adv-field-help">Передаётся в Guacamole при сохранении; в AWM не хранится. Альтернатива — секрет ниже.</span>
                        </div>
                        <div class="rdp-adv-field">
                            <label class="rdp-adv-field-label" for="rdp-secret-id">Секрет (пароль)</label>
                            <select id="rdp-secret-id" class="form-control">
                                <option value="">Не выбран</option>
                            </select>
                            <span class="rdp-adv-field-help">Пароль из хранилища секретов AWM. Для RDP/VNC обычно нужен пароль или секрет; для SSH — при входе по паролю.</span>
                        </div>
                        <div class="rdp-adv-field" id="rdp-ssh-key-field">
                            <label class="rdp-adv-field-label" for="rdp-ssh-key-id">SSH-ключ</label>
                            <select id="rdp-ssh-key-id" class="form-control">
                                <option value="">Не выбран</option>
                            </select>
                            <span class="rdp-adv-field-help">Приватный ключ из хранилища AWM. Актуален для протокола SSH.</span>
                        </div>
                    </div>
                </section>

                <section class="rdp-adv-section" id="rdp-upload-section">
                    <h4 class="rdp-adv-section-title">Передача файлов</h4>
                    <p class="rdp-adv-section-desc">Куда попадут файлы при загрузке из окна сессии. Канал: общий диск Guacamole (RDP) и/или SFTP — галочки на вкладке «Расширенные». Подсказки зависят от протокола и целевой ОС.</p>
                    <div class="rdp-adv-fields">
                        <div class="rdp-adv-field">
                            <label class="rdp-adv-field-label" for="rdp-upload-target">Назначение загрузки</label>
                            <select id="rdp-upload-target" class="form-control">
                                <option value="drive">Общий диск Guacamole (RDP)</option>
                                <option value="desktop">Рабочий стол (VNC / Linux)</option>
                                <option value="home">Домашняя директория (SSH/VNC)</option>
                                <option value="awm_rd_upload">Домашняя / AWM-RD-UPLOAD (SSH)</option>
                                <option value="custom">Указанный каталог</option>
                            </select>
                            <span class="rdp-adv-field-help" id="rdp-upload-target-help">Для RDP Windows файлы появляются как диск «AWM». Для RDP Linux — в ~/thinclient_drives/awm_drive_rd. Для SSH — каталог AWM-RD-UPLOAD.</span>
                        </div>
                        <div class="rdp-adv-field" id="rdp-upload-custom-wrap" hidden>
                            <label class="rdp-adv-field-label" for="rdp-upload-custom-path">Каталог на хосте</label>
                            <input id="rdp-upload-custom-path" class="form-control" type="text" placeholder="~/Documents или /tmp/uploads">
                            <span class="rdp-adv-field-help">Для SFTP: путь относительно домашнего каталога или абсолютный. Для RDP: подкаталог на общем диске Guacamole.</span>
                        </div>
                    </div>
                </section>

                <section class="rdp-adv-section" id="rdp-display-section">
                    <h4 class="rdp-adv-section-title">Разрешение экрана</h4>
                    <p class="rdp-adv-section-desc">Размер удалённого рабочего стола при подключении. Режим «Авто» берёт размер окна сессии один раз при старте; дальше окно и полный экран только масштабируют изображение (иконки на рабочем столе не перестраиваются). Смена пресета в сессии меняет разрешение на хосте.</p>
                    <div class="rdp-adv-fields">
                        <div class="rdp-adv-field">
                            <label class="rdp-adv-field-label" for="rdp-resolution-preset">Разрешение</label>
                            <select id="rdp-resolution-preset" class="form-control">
                                <option value="auto">Авто — размер окна при подключении</option>
                                {% include "partials/rdp_resolution_preset_options.html" %}
                            </select>
                            <span class="rdp-adv-field-help">В сессии масштаб «По окну» не меняет разрешение на удалённом хосте. Явная смена пресета разрешения — меняет.</span>
                        </div>
                    </div>
                </section>

                <section class="rdp-adv-section">
                    <h4 class="rdp-adv-section-title">Доступ и заметки</h4>
                    <p class="rdp-adv-section-desc">Кому видно подключение и служебные комментарии.</p>
                    <div class="rdp-adv-fields">
                        <div class="rdp-adv-field">
                            <label class="rdp-adv-field-label" for="rdp-group-id">Доступ</label>
                            <select id="rdp-group-id" class="form-control">
                                <option value="">Личное (только владелец)</option>
                            </select>
                            <span class="rdp-adv-field-help">Личное — видите только вы. Командное — выберите группу из списка доступных вам; участники группы смогут пользоваться подключением.</span>
                        </div>
                        <div class="rdp-adv-field">
                            <label class="rdp-adv-field-label" for="rdp-notes">Заметки</label>
                            <textarea id="rdp-notes" class="form-control" rows="3" placeholder="Назначение, особенности входа…"></textarea>
                            <span class="rdp-adv-field-help">Произвольный комментарий для себя и коллег. В Guacamole не передаётся.</span>
                        </div>
                    </div>
                </section>
            </div>
        </div>

        <div id="rdp-tab-advanced" class="rdp-tab-pane" role="tabpanel">
            <p class="rdp-adv-hint" id="rdp-adv-tab-hint">Параметры для выбранного протокола и ОС. Показаны только релевантные блоки. Пустые поля не передаются — действуют значения по умолчанию AWM и Guacamole.</p>
            <div id="rdp-advanced-fields" class="rdp-adv-list"></div>
        </div>
        </div>

        <div class="rdp-modal-footer">
            <button type="button" class="btn btn-secondary" onclick="rdpCloseForm()">Отмена</button>
            <button type="button" class="btn btn-primary" onclick="rdpSaveConnection()">Сохранить</button>
        </div>
    </div>
</div>

<script type="application/json" id="rdp-page-config">{{ {"can_write": can_write, "can_delete": can_delete, "can_manage_settings": can_manage_settings, "can_read": can_read, "setup_mode": setup_mode}|tojson }}</script>
<script src="/static/js/remote_desktop.js?v=rdp-guest-os1"></script>
{% endblock %}