function renderOperatorsPage(e){document.title="R6 Operators | Complete Rainbow Six Siege Operators List | R6Info";let n=[],a=[],t="",r=null,o=!0,i=null,s=0;e.innerHTML=`\n    ${createPageHeader("Operators","Browse all operators from Rainbow Six Siege","person")}\n    \n    <div id="operators-controls">\n      <div class="tabs">\n        <div class="tab active" data-tab="0">All Operators</div>\n        <div class="tab" data-tab="1">Attackers</div>\n        <div class="tab" data-tab="2">Defenders</div>\n      </div>\n      \n      <div id="search-container">\n        \x3c!-- La barra di ricerca verrà inserita qui --\x3e\n      </div>\n    </div>\n    \n    <div id="operators-list">\n      ${createLoadingIndicator("Loading operators data...")}\n    </div>\n  `;const l=document.getElementById("search-container"),c={html:`\n      <div class="search-bar" style="margin-top: 20px;">\n        <span class="material-icons search-bar-icon">search</span>\n        <input \n          type="text" \n          placeholder="${(d={value:t,placeholder:"Search operators by name, real name, unit or side...",onSearch:g,onClear:()=>g("")}).placeholder||"Search..."}" \n          value="${d.value||""}"\n          id="search-input"\n        />\n          <button class="search-bar-clear" id="search-clear" style="display: ${d.value?"block":"none"}">\n          <span class="material-icons">close</span>\n        </button>\n      </div>\n    `,setup:()=>{const e=document.getElementById("search-input"),n=document.getElementById("search-clear");let a;e&&(e.addEventListener("input",e=>{const t=e.target.value;n&&(n.style.display=t?"block":"none"),clearTimeout(a),a=setTimeout(()=>{d.onSearch&&d.onSearch(t)},300)}),e.addEventListener("keydown",e=>{"Enter"===e.key&&d.onSearch&&(clearTimeout(a),d.onSearch(e.target.value))})),n&&n.addEventListener("click",()=>{e&&(e.value="",e.focus()),d.onClear&&d.onClear()})}};var d;async function p(){try{o=!0,i=null,m();let e=null;const a={endpoint:"operators"};if("undefined"!=typeof r6Cache){const n=r6Cache.get("operatorsData",a);if(n){const t=r6Cache.getAge("operatorsData",a);console.log("[Cache] operatorsData HIT",{ageMs:t}),e=n}else console.log("[Cache] operatorsData MISS, fetching from API")}e||(e=await api.getOperators(),"undefined"!=typeof r6Cache&&(r6Cache.set("operatorsData",e,a),console.log("[Cache] operatorsData SET",{size:Array.isArray(e)?e.length:0,expiresMs:r6Cache.expirationTimes.operatorsData}))),n=Array.isArray(e)?e:[],g(""),o=!1,m()}catch(e){console.error("Failed to fetch operators:",e),i="Failed to load operators data. Please try again later.",o=!1,m()}}function g(e){t=e;let r=[...n];""!==e&&(r=r.filter(n=>n.name.toLowerCase().includes(e.toLowerCase())||n.realname&&n.realname.toLowerCase().includes(e.toLowerCase())||n.unit&&n.unit.toLowerCase().includes(e.toLowerCase())||n.side&&n.side.toLowerCase().includes(e.toLowerCase()))),1===s?r=r.filter(e=>e.side&&"attacker"===e.side.toLowerCase()):2===s&&(r=r.filter(e=>e.side&&"defender"===e.side.toLowerCase())),a=r,o||m()}function m(){const e=document.getElementById("operators-list");if(o)e.innerHTML=createLoadingIndicator("Loading operators data...");else{if(i){const n=createErrorDisplay({message:i,onRetry:p});return e.innerHTML=n.html,void n.setup()}0===a.length?e.innerHTML=`\n        <p style="text-align: center; margin-top: 24px;">\n          No operators found matching '${t}'\n        </p>\n      `:e.innerHTML=`\n        <div class="grid">\n          ${a.map(e=>`\n            <div class="card operator-card" data-operator-name="${e.name}" style="\n              cursor: pointer;\n              border-left: 6px solid ${e.side&&"attacker"===e.side.toLowerCase()?"var(--error-color)":"var(--info-color)"};\n            ">\n              <div class="card-content">\n                <div style="display: flex; align-items: center; margin-bottom: 8px;">\n                  ${e.icon_url?`\n                    <img \n                        src="proxy.php?url=https%3A%2F%2Fr6data.eu%2F%24%7Be.icon_url%7D" \n                        alt="${e.name}"\n                        style="width: 56px; height: 56px; border-radius: 50%; margin-right: 16px; object-fit: cover;"\n                        onerror="this.onerror=null; this.style.display='none';"\n                    />\n                    `:`\n                    <div style="\n                        width: 56px;\n                        height: 56px;\n                        border-radius: 50%;\n                        background-color: ${e.side&&"attacker"===e.side.toLowerCase()?"var(--error-color)":"var(--info-color)"};\n                        margin-right: 16px;\n                    "></div>\n                    `}\n                  <div>\n                    <h3 style="margin: 0;">${e.name}</h3>\n                    <p style="color: var(--text-secondary); margin: 0;">${e.realname||"Unknown"}</p>\n                  </div>\n                </div>\n                \n                <div style="display: flex; align-items: center; margin-top: 8px;">\n                  <span class="chip" style="\n                    background-color: ${e.side&&"attacker"===e.side.toLowerCase()?"var(--error-color)":"var(--info-color)"};\n                    margin-right: 8px;\n                  ">${e.side||"Unknown"}</span>\n                  ${e.country_code?`\n                    <span class="chip chip-outlined">\n                      <span class="material-icons" style="font-size: 16px; margin-right: 4px;">flag</span>\n                      ${e.country_code}\n                    </span>\n                  `:""}\n                </div>\n              </div>\n            </div>\n          `).join("")}\n        </div>\n      `,document.querySelectorAll(".operator-card").forEach(e=>{e.addEventListener("click",()=>{const a=e.getAttribute("data-operator-name"),t=n.find(e=>e.name===a);t&&function(e){r=e;const n=(a=e.safename||e.name)?a.toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/(^-|-$)/g,""):"";var a;const t=document.createElement("div");t.className="dialog-backdrop",t.innerHTML=`\n      <div class="dialog">\n        <div class="dialog-title">\n          <div style="display: flex; align-items: center;">\n            ${e.icon_url?`\n              <img \n                src="proxy.php?url=https%3A%2F%2Fr6data.eu%2F%24%7Be.icon_url%7D" \n                alt="${e.name}"\n                style="width: 64px; height: 64px; border-radius: 50%; margin-right: 16px; object-fit: cover;"\n              />\n            `:`\n              <div style="\n                width: 64px;\n                height: 64px;\n                border-radius: 50%;\n                background-color: ${e.side&&"attacker"===e.side.toLowerCase()?"var(--error-color)":"var(--info-color)"};\n                margin-right: 16px;\n              "></div>\n            `}\n            <div>\n              <h2>${e.name}</h2>\n              <p style="color: var(--text-secondary);">${e.safename||e.name}</p>\n            </div>\n          </div>\n        </div>\n        <div class="dialog-content">\n          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px;">\n            <div>\n              <p style="display: flex; align-items: center; margin-bottom: 16px;">\n                <span class="material-icons" style="margin-right: 8px; color: var(--primary-color);">person</span>\n                <strong>Real Name:</strong> ${e.realname||"Unknown"}\n              </p>\n              <p style="display: flex; align-items: center; margin-bottom: 16px;">\n                <span class="material-icons" style="margin-right: 8px; color: var(--primary-color);">flag</span>\n                <strong>Birthplace:</strong> ${e.birthplace||"Unknown"}\n              </p>\n              <p style="display: flex; align-items: center; margin-bottom: 16px;">\n                <span class="material-icons" style="margin-right: 8px; color: var(--primary-color);">cake</span>\n                <strong>Age:</strong> ${e.age||"Unknown"}\n                ${e.date_of_birth?` (DOB: ${e.date_of_birth})`:""}\n              </p>\n              <p style="display: flex; align-items: center; margin-bottom: 16px;">\n                <span class="material-icons" style="margin-right: 8px; color: var(--primary-color);">military_tech</span>\n                <strong>Unit:</strong> ${e.unit||"Unknown"}\n              </p>\n            </div>\n            <div>\n              <p style="display: flex; align-items: center; margin-bottom: 16px;">\n                <span class="material-icons" style="margin-right: 8px; color: var(--primary-color);">speed</span>\n                <strong>Speed:</strong> ${e.speed||"Unknown"}\n              </p>\n              <p style="display: flex; align-items: center; margin-bottom: 16px;">\n                <span class="material-icons" style="margin-right: 8px; color: var(--primary-color);">shield</span>\n                <strong>Health:</strong> ${e.health||"Unknown"}\n              </p>\n              <p style="display: flex; align-items: center; margin-bottom: 16px;">\n                <span class="material-icons" style="margin-right: 8px; color: var(--primary-color);">calendar_today</span>\n                <strong>Season Introduced:</strong> ${e.season_introduced||"Unknown"}\n              </p>\n              <p style="margin-bottom: 16px;">\n                <strong>Side:</strong> \n                <span class="chip" style="\n                  background-color: ${e.side&&"attacker"===e.side.toLowerCase()?"var(--error-color)":"var(--info-color)"};\n                  margin-left: 8px;\n                ">${e.side||"Unknown"}</span>\n              </p>\n            </div>\n          </div>\n          \n          ${e.roles?`\n            <div style="margin-top: 16px;">\n              <p style="margin-bottom: 8px;"><strong>Roles:</strong></p>\n              <div style="display: flex; flex-wrap: wrap; gap: 4px;">\n                ${(Array.isArray(e.roles)?e.roles:"string"==typeof e.roles?e.roles.split(","):[]).map(e=>`\n                  <span class="chip chip-primary">${e.trim()}</span>\n                `).join("")}\n              </div>\n            </div>\n          `:""}\n        </div>\n        <div class="dialog-actions" style="display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 24px;">\n          <a href="proxy.php?url=https%3A%2F%2Fr6data.eu%2Foperators%2F%24%7Bn%7D" \n             class="btn btn-primary" \n             id="view-details-btn"\n             data-no-router="true"\n             style="text-decoration: none; min-width: 130px; display: inline-flex; justify-content: center; align-items: center; height: 42px; padding: 0 16px; box-sizing: border-box; font-size: 0.9rem;">\n            View Details\n          </a>\n          <button class="btn btn-secondary" \n                  id="close-dialog-btn" \n                  style="min-width: 130px; display: inline-flex; justify-content: center; align-items: center; height: 42px; padding: 0 16px; box-sizing: border-box; font-size: 0.9rem;">\n            Close\n          </button>\n        </div>\n      </div>\n    `,document.body.appendChild(t),document.getElementById("view-details-btn").addEventListener("click",function(e){this.style.opacity="0.7",this.textContent="Loading..."}),document.getElementById("close-dialog-btn").addEventListener("click",()=>{document.body.removeChild(t),r=null}),t.addEventListener("click",e=>{e.target===t&&(document.body.removeChild(t),r=null)})}(t)})})}}l.innerHTML=c.html,c.setup(),document.querySelectorAll(".tab").forEach(e=>{e.addEventListener("click",()=>{var n;document.querySelectorAll(".tab").forEach(e=>e.classList.remove("active")),e.classList.add("active"),n=parseInt(e.getAttribute("data-tab")),s=n,g(t)})}),p()}