{% extends "base.html" %}
{% block title %}Password Generator - EveryTools{% endblock %}
{% block top_title %}Password Generator{% endblock %}

{% block content %}
<div class="client-tool" style="max-width:500px">
    <div class="tool-header">
        <h1>Password Generator</h1>
        <p>Generate strong, random passwords</p>
    </div>

    <div class="calc-display" style="position:relative;cursor:pointer" onclick="copyPw()">
        <div id="pw-output" style="font-family:Consolas,Monaco,monospace;font-size:1.4rem;word-break:break-all;min-height:1.5em;letter-spacing:.05em"></div>
        <div style="font-size:.75rem;color:var(--text-light);margin-top:.3rem"><i class="bi bi-clipboard"></i> Click to copy</div>
    </div>

    <div style="display:flex;gap:.5rem;margin-bottom:1.2rem">
        <button class="btn btn-primary" onclick="generate()" style="flex:1"><i class="bi bi-arrow-repeat"></i> Generate</button>
        <button class="btn btn-small" onclick="copyPw()"><i class="bi bi-clipboard"></i> Copy</button>
    </div>

    <div class="form-group">
        <label>Length: <span id="pw-len-val">16</span></label>
        <div class="range-group">
            <input type="range" id="pw-length" value="16" min="4" max="128" oninput="document.getElementById('pw-len-val').textContent=this.value;generate()">
        </div>
    </div>

    <div style="display:grid;grid-template-columns:1fr 1fr;gap:.5rem">
        <label class="checkbox-label"><input type="checkbox" id="pw-upper" checked onchange="generate()"><span>Uppercase (A-Z)</span></label>
        <label class="checkbox-label"><input type="checkbox" id="pw-lower" checked onchange="generate()"><span>Lowercase (a-z)</span></label>
        <label class="checkbox-label"><input type="checkbox" id="pw-digits" checked onchange="generate()"><span>Digits (0-9)</span></label>
        <label class="checkbox-label"><input type="checkbox" id="pw-symbols" checked onchange="generate()"><span>Symbols (!@#$...)</span></label>
    </div>

    <div id="pw-strength" style="margin-top:1rem"></div>
</div>
{% endblock %}

{% block scripts %}
<style>
.strength-bar { height: 6px; border-radius: 3px; background: var(--border); margin-top: .5rem; overflow: hidden; }
.strength-fill { height: 100%; border-radius: 3px; transition: width .3s, background .3s; }
</style>
<script>
function generate() {
    const len = parseInt(document.getElementById("pw-length").value);
    let chars = "";
    if (document.getElementById("pw-upper").checked) chars += "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    if (document.getElementById("pw-lower").checked) chars += "abcdefghijklmnopqrstuvwxyz";
    if (document.getElementById("pw-digits").checked) chars += "0123456789";
    if (document.getElementById("pw-symbols").checked) chars += "!@#$%^&*()_+-=[]{}|;:,.<>?";

    if (!chars) { document.getElementById("pw-output").textContent = "Select at least one option"; return; }

    const arr = new Uint32Array(len);
    crypto.getRandomValues(arr);
    let pw = "";
    for (let i = 0; i < len; i++) pw += chars[arr[i] % chars.length];

    document.getElementById("pw-output").textContent = pw;
    showStrength(pw, chars.length);
}

function showStrength(pw, poolSize) {
    const entropy = pw.length * Math.log2(poolSize);
    let label, color, pct;
    if (entropy < 40) { label = "Weak"; color = "var(--danger)"; pct = 25; }
    else if (entropy < 60) { label = "Fair"; color = "var(--warning)"; pct = 50; }
    else if (entropy < 80) { label = "Strong"; color = "var(--success)"; pct = 75; }
    else { label = "Very Strong"; color = "var(--primary)"; pct = 100; }

    document.getElementById("pw-strength").innerHTML =
        `<div style="display:flex;justify-content:space-between;font-size:.85rem"><span>${label}</span><span style="color:var(--text-light)">${Math.round(entropy)} bits of entropy</span></div>` +
        `<div class="strength-bar"><div class="strength-fill" style="width:${pct}%;background:${color}"></div></div>`;
}

function copyPw() {
    const pw = document.getElementById("pw-output").textContent;
    if (pw && !pw.startsWith("Select")) navigator.clipboard.writeText(pw);
}

generate();
</script>
{% endblock %}