<!doctype html>
<html>
<head>
  <title>OnlyScavs – Key Ratings</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    :root {
      --bg: #121212;
      --panel: #1a1a1a;
      --text: #eee;
      --muted: #bbb;
      --border: #333;
      --accent: #9ccfff;
    }
    body {
      font-family: sans-serif;
      background: var(--bg);
      color: var(--text);
      margin: 0;
      padding: 16px;
    }
    .page {
      max-width: 980px;
      margin: 0 auto;
    }
    .key {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 8px;
      border-bottom: 1px solid var(--border);
    }
    .key-name {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }
    .key-name strong {
      line-height: 1.2;
      word-break: break-word;
    }
    .key-name a {
      color: var(--accent);
      font-size: 0.9rem;
    }
    .filters {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin: 12px 0 20px;
    }
    .map-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      color: var(--muted);
      font-size: 0.85rem;
    }
    .map-tag {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 2px 8px;
      line-height: 1.2;
    }
    img {
      width: 64px;
      height: 64px;
      border-radius: 6px;
      background: var(--panel);
    }
    select, input {
      background: #222;
      color: var(--text);
      border: 1px solid #444;
      border-radius: 6px;
      padding: 8px;
    }
    a {
      color: var(--accent);
    }
    button {
      background: #333;
      color: var(--text);
      border: 1px solid #555;
      cursor: pointer;
      padding: 8px 12px;
      border-radius: 6px;
    }
    .filters {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .key-form {
      flex: 1;
      flex-wrap: wrap;
      align-items: flex-start;
      display: flex;
      gap: 8px;
    }
    input[name^="reason_"] {
      min-width: 180px;
    }
    .map-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      width: 100%;
    }
    .map-checkbox,
    .quest-flag {
      display: flex;
      align-items: center;
      gap: 6px;
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 4px 8px;
    }
    .map-checkbox input,
    .quest-flag input {
      margin: 0;
    }
    .save-all {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 4px 0 16px;
    }
    @media (max-width: 720px) {
      body {
        padding: 12px;
      }
      .key {
        align-items: flex-start;
        gap: 12px;
      }
      .filters,
      .key-form {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 8px;
      }
      select, input, button {
        min-height: 40px;
        font-size: 1rem;
      }
      input[name^="reason_"] {
        flex: 1 1 100%;
        min-width: 0;
      }
    }
    @media (max-width: 480px) {
      .key {
        flex-direction: column;
        align-items: stretch;
      }
      img {
        width: 72px;
        height: 72px;
      }
    }
  </style>
</head>

<body>
<div class="page">
  <nav style="margin-bottom:12px">
    <a href="/collector">Collector Checklist</a>
    &nbsp;|&nbsp;
    <a href="/quests">Quest Trees</a>
    &nbsp;|&nbsp;
    <a href="/loadout">Loadout Planner</a>
    &nbsp;|&nbsp;
    <a href="/meds">Injectors</a>
    &nbsp;|&nbsp;
    <a href="/barters">Barters</a>
  </nav>
  <h1>OnlyScavs – Keys</h1>

  <form method="get" class="filters">
    <label for="map_id">Filter by map</label>
    <select id="map_id" name="map_id">
      <option value="">All maps</option>
      {% for map in maps %}
        <option value="{{ map.id }}" {% if map_filter == map.id %}selected{% endif %}>
          {{ map.name }}
        </option>
      {% endfor %}
    </select>
    <label for="show">Show</label>
    <select id="show" name="show">
      <option value="all" {% if show == "all" %}selected{% endif %}>All</option>
      <option value="rated" {% if show == "rated" %}selected{% endif %}>Rated</option>
      <option value="unrated" {% if show == "unrated" %}selected{% endif %}>NR (not rated)</option>
      <option value="quest" {% if show == "quest" %}selected{% endif %}>Used in quest</option>
    </select>
    <label for="sort">Sort</label>
    <select id="sort" name="sort">
      <option value="priority_desc" {% if sort == "priority_desc" %}selected{% endif %}>
        Priority high → low
      </option>
      <option value="priority_asc" {% if sort == "priority_asc" %}selected{% endif %}>
        Priority low → high
      </option>
      <option value="name_asc" {% if sort == "name_asc" %}selected{% endif %}>
        Name A → Z
      </option>
      <option value="name_desc" {% if sort == "name_desc" %}selected{% endif %}>
        Name Z → A
      </option>
    </select>
    <button type="submit">Apply</button>
  </form>

  <form method="post" action="/rate_all">
    {% if map_filter %}
      <input type="hidden" name="map_id" value="{{ map_filter }}">
    {% endif %}
    {% if sort %}
      <input type="hidden" name="sort" value="{{ sort }}">
    {% endif %}
    {% if show %}
      <input type="hidden" name="show" value="{{ show }}">
    {% endif %}
    <div class="save-all">
      <button type="submit" name="save_all" value="1">Save all changes</button>
    </div>

{% for key in keys %}
  <div class="key" id="key-{{ key.id }}">
    <img
    src="{{ key.grid_image_url }}"
    loading="lazy"
    >
    <div class="key-name" style="flex:1">
      <strong>{{ key.name }}</strong>
      {% if key.wiki_url %}
        <a href="{{ key.wiki_url }}" target="_blank">wiki</a>
      {% endif %}
      {% set selected_maps = key_maps.get(key.id, []) %}
      {% if selected_maps %}
        <div class="map-tags">
          {% for map in maps %}
            {% if map.id in selected_maps %}
              <span class="map-tag">{{ map.name }}</span>
            {% endif %}
          {% endfor %}
        </div>
      {% endif %}
    </div>

    <div class="key-form">
    <input type="hidden" name="key_ids" value="{{ key.id }}">
    <select name="priority_{{ key.id }}">
      <option value="" {% if key.priority is none %}selected{% endif %}>NR (not rated)</option>
      {% for i, label in [(0,'IGNORE'),(1,'LOW'),(2,'MED'),(3,'HIGH'),(4,'SUPER')] %}
        <option value="{{ i }}" {% if key.priority == i %}selected{% endif %}>
          {{ label }}
        </option>
      {% endfor %}
    </select>
    <label class="quest-flag">
      <input type="checkbox" name="used_in_quest_{{ key.id }}" {% if key.used_in_quest %}checked{% endif %}>
      <span>Used in quest?</span>
    </label>
    <input name="reason_{{ key.id }}" placeholder="note…" value="{{ key.reason or '' }}">
    <div class="map-list">
      {% for map in maps %}
        <label class="map-checkbox">
          <input
            type="checkbox"
            name="map_ids_{{ key.id }}"
            value="{{ map.id }}"
            {% if map.id in selected_maps %}checked{% endif %}
          >
          <span>{{ map.name }}</span>
        </label>
      {% endfor %}
    </div>
    <button type="submit" name="save_one" value="{{ key.id }}">Save</button>
    </div>
  </div>
{% endfor %}

    <div class="save-all">
      <button type="submit" name="save_all" value="1">Save all changes</button>
    </div>
  </form>

</div>
</body>
</html>
