{% extends "base.html" %}
{% block title %}Color Converter - EveryTools{% endblock %}
{% block top_title %}Color Converter{% endblock %}

{% block content %}
<div class="client-tool">
    <div class="tool-header">
        <h1>Color Converter</h1>
        <p>Convert between HEX, RGB, and HSL color formats</p>
    </div>
    <div class="color-preview" id="color-preview"></div>
    <div class="form-group" style="margin-bottom:1rem">
        <label>Color Picker</label>
        <input type="color" id="color-picker" value="#4361ee" onchange="fromPicker()" style="width:60px;height:36px;padding:2px;cursor:pointer">
    </div>
    <div class="color-inputs">
        <div class="form-group">
            <label>HEX</label>
            <input type="text" id="c-hex" value="#4361ee" oninput="fromHex()">
        </div>
        <div class="form-group">
            <label>RGB</label>
            <div style="display:flex;gap:.3rem">
                <input type="number" id="c-r" min="0" max="255" value="67" oninput="fromRGB()" placeholder="R" style="width:33%">
                <input type="number" id="c-g" min="0" max="255" value="97" oninput="fromRGB()" placeholder="G" style="width:33%">
                <input type="number" id="c-b" min="0" max="255" value="238" oninput="fromRGB()" placeholder="B" style="width:33%">
            </div>
        </div>
        <div class="form-group">
            <label>HSL</label>
            <div style="display:flex;gap:.3rem">
                <input type="number" id="c-h" min="0" max="360" value="229" oninput="fromHSL()" placeholder="H" style="width:33%">
                <input type="number" id="c-s" min="0" max="100" value="82" oninput="fromHSL()" placeholder="S%" style="width:33%">
                <input type="number" id="c-l" min="0" max="100" value="60" oninput="fromHSL()" placeholder="L%" style="width:33%">
            </div>
        </div>
        <div class="form-group">
            <label>CSS</label>
            <input type="text" id="c-css" readonly>
            <button class="btn btn-small" style="margin-top:.3rem" onclick="navigator.clipboard.writeText(document.getElementById('c-css').value)"><i class="bi bi-clipboard"></i> Copy</button>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function updatePreview(r, g, b) {
    const hex = rgbToHex(r, g, b);
    document.getElementById("color-preview").style.background = hex;
    document.getElementById("c-css").value = `rgb(${r}, ${g}, ${b})`;
    document.getElementById("color-picker").value = hex;
}

function fromPicker() {
    const hex = document.getElementById("color-picker").value;
    document.getElementById("c-hex").value = hex;
    fromHex();
}

function fromHex() {
    let hex = document.getElementById("c-hex").value.trim().replace("#", "");
    if (hex.length === 3) hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
    if (hex.length !== 6) return;

    const r = parseInt(hex.slice(0,2), 16);
    const g = parseInt(hex.slice(2,4), 16);
    const b = parseInt(hex.slice(4,6), 16);
    if (isNaN(r) || isNaN(g) || isNaN(b)) return;

    document.getElementById("c-r").value = r;
    document.getElementById("c-g").value = g;
    document.getElementById("c-b").value = b;

    const [h, s, l] = rgbToHsl(r, g, b);
    document.getElementById("c-h").value = h;
    document.getElementById("c-s").value = s;
    document.getElementById("c-l").value = l;

    updatePreview(r, g, b);
}

function fromRGB() {
    const r = parseInt(document.getElementById("c-r").value) || 0;
    const g = parseInt(document.getElementById("c-g").value) || 0;
    const b = parseInt(document.getElementById("c-b").value) || 0;

    document.getElementById("c-hex").value = rgbToHex(r, g, b);
    const [h, s, l] = rgbToHsl(r, g, b);
    document.getElementById("c-h").value = h;
    document.getElementById("c-s").value = s;
    document.getElementById("c-l").value = l;

    updatePreview(r, g, b);
}

function fromHSL() {
    const h = parseInt(document.getElementById("c-h").value) || 0;
    const s = parseInt(document.getElementById("c-s").value) || 0;
    const l = parseInt(document.getElementById("c-l").value) || 0;

    const [r, g, b] = hslToRgb(h, s, l);
    document.getElementById("c-r").value = r;
    document.getElementById("c-g").value = g;
    document.getElementById("c-b").value = b;
    document.getElementById("c-hex").value = rgbToHex(r, g, b);

    updatePreview(r, g, b);
}

function rgbToHex(r, g, b) {
    return "#" + [r,g,b].map(x => Math.max(0,Math.min(255,x)).toString(16).padStart(2,"0")).join("");
}

function rgbToHsl(r, g, b) {
    r /= 255; g /= 255; b /= 255;
    const max = Math.max(r,g,b), min = Math.min(r,g,b);
    let h, s, l = (max + min) / 2;

    if (max === min) { h = s = 0; }
    else {
        const d = max - min;
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
        switch (max) {
            case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
            case g: h = ((b - r) / d + 2) / 6; break;
            case b: h = ((r - g) / d + 4) / 6; break;
        }
    }
    return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];
}

function hslToRgb(h, s, l) {
    h /= 360; s /= 100; l /= 100;
    let r, g, b;
    if (s === 0) { r = g = b = l; }
    else {
        const hue2rgb = (p, q, t) => {
            if (t < 0) t += 1;
            if (t > 1) t -= 1;
            if (t < 1/6) return p + (q - p) * 6 * t;
            if (t < 1/2) return q;
            if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
            return p;
        };
        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
        const p = 2 * l - q;
        r = hue2rgb(p, q, h + 1/3);
        g = hue2rgb(p, q, h);
        b = hue2rgb(p, q, h - 1/3);
    }
    return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
}

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