<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Printer Media Sizes</title>
  <link rel="icon" type="image/x-icon" href="/static/images/favicon.ico" />
  <link rel="stylesheet" href="/static/css/styles.css" />
  <link rel="stylesheet" href="/static/fontawesome/css/all.min.css" />
  <script src="/static/js/jquery-3.7.1.js"></script>
  <script src="/static/js/printers.js"></script>

  <!-- Modern aesthetic (non-breaking). Keeps all existing IDs and names. -->
  <style>
    :root{
      --bg: #0b0d10;
      --panel: #12161b;
      --card: #141a20;
      --muted: #c7d1db;
      --primary: #3b82f6; /* blue-500 */
      --primary-700: #1d4ed8;
      --ring: rgba(59,130,246,.35);
      --radius: 14px;
      --gap: 16px;
    }
    html, body { height:100%; }
    body{
      margin:0; color:var(--muted); background: linear-gradient(180deg, #0b0d10 0%, #0e1217 100%);
      font: 500 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, sans-serif;
      -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
    }

    /* Top nav injection target */
    #navbar { position: sticky; top:0; z-index: 100; backdrop-filter: blur(6px); }

    .wrapper{ max-width: 1100px; margin: 0 auto; padding: 24px 16px 56px; }

    /* Page header */
    .page-header{ display:flex; align-items:center; gap:16px; justify-content:center; margin: 8px 0 24px; }
    .page-header .header-img{ width:auto; height:72px; margin:0; filter: drop-shadow(0 4px 14px rgba(0,0,0,.4)); }
    h1{ font-size: clamp(22px, 3vw, 32px); font-weight: 700; letter-spacing: .2px; margin: 0; text-align:center; }
    .subtitle{ opacity:.8; font-size: .95rem; text-align:center; margin-top:6px; }

    /* Card-like sections */
    details.card{ background: var(--card); border: 1px solid rgba(255,255,255,.05); border-radius: var(--radius); overflow:hidden; box-shadow: 0 10px 30px rgba(0,0,0,.35); margin-bottom: 18px; }
    details.card[open]{ box-shadow: 0 16px 38px rgba(0,0,0,.45); }
    details.card > summary{ list-style:none; display:flex; align-items:center; gap:10px; cursor:pointer; padding: 14px 16px; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.00)); }
    details.card > summary::-webkit-details-marker{ display:none; }
    .chev{ width: 10px; height:10px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform: rotate(-45deg); transition: transform .18s ease; margin-right: 4px; opacity:.9; }
    details.card[open] > summary .chev{ transform: rotate(45deg); }
    details.card > summary .ttl{ font-weight: 700; letter-spacing: .2px; }
    .card-body{ padding: 16px; display:grid; gap:18px; background: var(--panel); border-top: 1px solid rgba(255,255,255,.05); }

    /* Controls layout within cards */
    .grid-2{ display:grid; grid-template-columns: 1fr; gap: var(--gap); }
    @media (min-width: 840px){ .grid-2{ grid-template-columns: 1fr 1fr; } }

    /* Printer picker block */
    .picker{ display:grid; gap:10px; align-content:start; }
    label{ font-weight:600; font-size: .95rem; opacity:.95; }
    select{ appearance:none; background:#0e141a; color:#e5edf5; border:1px solid rgba(255,255,255,.08); border-radius: 10px; padding:10px 12px; min-width: 220px; outline: none; box-shadow: 0 0 0 0 var(--ring); transition: box-shadow .15s ease, border-color .15s ease; }
    select:focus{ border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring); }

    /* Media sizes list */
    #media-sizes ul{ list-style:none; margin:0; padding:0; }
    #media-sizes li{ display:flex; align-items:center; gap:12px; padding:8px 10px; border:1px solid rgba(255,255,255,.06); border-radius: 10px; background: #0f141a; }
    #media-sizes input[type="checkbox"]{ transform: scale(1.25); }

    /* Buttons */
    .actions{ display:flex; gap:10px; flex-wrap:wrap; }
    button, input[type="submit"], .btn{ background: var(--primary); color:white; border:1px solid rgba(255,255,255,.06); border-radius: 10px; padding: 10px 14px; font-weight:700; letter-spacing:.2px; cursor:pointer; transition: transform .06s ease, background .15s ease; }
    button:hover, .btn:hover{ background: var(--primary-700); }
    button:active, .btn:active{ transform: translateY(1px); }

    /* Tables → keep structure, modern look */
    table{ width:100%; border-collapse: separate; border-spacing: 0 10px; }
    th, td{ vertical-align: middle; }
    th.label{ text-align:right; padding: 6px 10px 6px 0; white-space: nowrap; opacity:.9; }
    td > select{ min-width: 220px; }

    /* Tools section */
    .tools{ display:flex; gap:10px; align-items:center; }

    /* Container to keep content centered */
    .content-wrapper{ display:block; }
    .content{ background: transparent; }
  </style>
</head>
<body>
  <div id="navbar"></div>
  <script>
    fetch('/static/html/nav.html').then(r=>r.text()).then(html=>{ document.getElementById('navbar').innerHTML = html; });
  </script>

  <main class="wrapper">
    <header class="page-header">
      <img src="/static/images/color_cards.png" alt="cards" class="header-img" />
      <div>
        <h1>Media & Color Settings</h1>
        <div class="subtitle">Choose a printer, adjust supported sizes, and fine‑tune color.</div>
      </div>
    </header>

    <section class="details-container">
      <!-- Card 1: Printer Media Sizes -->
      <details class="card" open>
        <summary><span class="chev"></span><span class="ttl">Printer Media Sizes</span></summary>
        <div class="card-body">
          <div class="grid-2">
            <div class="picker">
              <label for="printers">Select Printer</label>
              <select id="printers">
                <option value="">--Select a printer--</option>
              </select>
              <div class="actions">
                <button id="save" type="button">Save Changes</button>
              </div>
            </div>
            <div>
              <label for="printers">Available Sizes</label>
              <div id="media-sizes"></div>
            </div>
          </div>
        </div>
      </details>

      <!-- Card 2: Color Settings (General) -->
      <form id="colorOptionsForm" action="/save_color_options" onsubmit="submitForm(event)">
        <details class="card">
          <summary><span class="chev"></span><span class="ttl">Color Settings (General)</span></summary>
          <div class="card-body">
            <table>
              <tr>
                <th class="label" width="50%"><a name="ColorModel">Color Model</a>:</th>
                <td>
                  <input type="checkbox" name="color-enabled" id="color-enabled" style="margin-right: 10px; transform: scale(1.2);" />
                  <label for="color-enabled">Enabled</label>
                  <select name="ColorModel" id="select-ColorModel" onchange="update_paramtable('ColorModel')">
                    <option value="Gray">Grayscale</option>
                    <option value="Black">Inverted Grayscale</option>
                    <option value="RGB">RGB Color</option>
                    <option value="CMY">CMY Color</option>
                    <option value="CMYK">CMYK</option>
                    <option value="KCMY">KCMY</option>
                  </select>
                </td>
              </tr>
              <tr>
                <th class="label" width="50%"><a name="StpColorPrecision">Color Precision</a>:</th>
                <td>
                  <select name="StpColorPrecision" id="select-StpColorPrecision" onchange="update_paramtable('StpColorPrecision')">
                    <option value="Normal">Normal</option>
                    <option value="Best">Best</option>
                  </select>
                </td>
              </tr>
              <tr>
                <th class="label" width="50%"><a name="StpiShrinkOutput">Shrink Page If Necessary to Fit Borders</a>:</th>
                <td>
                  <select name="StpiShrinkOutput" id="select-StpiShrinkOutput" onchange="update_paramtable('StpiShrinkOutput')">
                    <option value="Shrink">Shrink (print the whole page)</option>
                    <option value="Crop">Crop (preserve dimensions)</option>
                    <option value="Expand">Expand (use maximum page area)</option>
                  </select>
                </td>
              </tr>
            </table>
            <div class="actions"><button type="submit">Save Changes</button></div>
          </div>
        </details>

        <!-- Card 3: Color Settings (Common) -->
        <details class="card">
          <summary><span class="chev"></span><span class="ttl">Color Settings (Common)</span></summary>
          <div class="card-body">
            <table>
              <tr>
                <th class="label" width="50%"><a name="StpColorCorrection">Color Correction</a>:</th>
                <td>
                  <select name="StpColorCorrection" id="select-StpColorCorrection" onchange="update_paramtable('StpColorCorrection')">
                    <option value="None">Default</option>
                    <option value="Accurate">High Accuracy</option>
                    <option value="Bright">Bright Colors</option>
                    <option value="Hue">Correct Hue Only</option>
                    <option value="Uncorrected">Uncorrected</option>
                    <option value="Desaturated">Desaturated</option>
                    <option value="Threshold">Threshold</option>
                    <option value="Density">Density</option>
                    <option value="Raw">Raw</option>
                    <option value="Predithered">Pre-Dithered</option>
                  </select>
                </td>
              </tr>
              <tr>
                <th class="label" width="50%"><a name="StpBrightness">Brightness</a>:</th>
                <td>
                  <select name="StpBrightness" id="select-StpBrightness" onchange="update_paramtable('StpBrightness')">
                    <option value="0">0.000</option>
                    <option value="100">0.100</option>
                    <option value="200">0.200</option>
                    <option value="300">0.300</option>
                    <option value="400">0.400</option>
                    <option value="500">0.500</option>
                    <option value="600">0.600</option>
                    <option value="700">0.700</option>
                    <option value="800">0.800</option>
                    <option value="900">0.900</option>
                    <option value="None">1.000</option>
                    <option value="1100">1.100</option>
                    <option value="1200">1.200</option>
                    <option value="1300">1.300</option>
                    <option value="1400">1.400</option>
                    <option value="1500">1.500</option>
                    <option value="1600">1.600</option>
                    <option value="1700">1.700</option>
                    <option value="1800">1.800</option>
                    <option value="1900">1.900</option>
                    <option value="2000">2.000</option>
                  </select>
                </td>
              </tr>
              <tr>
                <th class="label" width="50%"><a name="StpFineBrightness">Brightness Fine Adjustment</a>:</th>
                <td>
                  <select name="StpFineBrightness" id="select-StpFineBrightness" onchange="update_paramtable('StpFineBrightness')">
                    <option value="None">0.000</option>
                    <option value="0">0.000</option>
                    <option value="5">0.005</option>
                    <option value="10">0.010</option>
                    <option value="15">0.015</option>
                    <option value="20">0.020</option>
                    <option value="25">0.025</option>
                    <option value="30">0.030</option>
                    <option value="35">0.035</option>
                    <option value="40">0.040</option>
                    <option value="45">0.045</option>
                    <option value="50">0.050</option>
                    <option value="55">0.055</option>
                    <option value="60">0.060</option>
                    <option value="65">0.065</option>
                    <option value="70">0.070</option>
                    <option value="75">0.075</option>
                    <option value="80">0.080</option>
                    <option value="85">0.085</option>
                    <option value="90">0.090</option>
                    <option value="95">0.095</option>
                  </select>
                </td>
              </tr>
              <tr>
                <th class="label" width="50%"><a name="StpContrast">Contrast</a>:</th>
                <td>
                  <select name="StpContrast" id="select-StpContrast" onchange="update_paramtable('StpContrast')">
                    <option value="0">0.000</option>
                    <option value="100">0.100</option>
                    <option value="200">0.200</option>
                    <option value="300">0.300</option>
                    <option value="400">0.400</option>
                    <option value="500">0.500</option>
                    <option value="600">0.600</option>
                    <option value="700">0.700</option>
                    <option value="800">0.800</option>
                    <option value="900">0.900</option>
                    <option value="None">1.000</option>
                    <option value="1100">1.100</option>
                    <option value="1200">1.200</option>
                    <option value="1300">1.300</option>
                    <option value="1400">1.400</option>
                    <option value="1500">1.500</option>
                    <option value="1600">1.600</option>
                    <option value="1700">1.700</option>
                    <option value="1800">1.800</option>
                    <option value="1900">1.900</option>
                    <option value="2000">2.000</option>
                    <option value="2100">2.100</option>
                    <option value="2200">2.200</option>
                    <option value="2300">2.300</option>
                    <option value="2400">2.400</option>
                    <option value="2500">2.500</option>
                    <option value="2600">2.600</option>
                    <option value="2700">2.700</option>
                    <option value="2800">2.800</option>
                    <option value="2900">2.900</option>
                    <option value="3000">3.000</option>
                    <option value="3100">3.100</option>
                    <option value="3200">3.200</option>
                    <option value="3300">3.300</option>
                    <option value="3400">3.400</option>
                    <option value="3500">3.500</option>
                    <option value="3600">3.600</option>
                    <option value="3700">3.700</option>
                    <option value="3800">3.800</option>
                    <option value="3900">3.900</option>
                    <option value="4000">4.000</option>
                  </select>
                </td>
              </tr>
              <tr>
                <th class="label" width="50%"><a name="StpFineContrast">Contrast Fine Adjustment</a>:</th>
                <td>
                  <select name="StpFineContrast" id="select-StpFineContrast" onchange="update_paramtable('StpFineContrast')">
                    <option value="None">0.000</option>
                    <option value="0">0.000</option>
                    <option value="5">0.005</option>
                    <option value="10">0.010</option>
                    <option value="15">0.015</option>
                    <option value="20">0.020</option>
                    <option value="25">0.025</option>
                    <option value="30">0.030</option>
                    <option value="35">0.035</option>
                    <option value="40">0.040</option>
                    <option value="45">0.045</option>
                    <option value="50">0.050</option>
                    <option value="55">0.055</option>
                    <option value="60">0.060</option>
                    <option value="65">0.065</option>
                    <option value="70">0.070</option>
                    <option value="75">0.075</option>
                    <option value="80">0.080</option>
                    <option value="85">0.085</option>
                    <option value="90">0.090</option>
                    <option value="95">0.095</option>
                  </select>
                </td>
              </tr>
              <tr>
                <th class="label" width="50%"><a name="StpSaturation">Saturation</a>:</th>
                <td>
                  <select name="StpSaturation" id="select-StpSaturation" onchange="update_paramtable('StpSaturation')">
                    <option value="0">0.000</option>
                    <option value="100">0.100</option>
                    <option value="200">0.200</option>
                    <option value="300">0.300</option>
                    <option value="400">0.400</option>
                    <option value="500">0.500</option>
                    <option value="600">0.600</option>
                    <option value="700">0.700</option>
                    <option value="800">0.800</option>
                    <option value="900">0.900</option>
                    <option value="None">1.000</option>
                    <option value="1100">1.100</option>
                    <option value="1200">1.200</option>
                    <option value="1300">1.300</option>
                    <option value="1400">1.400</option>
                    <option value="1500">1.500</option>
                    <option value="1600">1.600</option>
                    <option value="1700">1.700</option>
                    <option value="1800">1.800</option>
                    <option value="1900">1.900</option>
                    <option value="2000">2.000</option>
                    <option value="2100">2.100</option>
                    <option value="2200">2.200</option>
                    <option value="2300">2.300</option>
                    <option value="2400">2.400</option>
                    <option value="2500">2.500</option>
                    <option value="2600">2.600</option>
                    <option value="2700">2.700</option>
                    <option value="2800">2.800</option>
                    <option value="2900">2.900</option>
                    <option value="3000">3.000</option>
                    <option value="3100">3.100</option>
                    <option value="3200">3.200</option>
                    <option value="3300">3.300</option>
                    <option value="3400">3.400</option>
                    <option value="3500">3.500</option>
                    <option value="3600">3.600</option>
                    <option value="3700">3.700</option>
                    <option value="3800">3.800</option>
                    <option value="3900">3.900</option>
                    <option value="4000">4.000</option>
                    <option value="4100">4.100</option>
                    <option value="4200">4.200</option>
                    <option value="4300">4.300</option>
                    <option value="4400">4.400</option>
                    <option value="4500">4.500</option>
                    <option value="4600">4.600</option>
                    <option value="4700">4.700</option>
                    <option value="4800">4.800</option>
                    <option value="4900">4.900</option>
                    <option value="5000">5.000</option>
                    <option value="5100">5.100</option>
                    <option value="5200">5.200</option>
                    <option value="5300">5.300</option>
                    <option value="5400">5.400</option>
                    <option value="5500">5.500</option>
                    <option value="5600">5.600</option>
                    <option value="5700">5.700</option>
                    <option value="5800">5.800</option>
                    <option value="5900">5.900</option>
                    <option value="6000">6.000</option>
                    <option value="6100">6.100</option>
                    <option value="6200">6.200</option>
                    <option value="6300">6.300</option>
                    <option value="6400">6.400</option>
                    <option value="6500">6.500</option>
                    <option value="6600">6.600</option>
                    <option value="6700">6.700</option>
                    <option value="6800">6.800</option>
                    <option value="6900">6.900</option>
                    <option value="7000">7.000</option>
                    <option value="7100">7.100</option>
                    <option value="7200">7.200</option>
                    <option value="7300">7.300</option>
                    <option value="7400">7.400</option>
                    <option value="7500">7.500</option>
                    <option value="7600">7.600</option>
                    <option value="7700">7.700</option>
                    <option value="7800">7.800</option>
                    <option value="7900">7.900</option>
                    <option value="8000">8.000</option>
                    <option value="8100">8.100</option>
                    <option value="8200">8.200</option>
                    <option value="8300">8.300</option>
                    <option value="8400">8.400</option>
                    <option value="8500">8.500</option>
                    <option value="8600">8.600</option>
                    <option value="8700">8.700</option>
                    <option value="8800">8.800</option>
                    <option value="8900">8.900</option>
                    <option value="9000">9.000</option>
                  </select>
                </td>
              </tr>
              <tr>
                <th class="label" width="50%"><a name="StpFineSaturation">Saturation Fine Adjustment</a>:</th>
                <td>
                  <select name="StpFineSaturation" id="select-StpFineSaturation" onchange="update_paramtable('StpFineSaturation')">
                    <option value="None">0.000</option>
                    <option value="0">0.000</option>
                    <option value="5">0.005</option>
                    <option value="10">0.010</option>
                    <option value="15">0.015</option>
                    <option value="20">0.020</option>
                    <option value="25">0.025</option>
                    <option value="30">0.030</option>
                    <option value="35">0.035</option>
                    <option value="40">0.040</option>
                    <option value="45">0.045</option>
                    <option value="50">0.050</option>
                    <option value="55">0.055</option>
                    <option value="60">0.060</option>
                    <option value="65">0.065</option>
                    <option value="70">0.070</option>
                    <option value="75">0.075</option>
                    <option value="80">0.080</option>
                    <option value="85">0.085</option>
                    <option value="90">0.090</option>
                    <option value="95">0.095</option>
                  </select>
                </td>
              </tr>
              <tr>
                <th class="label" width="50%"><a name="StpImageType">Image Type</a>:</th>
                <td>
                  <select name="StpImageType" id="select-StpImageType" onchange="update_paramtable('StpImageType')">
                    <option value="None">Manual Control</option>
                    <option value="Text">Text</option>
                    <option value="Graphics">Graphics</option>
                    <option value="TextGraphics">Mixed Text and Graphics</option>
                    <option value="Photo">Photograph</option>
                    <option value="LineArt">Line Art</option>
                  </select>
                </td>
              </tr>
            </table>
            <div class="actions"><button type="submit">Save Changes</button></div>
          </div>
        </details>

        <!-- Card 4: Color Settings (Extra) -->
        <details class="card">
          <summary><span class="chev"></span><span class="ttl">Color Settings (Extra)</span></summary>
          <div class="card-body">
            <table>
              <tr>
                <th class="label" width="50%"><a name="StpGamma">Composite Gamma</a>:</th>
                <td>
                  <select name="StpGamma" id="select-StpGamma" onchange="update_paramtable('StpGamma')">
                    <option value="100">0.100</option>
                    <option value="200">0.200</option>
                    <option value="300">0.300</option>
                    <option value="400">0.400</option>
                    <option value="500">0.500</option>
                    <option value="600">0.600</option>
                    <option value="700">0.700</option>
                    <option value="800">0.800</option>
                    <option value="900">0.900</option>
                    <option value="1000">1.000</option>
                    <option value="1100">1.100</option>
                    <option value="1200">1.200</option>
                    <option value="1300">1.300</option>
                    <option value="1400">1.400</option>
                    <option value="1500">1.500</option>
                    <option value="1600">1.600</option>
                    <option value="1700">1.700</option>
                    <option value="1800">1.800</option>
                    <option value="1900">1.900</option>
                    <option value="2000">2.000</option>
                    <option value="2100">2.100</option>
                    <option value="2200">2.200</option>
                    <option value="2300">2.300</option>
                    <option value="2400">2.400</option>
                    <option value="2500">2.500</option>
                    <option value="2600">2.600</option>
                    <option value="2700">2.700</option>
                    <option value="2800">2.800</option>
                    <option value="2900">2.900</option>
                    <option value="3000">3.000</option>
                    <option value="3100">3.100</option>
                    <option value="3200">3.200</option>
                    <option value="3300">3.300</option>
                    <option value="3400">3.400</option>
                    <option value="3500">3.500</option>
                    <option value="3600">3.600</option>
                    <option value="3700">3.700</option>
                    <option value="3800">3.800</option>
                    <option value="3900">3.900</option>
                    <option value="4000">4.000</option>
                    <option value="None">None</option>
                    <option value="Custom">Custom</option>
                  </select>
                </td>
              </tr>
              <tr>
                <th class="label" width="50%"><a name="StpFineGamma">Composite Gamma Fine Adjustment</a>:</th>
                <td>
                  <select name="StpFineGamma" id="select-StpFineGamma" onchange="update_paramtable('StpFineGamma')">
                    <option value="None">0.000</option>
                    <option value="0">0.000</option>
                    <option value="5">0.005</option>
                    <option value="10">0.010</option>
                    <option value="15">0.015</option>
                    <option value="20">0.020</option>
                    <option value="25">0.025</option>
                    <option value="30">0.030</option>
                    <option value="35">0.035</option>
                    <option value="40">0.040</option>
                    <option value="45">0.045</option>
                    <option value="50">0.050</option>
                    <option value="55">0.055</option>
                    <option value="60">0.060</option>
                    <option value="65">0.065</option>
                    <option value="70">0.070</option>
                    <option value="75">0.075</option>
                    <option value="80">0.080</option>
                    <option value="85">0.085</option>
                    <option value="90">0.090</option>
                    <option value="95">0.095</option>
                  </select>
                </td>
              </tr>
              <tr>
                <th class="label" width="50%"><a name="StpCyanGamma">Cyan</a>:</th>
                <td>
                  <select name="StpCyanGamma" id="select-StpCyanGamma" onchange="update_paramtable('StpCyanGamma')">
                    <option value="0">0.000</option>
                    <option value="100">0.100</option>
                    <option value="200">0.200</option>
                    <option value="300">0.300</option>
                    <option value="400">0.400</option>
                    <option value="500">0.500</option>
                    <option value="600">0.600</option>
                    <option value="700">0.700</option>
                    <option value="800">0.800</option>
                    <option value="900">0.900</option>
                    <option value="1000">1.000</option>
                    <option value="1100">1.100</option>
                    <option value="1200">1.200</option>
                    <option value="1300">1.300</option>
                    <option value="1400">1.400</option>
                    <option value="1500">1.500</option>
                    <option value="1600">1.600</option>
                    <option value="1700">1.700</option>
                    <option value="1800">1.800</option>
                    <option value="1900">1.900</option>
                    <option value="2000">2.000</option>
                    <option value="2100">2.100</option>
                    <option value="2200">2.200</option>
                    <option value="2300">2.300</option>
                    <option value="2400">2.400</option>
                    <option value="2500">2.500</option>
                    <option value="2600">2.600</option>
                    <option value="2700">2.700</option>
                    <option value="2800">2.800</option>
                    <option value="2900">2.900</option>
                    <option value="3000">3.000</option>
                    <option value="3100">3.100</option>
                    <option value="3200">3.200</option>
                    <option value="3300">3.300</option>
                    <option value="3400">3.400</option>
                    <option value="3500">3.500</option>
                    <option value="3600">3.600</option>
                    <option value="3700">3.700</option>
                    <option value="3800">3.800</option>
                    <option value="3900">3.900</option>
                    <option value="4000">4.000</option>
                    <option value="None">None</option>
                    <option value="Custom">Custom</option>
                  </select>
                </td>
              </tr>
              <tr>
                <th class="label" width="50%"><a name="StpFineCyanGamma">Cyan Fine Adjustment</a>:</th>
                <td>
                  <select name="StpFineCyanGamma" id="select-StpFineCyanGamma" onchange="update_paramtable('StpFineCyanGamma')">
                    <option value="None">0.000</option>
                    <option value="0">0.000</option>
                    <option value="5">0.005</option>
                    <option value="10">0.010</option>
                    <option value="15">0.015</option>
                    <option value="20">0.020</option>
                    <option value="25">0.025</option>
                    <option value="30">0.030</option>
                    <option value="35">0.035</option>
                    <option value="40">0.040</option>
                    <option value="45">0.045</option>
                    <option value="50">0.050</option>
                    <option value="55">0.055</option>
                    <option value="60">0.060</option>
                    <option value="65">0.065</option>
                    <option value="70">0.070</option>
                    <option value="75">0.075</option>
                    <option value="80">0.080</option>
                    <option value="85">0.085</option>
                    <option value="90">0.090</option>
                    <option value="95">0.095</option>
                  </select>
                </td>
              </tr>
              <tr>
                <th class="label" width="50%"><a name="StpMagentaGamma">Magenta</a>:</th>
                <td>
                  <select name="StpMagentaGamma" id="select-StpMagentaGamma" onchange="update_paramtable('StpMagentaGamma')">
                    <option value="0">0.000</option>
                    <option value="100">0.100</option>
                    <option value="200">0.200</option>
                    <option value="300">0.300</option>
                    <option value="400">0.400</option>
                    <option value="500">0.500</option>
                    <option value="600">0.600</option>
                    <option value="700">0.700</option>
                    <option value="800">0.800</option>
                    <option value="900">0.900</option>
                    <option value="1000">1.000</option>
                    <option value="1100">1.100</option>
                    <option value="1200">1.200</option>
                    <option value="1300">1.300</option>
                    <option value="1400">1.400</option>
                    <option value="1500">1.500</option>
                    <option value="1600">1.600</option>
                    <option value="1700">1.700</option>
                    <option value="1800">1.800</option>
                    <option value="1900">1.900</option>
                    <option value="2000">2.000</option>
                    <option value="2100">2.100</option>
                    <option value="2200">2.200</option>
                    <option value="2300">2.300</option>
                    <option value="2400">2.400</option>
                    <option value="2500">2.500</option>
                    <option value="2600">2.600</option>
                    <option value="2700">2.700</option>
                    <option value="2800">2.800</option>
                    <option value="2900">2.900</option>
                    <option value="3000">3.000</option>
                    <option value="3100">3.100</option>
                    <option value="3200">3.200</option>
                    <option value="3300">3.300</option>
                    <option value="3400">3.400</option>
                    <option value="3500">3.500</option>
                    <option value="3600">3.600</option>
                    <option value="3700">3.700</option>
                    <option value="3800">3.800</option>
                    <option value="3900">3.900</option>
                    <option value="4000">4.000</option>
                    <option value="None">None</option>
                    <option value="Custom">Custom</option>
                  </select>
                </td>
              </tr>
              <tr>
                <th class="label" width="50%"><a name="StpFineMagentaGamma">Magenta Fine Adjustment</a>:</th>
                <td>
                  <select name="StpFineMagentaGamma" id="select-StpFineMagentaGamma" onchange="update_paramtable('StpFineMagentaGamma')">
                    <option value="None">0.000</option>
                    <option value="0">0.000</option>
                    <option value="5">0.005</option>
                    <option value="10">0.010</option>
                    <option value="15">0.015</option>
                    <option value="20">0.020</option>
                    <option value="25">0.025</option>
                    <option value="30">0.030</option>
                    <option value="35">0.035</option>
                    <option value="40">0.040</option>
                    <option value="45">0.045</option>
                    <option value="50">0.050</option>
                    <option value="55">0.055</option>
                    <option value="60">0.060</option>
                    <option value="65">0.065</option>
                    <option value="70">0.070</option>
                    <option value="75">0.075</option>
                    <option value="80">0.080</option>
                    <option value="85">0.085</option>
                    <option value="90">0.090</option>
                    <option value="95">0.095</option>
                  </select>
                </td>
              </tr>
              <tr>
                <th class="label" width="50%"><a name="StpYellowGamma">Yellow</a>:</th>
                <td>
                  <select name="StpYellowGamma" id="select-StpYellowGamma" onchange="update_paramtable('StpYellowGamma')">
                    <option value="0">0.000</option>
                    <option value="100">0.100</option>
                    <option value="200">0.200</option>
                    <option value="300">0.300</option>
                    <option value="400">0.400</option>
                    <option value="500">0.500</option>
                    <option value="600">0.600</option>
                    <option value="700">0.700</option>
                    <option value="800">0.800</option>
                    <option value="900">0.900</option>
                    <option value="1000">1.000</option>
                    <option value="1100">1.100</option>
                    <option value="1200">1.200</option>
                    <option value="1300">1.300</option>
                    <option value="1400">1.400</option>
                    <option value="1500">1.500</option>
                    <option value="1600">1.600</option>
                    <option value="1700">1.700</option>
                    <option value="1800">1.800</option>
                    <option value="1900">1.900</option>
                    <option value="2000">2.000</option>
                    <option value="2100">2.100</option>
                    <option value="2200">2.200</option>
                    <option value="2300">2.300</option>
                    <option value="2400">2.400</option>
                    <option value="2500">2.500</option>
                    <option value="2600">2.600</option>
                    <option value="2700">2.700</option>
                    <option value="2800">2.800</option>
                    <option value="2900">2.900</option>
                    <option value="3000">3.000</option>
                    <option value="3100">3.100</option>
                    <option value="3200">3.200</option>
                    <option value="3300">3.300</option>
                    <option value="3400">3.400</option>
                    <option value="3500">3.500</option>
                    <option value="3600">3.600</option>
                    <option value="3700">3.700</option>
                    <option value="3800">3.800</option>
                    <option value="3900">3.900</option>
                    <option value="4000">4.000</option>
                    <option value="None">None</option>
                    <option value="Custom">Custom</option>
                  </select>
                </td>
              </tr>
              <tr>
                <th class="label" width="50%"><a name="StpFineYellowGamma">Yellow Fine Adjustment</a>:</th>
                <td>
                  <select name="StpFineYellowGamma" id="select-StpFineYellowGamma" onchange="update_paramtable('StpFineYellowGamma')">
                    <option value="None">0.000</option>
                    <option value="0">0.000</option>
                    <option value="5">0.005</option>
                    <option value="10">0.010</option>
                    <option value="15">0.015</option>
                    <option value="20">0.020</option>
                    <option value="25">0.025</option>
                    <option value="30">0.030</option>
                    <option value="35">0.035</option>
                    <option value="40">0.040</option>
                    <option value="45">0.045</option>
                    <option value="50">0.050</option>
                    <option value="55">0.055</option>
                    <option value="60">0.060</option>
                    <option value="65">0.065</option>
                    <option value="70">0.070</option>
                    <option value="75">0.075</option>
                    <option value="80">0.080</option>
                    <option value="85">0.085</option>
                    <option value="90">0.090</option>
                    <option value="95">0.095</option>
                  </select>
                </td>
              </tr>
              <tr>
                <th class="label" width="50%"><a name="StpCyanBalance">Cyan Balance</a>:</th>
                <td>
                  <select name="StpCyanBalance" id="select-StpCyanBalance" onchange="update_paramtable('StpCyanBalance')">
                    <option value="0">0.000</option>
                    <option value="100">0.100</option>
                    <option value="200">0.200</option>
                    <option value="300">0.300</option>
                    <option value="400">0.400</option>
                    <option value="500">0.500</option>
                    <option value="600">0.600</option>
                    <option value="700">0.700</option>
                    <option value="800">0.800</option>
                    <option value="900">0.900</option>
                    <option value="1000">1.000</option>
                    <option value="None">None</option>
                    <option value="Custom">Custom</option>
                  </select>
                </td>
              </tr>
              <tr>
                <th class="label" width="50%"><a name="StpFineCyanBalance">Cyan Balance Fine Adjustment</a>:</th>
                <td>
                  <select name="StpFineCyanBalance" id="select-StpFineCyanBalance" onchange="update_paramtable('StpFineCyanBalance')">
                    <option value="None">0.000</option>
                    <option value="0">0.000</option>
                    <option value="5">0.005</option>
                    <option value="10">0.010</option>
                    <option value="15">0.015</option>
                    <option value="20">0.020</option>
                    <option value="25">0.025</option>
                    <option value="30">0.030</option>
                    <option value="35">0.035</option>
                    <option value="40">0.040</option>
                    <option value="45">0.045</option>
                    <option value="50">0.050</option>
                    <option value="55">0.055</option>
                    <option value="60">0.060</option>
                    <option value="65">0.065</option>
                    <option value="70">0.070</option>
                    <option value="75">0.075</option>
                    <option value="80">0.080</option>
                    <option value="85">0.085</option>
                    <option value="90">0.090</option>
                    <option value="95">0.095</option>
                  </select>
                </td>
              </tr>
              <tr>
                <th class="label" width="50%"><a name="StpMagentaBalance">Magenta Balance</a>:</th>
                <td>
                  <select name="StpMagentaBalance" id="select-StpMagentaBalance" onchange="update_paramtable('StpMagentaBalance')">
                    <option value="0">0.000</option>
                    <option value="100">0.100</option>
                    <option value="200">0.200</option>
                    <option value="300">0.300</option>
                    <option value="400">0.400</option>
                    <option value="500">0.500</option>
                    <option value="600">0.600</option>
                    <option value="700">0.700</option>
                    <option value="800">0.800</option>
                    <option value="900">0.900</option>
                    <option value="1000">1.000</option>
                    <option value="None">None</option>
                    <option value="Custom">Custom</option>
                  </select>
                </td>
              </tr>
              <tr>
                <th class="label" width="50%"><a name="StpFineMagentaBalance">Magenta Balance Fine Adjustment</a>:</th>
                <td>
                  <select name="StpFineMagentaBalance" id="select-StpFineMagentaBalance" onchange="update_paramtable('StpFineMagentaBalance')">
                    <option value="None">0.000</option>
                    <option value="0">0.000</option>
                    <option value="5">0.005</option>
                    <option value="10">0.010</option>
                    <option value="15">0.015</option>
                    <option value="20">0.020</option>
                    <option value="25">0.025</option>
                    <option value="30">0.030</option>
                    <option value="35">0.035</option>
                    <option value="40">0.040</option>
                    <option value="45">0.045</option>
                    <option value="50">0.050</option>
                    <option value="55">0.055</option>
                    <option value="60">0.060</option>
                    <option value="65">0.065</option>
                    <option value="70">0.070</option>
                    <option value="75">0.075</option>
                    <option value="80">0.080</option>
                    <option value="85">0.085</option>
                    <option value="90">0.090</option>
                    <option value="95">0.095</option>
                  </select>
                </td>
              </tr>
              <tr>
                <th class="label" width="50%"><a name="StpYellowBalance">Yellow Balance</a>:</th>
                <td>
                  <select name="StpYellowBalance" id="select-StpYellowBalance" onchange="update_paramtable('StpYellowBalance')">
                    <option value="0">0.000</option>
                    <option value="100">0.100</option>
                    <option value="200">0.200</option>
                    <option value="300">0.300</option>
                    <option value="400">0.400</option>
                    <option value="500">0.500</option>
                    <option value="600">0.600</option>
                    <option value="700">0.700</option>
                    <option value="800">0.800</option>
                    <option value="900">0.900</option>
                    <option value="1000">1.000</option>
                    <option value="None">None</option>
                    <option value="Custom">Custom</option>
                  </select>
                </td>
              </tr>
              <tr>
                <th class="label" width="50%"><a name="StpFineYellowBalance">Yellow Balance Fine Adjustment</a>:</th>
                <td>
                  <select name="StpFineYellowBalance" id="select-StpFineYellowBalance" onchange="update_paramtable('StpFineYellowBalance')">
                    <option value="None">0.000</option>
                    <option value="0">0.000</option>
                    <option value="5">0.005</option>
                    <option value="10">0.010</option>
                    <option value="15">0.015</option>
                    <option value="20">0.020</option>
                    <option value="25">0.025</option>
                    <option value="30">0.030</option>
                    <option value="35">0.035</option>
                    <option value="40">0.040</option>
                    <option value="45">0.045</option>
                    <option value="50">0.050</option>
                    <option value="55">0.055</option>
                    <option value="60">0.060</option>
                    <option value="65">0.065</option>
                    <option value="70">0.070</option>
                    <option value="75">0.075</option>
                    <option value="80">0.080</option>
                    <option value="85">0.085</option>
                    <option value="90">0.090</option>
                    <option value="95">0.095</option>
                  </select>
                </td>
              </tr>
            </table>
            <div class="actions"><button type="submit">Save Changes</button></div>
          </div>
        </details>

        <!-- Tools -->
        <details class="card">
          <summary><span class="chev"></span><span class="ttl">Tools</span></summary>
          <div class="card-body tools">
            <button type="button" onclick="ReloadCups()">Spool Reset</button>
          </div>
        </details>
      </form>
    </section>
  </main>

  <script>
    window.onload = function() { OnPageLoad(); };
    function OnPageLoad() {
      console.log("Page loaded");
      // General settings
      document.getElementById('color-enabled').checked = {{options.main.enabled|lower}};
      document.getElementById('select-ColorModel').value = "{{options.general.ColorModel}}";
      document.getElementById('select-StpColorPrecision').value = "{{options.general.StpColorPrecision}}";
      document.getElementById('select-StpiShrinkOutput').value = "{{options.general.StpiShrinkOutput}}";
      // Common settings
      document.getElementById('select-StpColorCorrection').value = "{{options.common.StpColorCorrection}}";
      document.getElementById('select-StpBrightness').value = "{{options.common.StpBrightness}}";
      document.getElementById('select-StpFineBrightness').value = "{{options.common.StpFineBrightness}}";
      document.getElementById('select-StpContrast').value = "{{options.common.StpContrast}}";
      document.getElementById('select-StpFineContrast').value = "{{options.common.StpFineContrast}}";
      document.getElementById('select-StpSaturation').value = "{{options.common.StpSaturation}}";
      document.getElementById('select-StpFineSaturation').value = "{{options.common.StpFineSaturation}}";
      document.getElementById('select-StpImageType').value = "{{options.common.StpImageType}}";
      // Extra settings
      document.getElementById('select-StpGamma').value = "{{options.extra.StpGamma}}";
      document.getElementById('select-StpFineGamma').value = "{{options.extra.StpFineGamma}}";
      document.getElementById('select-StpCyanGamma').value = "{{options.extra.StpCyanGamma}}";
      document.getElementById('select-StpFineCyanGamma').value = "{{options.extra.StpFineCyanGamma}}";
      document.getElementById('select-StpMagentaGamma').value = "{{options.extra.StpMagentaGamma}}";
      document.getElementById('select-StpFineMagentaGamma').value = "{{options.extra.StpFineMagentaGamma}}";
      document.getElementById('select-StpYellowGamma').value = "{{options.extra.StpYellowGamma}}";
      document.getElementById('select-StpFineYellowGamma').value = "{{options.extra.StpFineYellowGamma}}";
      document.getElementById('select-StpCyanBalance').value = "{{options.extra.StpCyanBalance}}";
      document.getElementById('select-StpFineCyanBalance').value = "{{options.extra.StpFineCyanBalance}}";
      document.getElementById('select-StpMagentaBalance').value = "{{options.extra.StpMagentaBalance}}";
      document.getElementById('select-StpFineMagentaBalance').value = "{{options.extra.StpFineMagentaBalance}}";
      document.getElementById('select-StpYellowBalance').value = "{{options.extra.StpYellowBalance}}";
      document.getElementById('select-StpFineYellowBalance').value = "{{options.extra.StpFineYellowBalance}}";
    }

    function submitForm(event) {
      event.preventDefault();
      $.ajax({ type: "POST", url: "/save_color_options", data: $("#colorOptionsForm").serialize(),
        success: function(response){ alert(response.message); },
        error: function(){ alert("An error occurred while saving the settings."); }
      });
    }

    function ReloadCups(){
      fetch('/reload_cups', { method:'POST' })
      .then(r=>r.json()).then(data=>{
        if(data.status==="success"){ alert("Reload Successful!"); }
        else{ alert("Reload Failed: " + data.message); }
      }).catch(err=>{ console.error("Error during reload attempt:", err); alert("Error during reload attempt."); });
    }
  </script>
</body>
</html>