{% extends 'layout.html' %}
{% block title %}Packages - {{ super() }}{% endblock %}
{% block content %}

{% macro downloads_badge(recent_count) %}
  {% if recent_count %}
    {% set n = recent_count %}
    {% if n >= 100000 %}
      <span class="badge badge-dark" title="Based on downloads in last 90 days">100k+ downloads</span>
    {% elif n >= 50000 %}
      <span class="badge badge-primary" title="Based on downloads in last 90 days">50k+ downloads</span>
    {% elif n >= 25000 %}
      <span class="badge badge-primary" title="Based on downloads in last 90 days">25k+ downloads</span>
    {% elif n >= 10000 %}
      <span class="badge badge-info" title="Based on downloads in last 90 days">10k+ downloads</span>
    {% elif n >= 5000 %}
      <span class="badge badge-success" title="Based on downloads in last 90 days">5k+ downloads</span>
    {% elif n >= 2500 %}
      <span class="badge badge-success" title="Based on downloads in last 90 days">2.5k+ downloads</span>
    {% elif n >= 1000 %}
      <span class="badge badge-secondary" title="Based on downloads in last 90 days">1k+ downloads</span>
    {% endif %}
  {% endif %}
{% endmacro %}

{# `row` is a plain dict built in _latest_versions_query (name, displayname,
   version_string, icon_path, description, recent_download_count, archived);
   active/archived are split in the view. #}
{% macro package_card(row, archived=false) %}
<div class="col-md-4">
  <div class="d-flex{% if archived %}" style="opacity: 0.6;{% endif %}">
    <div class="flex-shrink-0 mr-3" style="width: 72px;">
      {% if selected_arch|default(None) %}
      <a href="{{ url_for('frontend.package', name=row.name, arch=selected_arch) }}">
      {% else %}
      <a href="{{ url_for('frontend.package', name=row.name) }}">
      {% endif %}
        <img src="{{ url_for('nas.data', path=row.icon_path) }}" alt="Icon"{% if archived %} style="filter: grayscale(60%);"{% endif %}>
      </a>
    </div>
    <div class="flex-grow-1">
      <h2 class="h5">{{ row.displayname }}
        <small class="text-muted">v{{ row.version_string }}</small>
        {% if archived %}
          <span class="badge badge-secondary ml-1">Archived</span>
        {% endif %}
      </h2>
      {% if not archived %}
        {{ downloads_badge(row.recent_download_count) }}
      {% endif %}
      <div class="ellipsis package-description">
        <p>{{ row.description }}</p>
      </div>
    </div>
  </div>
</div>
{% endmacro %}

<h1 class="sr-only">Packages</h1>
<div class="form-inline mb-3">
  <label class="mr-2" for="archSelector">Architecture</label>
  <select class="form-control form-control-sm mr-2" id="archSelector" title="Filter packages by architecture">
    <option value="">All architectures</option>
    {% for code in architectures|default([]) %}
    <option value="{{ code }}"{% if code == (selected_arch|default(None)) %} selected{% endif %}>{{ code }}</option>
    {% endfor %}
  </select>
  {# Model search: curated Synology model to architecture mapping
     in static/data/syno-models.json, baseline the Synology KB CPU page. #}
  <label class="sr-only" for="modelSearch">Find your model</label>
  <input class="form-control form-control-sm mr-2" id="modelSearch" list="modelList"
         placeholder="Find your model (e.g. DS920+)" autocomplete="off">
  <datalist id="modelList"></datalist>
  <button class="btn btn-sm btn-outline-primary mr-2" id="modelGo" type="button">Go</button>
  <small class="text-muted">Model list: <a href="https://docs.synocommunity.com/reference/model-architecture" target="_blank" rel="noopener">model ↔ architecture docs</a></small>
</div>
<div class="alert alert-warning d-none" id="modelAlert" role="alert"></div>
{% if selected_arch|default(None) %}
<div class="alert alert-info">
  Showing packages for <strong>{{ selected_arch }}</strong> (including universal builds).
  <a href="{{ url_for('frontend.packages', arch='all') }}" id="showAllArch">Show all architectures</a>
</div>
{% endif %}
<div id="packages">

  {# ── Active packages ── #}
  {% for version_row in active_versions | batch(3) %}
  <div class="row package-row">
    {% for row in version_row %}
      {{ package_card(row) }}
    {% endfor %}
  </div>
  {% endfor %}

  {# ── Archived packages ── #}
  {% if archived_versions %}
  <div class="row mt-5 mb-2">
    <div class="col-12">
      <h1 class="h4 text-muted">
        <i class="bi bi-archive mr-2"></i>Archived Packages
      </h1>
      <p class="text-muted small">
        These packages are no longer in the active catalog and are not actively maintained.
      </p>
      <hr>
    </div>
  </div>
  {% for version_row in archived_versions | batch(3) %}
  <div class="row package-row archived-package-row">
    {% for row in version_row %}
      {{ package_card(row, archived=true) }}
    {% endfor %}
  </div>
  {% endfor %}
  {% endif %}

</div>
{% endblock %}

{% block script %}
<script>
document.addEventListener('DOMContentLoaded', function () {
  var sel = document.getElementById('archSelector');
  function clearSavedModel() {
    try { localStorage.removeItem('spk_model'); } catch (e) {}
  }
  function navigate(arch) {
    var params = new URLSearchParams(window.location.search);
    if (arch) {
      params.set('arch', arch);
    } else {
      // Explicit "all" so the server clears the persistence cookie;
      // dropping the param would fall back to the stale cookie value.
      params.set('arch', 'all');
    }
    window.location.search = params.toString();
  }
  // Clearing the arch filter (dropdown or "show all") must also drop the
  // remembered model, otherwise the field repopulates from localStorage and
  // the filter looks like it is still applied.
  var showAll = document.getElementById('showAllArch');
  if (showAll) showAll.addEventListener('click', clearSavedModel);
  if (sel) {
    sel.addEventListener('change', function () {
      clearSavedModel();
      navigate(sel.value);
    });
  }
  // Model search: curated model to architecture mapping (see
  // static/data/syno-models.json). Validates against the server-provided
  // architecture list so models for arches with no published builds
  // show a hint instead of landing on a 404.
  var modelInput = document.getElementById('modelSearch');
  var modelList = document.getElementById('modelList');
  var modelAlert = document.getElementById('modelAlert');
  function showModelAlert(msg) {
    if (!modelAlert) return;
    modelAlert.textContent = msg;
    modelAlert.classList.remove('d-none');
  }
  function hideModelAlert() {
    if (modelAlert) modelAlert.classList.add('d-none');
  }
  if (modelInput && modelList) {
    try {
      var savedModel = localStorage.getItem('spk_model');
      if (savedModel) modelInput.value = savedModel;
    } catch (e) {}
    fetch("{{ url_for('static', filename='data/syno-models.json') }}")
      .then(function (resp) { return resp.json(); })
      .then(function (mapping) {
        var models = Object.keys(mapping).filter(function (k) {
          return k.charAt(0) !== '_';
        }).sort();
        models.forEach(function (model) {
          var opt = document.createElement('option');
          opt.value = model;
          modelList.appendChild(opt);
        });
        modelInput.addEventListener('change', applyModel);
        var modelGo = document.getElementById('modelGo');
        if (modelGo) modelGo.addEventListener('click', applyModel);
        function applyModel() {
          var raw = modelInput.value.trim();
          if (!raw) {
            // Empty field: clear the current architecture filter (and the
            // remembered model) rather than reporting an unknown model.
            clearSavedModel();
            hideModelAlert();
            navigate(null);
            return;
          }
          var wanted = raw.toUpperCase();
          var match = models.find(function (m) { return m.toUpperCase() === wanted; });
          if (!match) {
            showModelAlert(
              'Unknown model "' + raw +
              '" — pick one from the list or choose an architecture directly.'
            );
            return;
          }
          var arch = mapping[match];
          var known = sel && Array.prototype.some.call(sel.options, function (o) {
            return o.value === arch;
          });
          if (!known) {
            showModelAlert(
              'No packages published for ' + match + ' (' + arch + ' architecture).'
            );
            return;
          }
          try { localStorage.setItem('spk_model', match); } catch (e) {}
          navigate(arch);
        }
      })
      .catch(function () { /* mapping unavailable: arch dropdown still works */ });
  }
});
</script>
{% endblock %}