{% extends "layout.html" %}
{% set active_page = 'm2000_password' %}
{% block title %}m2000 Password Generator - {{ super() }}{% endblock %}

{% block content %}
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 id="page-title" class="mb-0">m2000 Password Generator</h2>
    </div>
    <hr>
    <div id="password-view">
        <p>Enter an m2000 serial number to generate its password.</p>
        <div class="row align-items-end g-3">
            <div class="col-md-4">
                <label for="serial-input" class="form-label">Serial Number</label>
                <input type="text" class="form-control" id="serial-input">
            </div>
            <div class="col-auto">
                <button class="btn btn-primary" id="getPasswordBtn">Generate Password</button>
            </div>
        </div>
    </div>
    <div class="mt-4">
        <h4>Result</h4>
        <div id="spinner" class="d-none spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div>
        <div id="results-output" class="p-3"></div>
    </div>
{% endblock %}

{% block extra_scripts %}
<script defer>
    const serialInput = document.getElementById('serial-input');
    const getPasswordBtn = document.getElementById('getPasswordBtn');
    
    async function generatePassword() {
        const serial = serialInput.value;
        if (!serial) {
            alert('Please enter a serial number.');
            return;
        }

        // CHANGED: Update the URL in the browser's history
        history.pushState({}, '', `/m2000psw?serial=${serial}`);
        
        const result = await apiCall('/api/m2000/get-password', { serial });
        if (result) {
            resultsOutput.innerHTML = `
                <dl class="row">
                    <dt class="col-sm-3">Serial Number:</dt>
                    <dd class="col-sm-9">${result.serial}</dd>
                    <dt class="col-sm-3">Derived Password:</dt>
                    <dd class="col-sm-9"><code>${result.password}</code></dd>
                </dl>
            `;
        }
    }

    getPasswordBtn.addEventListener('click', generatePassword);

    document.addEventListener('DOMContentLoaded', () => {
        const serialFromUrl = '{{ serial_from_url|default("", True) }}';
        if (serialFromUrl) {
            serialInput.value = serialFromUrl;
            getPasswordBtn.click();
        }
    });
</script>
{% endblock %}