<div class="wrap">
  <div class="header">
    <h2>HTTP Status Codes</h2>
    <span class="count" id="result-count"></span>
  </div>

  <input type="text" id="search-input" placeholder="Search by code, name, or keyword (e.g. 404, redirect, auth)..." spellcheck="false" />

  <div class="filters" id="filters">
    <button class="filter-btn active" data-cat="all">All</button>
    <button class="filter-btn" data-cat="1">1xx Informational</button>
    <button class="filter-btn" data-cat="2">2xx Success</button>
    <button class="filter-btn" data-cat="3">3xx Redirection</button>
    <button class="filter-btn" data-cat="4">4xx Client Error</button>
    <button class="filter-btn" data-cat="5">5xx Server Error</button>
  </div>

  <div class="list" id="list"></div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, sans-serif; background: #f8fafc; min-height: 100vh; padding: 28px 20px; }

.wrap { max-width: 720px; margin: 0 auto; }

.header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
h2 { font-size: 18px; font-weight: 800; color: #1e293b; }
.count { font-size: 12px; color: #94a3b8; font-weight: 600; }

#search-input {
  width: 100%; padding: 12px 14px; border: 1.5px solid #e2e8f0; border-radius: 10px;
  font-size: 13.5px; font-family: inherit; color: #1e293b; margin-bottom: 12px;
}
#search-input:focus { outline: none; border-color: #6366f1; }

.filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.filter-btn {
  padding: 6px 12px; border-radius: 999px; border: 1.5px solid #e2e8f0; background: #fff;
  font-size: 11.5px; font-weight: 700; color: #64748b; cursor: pointer; font-family: inherit;
}
.filter-btn.active { background: #1e293b; border-color: #1e293b; color: #fff; }

.list { display: flex; flex-direction: column; gap: 6px; max-height: 460px; overflow-y: auto; }

.row {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: #fff;
  border: 1px solid #e2e8f0; border-radius: 10px; cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s;
}
.row:hover { border-color: #c7d2fe; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.row.copied { border-color: #4ade80; }

.code { font-family: "SF Mono", Consolas, monospace; font-weight: 800; font-size: 14px; width: 42px; flex-shrink: 0; }
.code.c1 { color: #0ea5e9; }
.code.c2 { color: #16a34a; }
.code.c3 { color: #d97706; }
.code.c4 { color: #dc2626; }
.code.c5 { color: #9333ea; }

.info { flex: 1; min-width: 0; }
.name { font-size: 13.5px; font-weight: 700; color: #1e293b; }
.desc { font-size: 12px; color: #64748b; margin-top: 2px; line-height: 1.4; }

.copy-hint { font-size: 10.5px; color: #cbd5e1; font-weight: 700; flex-shrink: 0; opacity: 0; transition: opacity 0.12s; }
.row:hover .copy-hint { opacity: 1; }
.row.copied .copy-hint { opacity: 1; color: #16a34a; }

.empty { text-align: center; padding: 30px; color: #94a3b8; font-size: 13px; }

const STATUS_CODES = [
  { code: 100, name: "Continue", desc: "The server has received the request headers and the client should proceed to send the request body." },
  { code: 101, name: "Switching Protocols", desc: "The requester asked the server to switch protocols, and the server has agreed (e.g. HTTP to WebSocket)." },
  { code: 103, name: "Early Hints", desc: "Used to return some response headers before the final HTTP message, typically for preloading resources." },
  { code: 200, name: "OK", desc: "The request succeeded. The meaning depends on the HTTP method used." },
  { code: 201, name: "Created", desc: "The request succeeded and a new resource was created, typically after a POST or PUT." },
  { code: 202, name: "Accepted", desc: "The request has been received but not yet acted upon; processing is not guaranteed to complete." },
  { code: 204, name: "No Content", desc: "The request succeeded but there is no content to return, often used after a DELETE." },
  { code: 206, name: "Partial Content", desc: "Used for range requests when the client asked for only part of a resource." },
  { code: 301, name: "Moved Permanently", desc: "The resource has been permanently moved to a new URL given in the Location header." },
  { code: 302, name: "Found", desc: "The resource temporarily resides at a different URL; the original URL should keep being used for future requests." },
  { code: 303, name: "See Other", desc: "The response can be found at a different URL and should be retrieved using a GET request." },
  { code: 304, name: "Not Modified", desc: "Used for caching: the resource has not changed since the version specified by request headers." },
  { code: 307, name: "Temporary Redirect", desc: "Like 302, but the request method and body must not be changed when reissuing the request." },
  { code: 308, name: "Permanent Redirect", desc: "Like 301, but the request method and body must not be changed when reissuing the request." },
  { code: 400, name: "Bad Request", desc: "The server cannot process the request due to a client error, such as malformed syntax." },
  { code: 401, name: "Unauthorized", desc: "Authentication is required and has failed or has not been provided." },
  { code: 403, name: "Forbidden", desc: "The server understood the request but refuses to authorize it, regardless of credentials." },
  { code: 404, name: "Not Found", desc: "The requested resource could not be found on the server." },
  { code: 405, name: "Method Not Allowed", desc: "The request method is known but not supported for the target resource." },
  { code: 406, name: "Not Acceptable", desc: "No content matching the criteria in the Accept headers could be produced." },
  { code: 407, name: "Proxy Authentication Required", desc: "The client must first authenticate itself with the proxy." },
  { code: 408, name: "Request Timeout", desc: "The server timed out waiting for the request from the client." },
  { code: 409, name: "Conflict", desc: "The request conflicts with the current state of the target resource, e.g. an edit conflict." },
  { code: 410, name: "Gone", desc: "The resource requested is no longer available and will not be available again." },
  { code: 411, name: "Length Required", desc: "The server refuses to accept the request without a defined Content-Length header." },
  { code: 412, name: "Precondition Failed", desc: "One or more conditions in the request headers evaluated to false on the server." },
  { code: 413, name: "Payload Too Large", desc: "The request entity is larger than the limits defined by the server." },
  { code: 414, name: "URI Too Long", desc: "The URI requested by the client is longer than the server is willing to interpret." },
  { code: 415, name: "Unsupported Media Type", desc: "The media format of the requested data is not supported by the server." },
  { code: 418, name: "I'm a teapot", desc: "A joke status code from the RFC 2324 Hyper Text Coffee Pot Control Protocol." },
  { code: 422, name: "Unprocessable Entity", desc: "The request was well-formed but contains semantic errors, common in REST APIs for validation failures." },
  { code: 425, name: "Too Early", desc: "The server is unwilling to risk processing a request that might be replayed." },
  { code: 429, name: "Too Many Requests", desc: "The user has sent too many requests in a given amount of time (rate limiting)." },
  { code: 431, name: "Request Header Fields Too Large", desc: "The server is unwilling to process the request because its header fields are too large." },
  { code: 500, name: "Internal Server Error", desc: "A generic error message when an unexpected condition was encountered on the server." },
  { code: 501, name: "Not Implemented", desc: "The server does not support the functionality required to fulfill the request." },
  { code: 502, name: "Bad Gateway", desc: "The server, acting as a gateway or proxy, received an invalid response from the upstream server." },
  { code: 503, name: "Service Unavailable", desc: "The server is not ready to handle the request, often due to maintenance or overload." },
  { code: 504, name: "Gateway Timeout", desc: "The server, acting as a gateway or proxy, did not receive a timely response from the upstream server." },
  { code: 505, name: "HTTP Version Not Supported", desc: "The HTTP version used in the request is not supported by the server." },
];

const listEl = document.getElementById('list');
const searchInput = document.getElementById('search-input');
const filterBtns = document.querySelectorAll('.filter-btn');
const resultCount = document.getElementById('result-count');
let activeCat = 'all';

function categoryClass(code) {
  return 'c' + String(code)[0];
}

function render() {
  const q = searchInput.value.trim().toLowerCase();
  const filtered = STATUS_CODES.filter(item => {
    const matchesCat = activeCat === 'all' || String(item.code)[0] === activeCat;
    const matchesQuery = !q ||
      String(item.code).includes(q) ||
      item.name.toLowerCase().includes(q) ||
      item.desc.toLowerCase().includes(q);
    return matchesCat && matchesQuery;
  });

  resultCount.textContent = filtered.length + ' of ' + STATUS_CODES.length;

  if (!filtered.length) {
    listEl.innerHTML = '<div class="empty">No status codes match your search.</div>';
    return;
  }

  listEl.innerHTML = filtered.map(item => {
    return '<div class="row" data-code="' + item.code + '" data-name="' + item.name + '">' +
      '<div class="code ' + categoryClass(item.code) + '">' + item.code + '</div>' +
      '<div class="info"><div class="name">' + item.name + '</div><div class="desc">' + item.desc + '</div></div>' +
      '<div class="copy-hint">Click to copy</div>' +
    '</div>';
  }).join('');
}

listEl.addEventListener('click', (e) => {
  const row = e.target.closest('.row');
  if (!row) return;
  const text = row.dataset.code + ' ' + row.dataset.name;
  const finish = () => {
    row.classList.add('copied');
    const hint = row.querySelector('.copy-hint');
    const original = hint.textContent;
    hint.textContent = 'Copied!';
    setTimeout(() => { row.classList.remove('copied'); hint.textContent = original; }, 1100);
  };
  if (navigator.clipboard && navigator.clipboard.writeText) {
    navigator.clipboard.writeText(text).then(finish).catch(finish);
  } else {
    finish();
  }
});

filterBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    filterBtns.forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    activeCat = btn.dataset.cat;
    render();
  });
});

searchInput.addEventListener('input', render);

render();