{% extends "base.html" %}

{% block title %}登录信息{% endblock %}

{% block content %}
<h2>🔐 登录信息</h2>
<form method="post" action="/login">
    <div class="mb-3">
        <label for="user" class="form-label" id="user-label">用户名</label>
        <input type="text" class="form-control" id="user" name="user">
    </div>
    <div class="mb-3">
        <label for="pw" class="form-label" id="pw-label">密码</label>
        <input type="password" class="form-control" id="pw" name="pw">
    </div>
        <div class="mb-3">
        <label for="token" class="form-label">Token</label>
        <input type="text" class="form-control" id="token" name="token" value="{{ token }}">
    </div>
    <div class="mb-3">
        <label for="scheme" class="form-label">协议</label>
        <select class="form-select" id="scheme" name="scheme">
            <option value="http" {% if scheme == 'http' %}selected{% endif %}>http</option>
            <option value="https" {% if scheme == 'https' %}selected{% endif %}>https</option>
        </select>
    </div>
    <div class="mb-3">
        <label for="url" class="form-label">服务器地址</label>
        <input type="text" class="form-control" id="url" name="url" placeholder="127.0.0.1 或 plex.sample.com" value="{{ server_url }}">
    </div>
    <div class="mb-3">
        <label for="port" class="form-label">端口</label>
        <input type="text" class="form-control" id="port" name="port" value="{{ port }}">
    </div>
    <div class="mb-3">
        <label for="library_name" class="form-label">音乐库</label>
        <select class="form-select" id="library_name" name="library_name" {% if not music_libraries %}disabled{% endif %}>
            {% if music_libraries %}
            {% for library in music_libraries %}
            <option value="{{ library }}" {% if selected_library == library %}selected{% endif %}>{{ library }}</option>
            {% endfor %}
            {% else %}
            <option value="" selected>暂无可用的音乐库</option>
            {% endif %}
        </select>
        <div class="form-text">仅显示音乐类型的库，可在连接成功后自动刷新。</div>
    </div>
    <button type="submit" class="btn btn-primary">连接</button>
</form>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const tokenInput = document.getElementById('token');
        const inputs = [document.getElementById('user'), document.getElementById('pw')];
        const labels = [document.getElementById('user-label'), document.getElementById('pw-label')];
        const fieldClasses = ['bg-body-secondary', 'text-body-secondary', 'text-decoration-line-through'];

        function toggleCredFields() {
            const inactive = tokenInput.value.trim() !== '';
            inputs.forEach(el => {
                el.readOnly = inactive;
                el.tabIndex = inactive ? -1 : 0;
                el.style.pointerEvents = inactive ? 'none' : '';
                if (inactive && document.activeElement === el) {
                    el.blur();
                }
                fieldClasses.forEach(cls => el.classList.toggle(cls, inactive));
            });
            labels.forEach(el => {
                ['text-decoration-line-through', 'text-body-secondary'].forEach(cls => el.classList.toggle(cls, inactive));
            });
        }

        tokenInput.addEventListener('input', toggleCredFields);
        toggleCredFields();
    });
</script>
{% endblock %}