{% extends "base.html" %}
{% block title %}설치마법사 - 리얼컴 NAS UI{% endblock %}
{% block content %}
<div class="container">
    <div class="panel" style="width:430px;">
        <h2>패키지 설치</h2>
        <form method="post">
            <div class="form-row" style="gap:8px;">
                <select name="pkg" style="width: 185px;">
                    <option value="ALL">💡 전체 패키지 한 번에 설치</option>
                    {% for p, desc in desc.items() %}
                    <option value="{{p}}">{{p}} ({{desc}})</option>
                    {% endfor %}
                </select>
                <button type="submit" class="edit-btn">설치</button>
            </div>
        </form>
        {% if output %}
            <div class="small" style="color:green; margin-top:8px; white-space:pre-wrap;">{{output}}</div>
        {% endif %}
        <div class="small" style="margin-top:10px;">※ “설치됨” 표시는 현재 시스템에 설치된 패키지임을 의미합니다.<br>버전 표시는 일부 pip 패키지는 -로 표시될 수 있습니다.</div>
    </div>
    <div class="panel" style="flex:1;">
        <h2>설치 상태 및 버전</h2>
        <table>
            <tr>
                <th style="width:100px;">패키지</th>
                <th style="width:210px;">설명</th>
                <th style="width:60px;">상태</th>
                <th style="width:80px;">버전</th>
            </tr>
            {% for p, desc in desc.items() %}
            <tr>
                <td>{{p}}</td>
                <td>{{desc}}</td>
                <td>
                    {% if status[p] %}
                        <span style="color:#299e40; font-weight:bold;">설치됨</span>
                    {% else %}
                        <span style="color:#e81c3d;">미설치</span>
                    {% endif %}
                </td>
                <td>{{versions[p] if versions[p] else "-"}}</td>
            </tr>
            {% endfor %}
        </table>
    </div>
</div>
{% endblock %}