{% extends "base.html" %} {% block title %}{{ _('Module Manager') }} — MediaForge{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ url_for('static', filename='settings_rows.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='integrations.css') }}">
<!-- Page-specific mobile/responsive fixes for the Module Manager + Module Store
     views below -- both live in this one template, and both were overflowing
     horizontally on narrow screens (unwrapped badge rows, a fixed-min-width
     textarea, an unwrapped header button row). See extensions.css. -->
<link rel="stylesheet" href="{{ url_for('static', filename='extensions.css') }}">
<!-- mf_components.css is not loaded globally: the store toolbar uses .mf-search
     and the catalog's empty state uses .mf-empty from it. -->
<link rel="stylesheet" href="{{ url_for('static', filename='mf_components.css') }}">
{% endblock %}
{% block content %}
<div class="settings-container extensions-page">
  <div class="page-header" style="display:flex;align-items:flex-start;justify-content:space-between;gap:16px;">
    <div>
      <h1 class="page-title">{{ _('Module Manager') }}</h1>
      <p class="page-subtitle">{{ _('Every discovered web/thirdparties/ folder, who made it, and a working on/off switch for what it registered') }}</p>
      <!-- The app's own version, next to the per-module MODULE_VERSION badges
           below: a module's compatibility range (MODULE_MIN/MAX_APP_VERSION)
           is checked against exactly this, so an admin looking at a module
           skipped as incompatible shouldn't have to go hunting for what it
           was compared against. app_version is the same context variable the
           sidebar brand uses (see app.py's context processor / base.html) —
           the display version, so a dev install shows its -dev+<sha> suffix
           here too. -->
      {% if app_version %}
      <p class="page-subtitle" style="opacity:.7;">
        {{ _('MediaForge core version') }}: <code>v{{ app_version }}</code>
      </p>
      {% endif %}
    </div>
    <!-- Two views, one page: the modules installed here, and the store to get more
         from. They are separate destinations, not one long scroll — an admin came to
         do one or the other. The store button carries the update count, so the reason
         to go there is visible from the installed view without opening it. -->
    <div class="ext-header-actions" style="display:flex;gap:8px;align-items:center;">
      {% if store_enabled %}
      <button class="btn btn-primary" id="extStoreToggleBtn" style="white-space:nowrap;"
              title="{{ _('Browse the module store') }}">
        <span id="extStoreToggleLabel">{{ _('Module Store') }}</span>
        <span class="integ-subsection-badge badge-update" id="extStoreUpdateBadge" style="display:none;margin-left:6px;"></span>
      </button>
      {% endif %}
      <button class="btn btn-secondary" id="extRescanBtn" style="white-space:nowrap;" title="{{ _('Scan web/thirdparties/ for new module folders and register them without restarting the app.') }}">
        {{ _('Refresh') }}
      </button>
    </div>
  </div>

  <!-- Restart banner. Everything the store does (install, update, uninstall)
       is staged into web/thirdparties/_pending/ and applied at the next start
       by apply_pending_changes() — Flask can add a Blueprint to a running app
       but can't remove or replace one, so "restart required" is a real state
       of the system, not politeness. Rendered server-side from pending_changes()
       so it's correct on first paint, and kept in sync by module_store.js
       after every staged action. -->
  <div class="settings-section" id="extPendingBanner"
       style="{% if not pending.install and not pending.remove %}display:none;{% endif %}border-color:var(--warning);">
    <div class="settings-row" style="border-bottom:none;">
      <div class="settings-row-left">
        <div class="settings-row-label" style="color:var(--warning);">{{ _('Restart required') }}</div>
        <div class="settings-row-desc" id="extPendingText">
          {%- if pending.install %}{{ _('To be installed/updated') }}: {{ pending.install|join(', ') }}{% endif %}
          {%- if pending.install and pending.remove %} · {% endif %}
          {%- if pending.remove %}{{ _('To be removed') }}: {{ pending.remove|join(', ') }}{% endif %}
        </div>
        <div class="settings-row-desc">{{ _('These changes are applied the next time MediaForge starts.') }}</div>
      </div>
      <div class="settings-row-right" style="display:flex;gap:8px;align-items:center;">
        <!-- The restart is not a chore attached to the update — it *is* the update. A
             module upgrade can only be applied by a process that has not imported the
             old version yet (see web/restart.py), so this button is the step that makes
             the new code actually run. Without it the banner is a note asking the admin
             to go and do the important part in a terminal. -->
        {% if restart_supported %}
        <button class="btn btn-primary" id="extRestartBtn">{{ _('Restart now') }}</button>
        {% else %}
        <span class="settings-row-desc">
          {{ _('Restart MediaForge to apply — this process cannot restart itself (debug mode).') }}
        </span>
        {% endif %}
        <button class="btn btn-secondary" id="extPendingCancelBtn">{{ _('Discard staged changes') }}</button>
      </div>
    </div>
  </div>

  <!-- Post-install hint for theme packs. A theme install changes nothing
       visible on its own: it has to be picked in Settings → Design (per user)
       or set as the instance default on its card below. The toast that used to
       say so was wiped by the reload that follows the install, so the message
       is carried across the reload in sessionStorage and shown here as a
       banner that stays until it is dismissed. Filled by module_store.js. -->
  <div class="settings-section" id="extThemeHintBanner"
       style="display:none;border-color:var(--accent);">
    <!-- flex-wrap so the two buttons drop under the text on phones instead of
         squeezing it; .settings-row-left is flex:1/min-width:0 already. -->
    <div class="settings-row" style="border-bottom:none;flex-wrap:wrap;gap:12px;">
      <div class="settings-row-left">
        <div class="settings-row-label" style="color:var(--accent);">
          {{ _('Theme pack installed') }}
        </div>
        <div class="settings-row-desc" id="extThemeHintText"></div>
        <div class="settings-row-desc">
          {{ _('Pick it for your own account under Settings → Design → Theme Packs. Admins can make it the default for everyone with "Set as default" on the theme card below.') }}
        </div>
      </div>
      <div class="settings-row-right" style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
        <a class="btn btn-primary" href="{{ url_for('settings_page') }}#design">{{ _('Choose theme') }}</a>
        <button class="btn btn-secondary" id="extThemeHintDismiss">{{ _('Dismiss') }}</button>
      </div>
    </div>
  </div>

  <!-- View 1: what is installed here. Shown by default; module_store.js swaps it
       for the store view (and back) when the header button is used. -->
  {# The installed view is now two panels behind a floating side menu, so
     modules and theme packs stop sharing one scroll. has-floating-menu makes
     this element the flex container -- the menu and the panels have to be its
     DIRECT children (see shell.css). #}
  <div id="extInstalledView" class="has-floating-menu">
  {% include "_extensions_nav.html" %}
  <div class="settings-tab-panel active" id="exttab-modules">
  {% if not extensions %}
  <div class="settings-section">
    <div class="settings-hint" style="padding:20px 24px;">{{ _('No extension folders discovered.') }}</div>
  </div>
  {% endif %}

  <!-- One card per web/thirdparties/<name>/ folder — built from
       resolve_extensions_overview() (see registry.py), which is fed by
       every phase of discover_and_register() (routes/extensions.py /
       web/thirdparties/__init__.py). A folder that failed to import, has
       no register(app), or was skipped for an unmet DEPENDS_ON still gets
       a card here, with the reason — that's the whole point of this page.
       module_name/description/author come from the folder's own
       MODULE_NAME/MODULE_DESCRIPTION/MODULE_AUTHOR constants (see
       web/thirdparties/__init__.py's docstring), falling back to the
       folder name / nothing when a module doesn't declare them. -->
  {# Labels for registry.module_capabilities()'s kinds. Written as
     "3 × provider" so neither language needs a plural form for twelve
     different nouns. #}
  {% set CAP_LABELS = {
      'menu': _('menu entry'),
      'settings_card': _('settings card'),
      'dashboard_widget': _('dashboard widget'),
      'provider_pill': _('provider pill'),
      'provider': _('content source'),
      'search_source': _('search source'),
      'cineinfo_source': _('CineInfo source'),
      'home_feed_source': _('home feed source'),
      'home_panel': _('home page panel'),
      'subtitle_source': _('subtitle source'),
      'hoster': _('hoster'),
      'mirrors': _('mirror list'),
      'monitor': _('monitor entry'),
      'notification_channel': _('notification channel'),
      'event_hook': _('event hook'),
      'background_worker': _('background worker')
  } %}

  {# Tally + filter. Both read the cards' data-mm-state, so nothing here has
     to be kept in sync with the loop below. #}
  {% set _states = extensions|map(attribute="state")|list %}
  {% if extensions %}
  <div class="mm-bar">
    <div class="mm-tally">
      <b>{{ extensions|length }}</b> {{ _('modules') }}
      <span class="mm-sep">·</span> <b>{{ _states|select("equalto", "ok")|list|length }}</b> {{ _('running') }}
      <span class="mm-sep">·</span> <b>{{ _states|select("equalto", "off")|list|length }}</b> {{ _('off') }}
      {% set _trouble = _states|select("equalto", "error")|list|length + _states|select("equalto", "skipped")|list|length %}
      {% if _trouble %}
      <span class="mm-sep">·</span>
      <span class="mm-warn">{{ _states|select("equalto", "skipped")|list|length }} {{ _('skipped') }} ·
        {{ _states|select("equalto", "error")|list|length }} {{ _('with errors') }}</span>
      {% endif %}
    </div>
    <div class="mm-filters" id="mmFilters" role="group" aria-label="{{ _('Filter by state') }}">
      <button type="button" class="mm-filter active" data-mm-filter="">{{ _('All') }}
        <span class="n">{{ extensions|length }}</span></button>
      <button type="button" class="mm-filter" data-mm-filter="ok">{{ _('Running') }}
        <span class="n">{{ _states|select("equalto", "ok")|list|length }}</span></button>
      <button type="button" class="mm-filter" data-mm-filter="off">{{ _('Off') }}
        <span class="n">{{ _states|select("equalto", "off")|list|length }}</span></button>
      {% if _trouble %}
      <button type="button" class="mm-filter mm-filter-trouble" data-mm-filter="trouble">{{ _('Problems') }}
        <span class="n">{{ _trouble }}</span></button>
      {% endif %}
    </div>
  </div>
  {% endif %}

  {% for ext in extensions %}
  <!-- data-module-id carries the module's stable MODULE_ID (falls back to the
       folder name). module_store.js matches an installed card to a store entry
       by exactly this id when deciding where to hang the "Update: v…" badge —
       the store computes update_available on MODULE_ID too, so matching on the
       folder name (which can differ from the store's declared folder for a
       hand-installed or renamed module) would attach the badge to nothing. -->
  {# One state per card, not a row of badges. Everything the old header
     carried as its own pill (version, author, "Loaded", "Enabled", Registry
     API) is either the state itself or quiet meta text below the name -- the
     badges that survive are the ones that are NOT the normal case: a
     signature that does not check out, an unmet dependency, a pending
     restart. "Unsigned" deliberately gets none: that is the ordinary state of
     a third-party module, and labelling it trains people to ignore labels.

     mm-state drives the filter buttons above (data-mm-state) and the sort
     order (see extensions.py: problems first). #}
  {% set mm_state = ext.state %}
  <div class="settings-section integ-card collapsed mm-card mm-{{ mm_state }}"
       id="integCard-ext-{{ ext.name }}" data-module-id="{{ ext.module_id }}"
       data-mm-state="{{ mm_state }}">
    <div class="integ-subsection-header integ-collapsible-header mm-head" style="padding:14px 20px !important;" onclick="toggleIntegCollapse('ext-{{ ext.name }}')">
      <span class="integ-collapsible-chevron">▸</span>
      <span class="mm-state">
        <span class="mm-dot" aria-hidden="true"></span>
        {%- if mm_state == "error" %}{{ _('Error') }}
        {%- elif mm_state == "skipped" %}{{ _('Skipped') }}
        {%- elif mm_state == "ok" %}{{ _('Running') }}
        {%- else %}{{ _('Off') }}{% endif -%}
      </span>
      <span class="mm-ident">
        <span class="mm-title-row">
          <span class="integ-subsection-title">{{ ext.module_name }}</span>
      <!-- MODULE_VERSION is no longer a badge -- it moved to the meta line
           below the name. The module store still finds this card by
           data-module-id and hangs its "Update: v…" badge in this header. -->
      <!-- Trust, derived from the module's own MODULE.sig (see signing.py) and
           never from anything a store or the module itself merely claims:
             official  = signed by a MediaForge maintainer key
             verified  = signed by a key trusted to bless third-party modules
             unverified = unsigned, unknown key, or modified after signing
           The last case is called out separately below, in red — a signature
           that no longer matches the files is a different kind of event from
           never having had one. -->
      {% if ext.trust == 'official' %}
      <span class="integ-subsection-badge badge-official" title="{{ _('Signed by') }} {{ ext.signature.signer }}">{{ _('Official') }}</span>
      {% elif ext.trust == 'verified' %}
      <span class="integ-subsection-badge badge-verified" title="{{ _('Signed by') }} {{ ext.signature.signer }}">{{ _('Verified') }}</span>
      {% elif ext.signature.signed %}
      <span class="integ-subsection-badge badge-incompatible" title="{{ ext.signature.reason }}">{{ _('Signature invalid') }}</span>
      {% endif %}
      {# No "Unsigned" badge on purpose: unsigned is the normal state of a
         third-party module, and a warning on the normal case is noise. What
         the module *does* is stated below instead. #}
      {% if ext.incompatible_reason %}
      <span class="integ-subsection-badge badge-incompatible" title="{{ ext.incompatible_reason }}">{{ _('Incompatible') }}</span>
      {% endif %}
      {% if ext.depends_on %}
      <span class="integ-subsection-badge badge-depends" title="{{ _('DEPENDS_ON') }}">
        → {{ ext.depends_on|join(', ') }}
      </span>
      {% endif %}
        </span>
        {# Identity as quiet text, not as four pills. #}
        <span class="mm-meta">v{{ ext.version }}{% if ext.author %} · {{ ext.author }}{% endif %} · <code>{{ ext.module_id }}</code></span>
        {# The line this page never had: what the module hung into the app.
           Counts come from registry.module_capabilities(). #}
        {% if ext.capabilities %}
        <span class="mm-caps">
          {% for cap in ext.capabilities %}
          <span class="mm-cap{% if cap.hot %} mm-cap-hot{% endif %}">{{ cap.count }}&nbsp;×&nbsp;{{ CAP_LABELS.get(cap.kind, cap.kind) }}</span>
          {% endfor %}
        </span>
        {% elif ext.registered == false or ext.imported == false %}
        <span class="mm-caps"><span class="mm-cap mm-cap-none">{{ _('registered nothing') }}</span></span>
        {% endif %}
      </span>
    </div>
    <div class="integ-collapsible-body" style="padding:0 20px 16px;">
      {% if ext.description %}
      <div class="integ-subsection-hint">{{ ext.description }}</div>
      {% endif %}

      <!-- Version / module-store metadata line: MODULE_ID (the store's stable
           id, which survives a folder rename — the folder name is shown too
           when they differ, since that's what DEPENDS_ON and the log refer to),
           the MODULE_MIN/MAX_APP_VERSION compatibility range (only shown when
           the module declares one), MODULE_LICENSE and MODULE_HOMEPAGE. All
           optional; a module declaring none of them shows just the id line. -->
      <div class="settings-row" style="border-bottom:none;padding-bottom:0;">
        <div class="settings-row-left">
          <div class="settings-row-desc">
            {{ _('Module ID') }}: <code style="opacity:.6;font-size:.9em;">{{ ext.module_id }}</code>
            {%- if ext.module_id != ext.name %} · {{ _('Folder') }}: <code style="opacity:.6;font-size:.9em;">{{ ext.name }}</code>{% endif %}
            {%- if ext.min_app_version %} · {{ _('Requires MediaForge') }} ≥ {{ ext.min_app_version }}{% endif %}
            {%- if ext.max_app_version %} · {{ _('up to') }} ≤ {{ ext.max_app_version }}{% endif %}
            · {{ _('Registry API') }}: v{{ ext.api_version }}
            {%- if ext.requirements %} · {{ _('Requirements') }}: {{ ext.requirements|join(', ') }}{% endif %}
            {%- if ext.license %} · {{ _('License') }}: {{ ext.license }}{% endif %}
          </div>
          {% if ext.homepage %}
          <div class="settings-row-desc">
            <a href="{{ ext.homepage }}" target="_blank" rel="noopener noreferrer">{{ ext.homepage }}</a>
          </div>
          {% endif %}
        </div>
      </div>

      <!-- A signature that exists but doesn't verify is the one case worth
           shouting about: either the module was modified after it was signed, or
           it's signed by somebody this MediaForge has no reason to believe.
           An *unsigned* module gets no warning at all — that's the normal state
           of most third-party modules, not a fault. -->
      {% if ext.signature.signed and not ext.signature.valid %}
      <div class="settings-hint" style="color:var(--error);">
        {{ _('This module carries a signature that does not check out.') }}
        <code>{{ ext.signature.reason }}</code>
      </div>
      {% elif ext.signature.valid %}
      <div class="settings-hint">
        {{ _('Signed by') }}: {{ ext.signature.signer }}
        <code style="opacity:.6;">{{ ext.signature.key_id }}</code>
      </div>
      {% endif %}

      {% if ext.incompatible_reason %}
      <div class="settings-hint" style="color:var(--error);">
        {{ _('This module declares a MediaForge version range the running version is outside of, so it was not loaded.') }}
        <code>{{ ext.incompatible_reason }}</code>
      </div>
      {% endif %}
      <!-- ...and not the recorded error when that error IS the incompatibility
           (which is exactly what discover_and_register() records as the skip
           reason), or the same sentence would render twice in a row. -->
      {# The recorded reason is what somebody has to paste into an issue, and
         an import failure's reason is a whole traceback. One line of it is
         useless, so it gets its own block: collapsed by default (it is long),
         with a copy button that does not require selecting monospace text in a
         scroll box. #}
      {% if ext.error and ext.error != ext.incompatible_reason %}
      <div class="mm-error-box">
        {% if "\n" in ext.error %}
        <div class="mm-error-head">
          <button type="button" class="mm-error-toggle" data-mm-trace="mmTrace-{{ ext.name }}"
                  aria-expanded="false" aria-controls="mmTrace-{{ ext.name }}">
            ▸ {{ _('Show full error') }}
          </button>
          <button type="button" class="btn btn-ghost btn-sm mm-copy-btn"
                  data-mm-copy="mmTrace-{{ ext.name }}">{{ _('Copy') }}</button>
        </div>
        <pre class="mm-trace" id="mmTrace-{{ ext.name }}" hidden>{{ ext.error }}</pre>
        {% else %}
        <div class="mm-error-head">
          <div class="settings-hint" style="color:var(--error);padding:0;">{{ ext.error }}</div>
          <button type="button" class="btn btn-ghost btn-sm mm-copy-btn"
                  data-mm-copy="mmTrace-{{ ext.name }}">{{ _('Copy') }}</button>
        </div>
        <pre class="mm-trace" id="mmTrace-{{ ext.name }}" hidden>{{ ext.error }}</pre>
        {% endif %}
      </div>
      {% endif %}

      <!-- Needs a Python dependency it doesn't have. Previously this module was
           simply skipped and the admin was left with a one-line reason and no
           way to act on it — which is why module authors started vendoring pip
           packages into their own folders. The dependency is installed into
           ~/.mediaforge/module_deps/ (never into MediaForge's own environment,
           never into the module folder) and the module is registered live if
           that was all that was blocking it. See thirdparties/deps.py. -->
      {% if ext.missing_requirements %}
      <div class="settings-hint" style="color:var(--error);">
        {{ _('This module needs a Python dependency that is not installed:') }}
        <code>{{ ext.missing_requirements|join(', ') }}</code>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('Install dependency') }}</div>
          <div class="settings-row-desc">
            {% if ext.deps_installable %}
            {{ _('Downloads the package from PyPI into the MediaForge module folder and loads the module afterwards.') }}
            {% else %}
            {{ _('This build cannot install packages itself. Install the dependency into the environment MediaForge runs in.') }}
            {% endif %}
          </div>
        </div>
        <div class="settings-row-right">
          <button class="btn btn-primary"
                  {% if not ext.deps_installable %}disabled{% endif %}
                  onclick="installModuleDeps('{{ ext.name }}', this)">
            {{ _('Install now') }}
          </button>
        </div>
      </div>
      {% endif %}

      {% if ext.registered_items %}
      <!-- Deliberately NOT the full settings card here (that used to be
           render_settings_card(card), showing every extra_settings field —
           e.g. Media Kalender's Lookahead/Cache/Reminder rows — duplicated
           on top of the Integrations/Notifications page that already owns
           them). The Modulmanager's job is just "is this module on, and
           where do I configure it", not a second copy of every field: two
           rows per registered item — a plain enable/disable toggle (same
           generic /api/settings/thirdparty/<id> master toggle every card
           uses, see extension_cards.js) and a jump link to that item's full
           card on whichever settings_host/settings_tab it actually
           registered onto (normally Integrations' Third Party tab). The
           link's ?open=<id>#<tab> is read by integrations.js /
           notifications.html on load to switch to the right tab, expand
           that one card, and scroll it into view. -->
      {% for item in ext.registered_items %}
      {% set card = get_thirdparty_card(item.id) %}
      {% if card %}
      <div class="settings-row" style="border-bottom:none;padding-bottom:0;">
        <div class="settings-row-left">
          <div class="settings-row-desc">
            <code style="opacity:.6;font-size:.9em;">{{ item.id }}</code>
            {% if item.section %} · {{ _('Sidebar') }}: {{ _(item.section|capitalize) }}{% endif %}
            · {{ _('Settings') }}: {{ _(item.settings_host|capitalize) }} / {{ item.settings_tab }}
            {%- if item.has_dashboard_widget %} · {{ _('Dashboard widget') }}{% endif -%}
            {%- if item.has_provider_pill %} · {{ _('Provider pill') }}{% endif %}
            {%- if item.requires_enabled %} · {{ _('Requires') }}: {{ item.requires_enabled|join(', ') }}{% endif %}
          </div>
          {% if item.requires_enabled and not item.requires_enabled_ok %}
          <div class="settings-row-desc" style="color:var(--error, #e74c3c);">
            {{ _('One or more required modules are not currently enabled — this module will not work until they are.') }}
          </div>
          {% endif %}
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('Enable module') }}</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle">
            <input type="checkbox" class="thirdparty-toggle" data-thirdparty-id="{{ card.id }}" onchange="saveThirdpartyToggle('{{ card.id }}', this)" />
            <span class="toggle-slider"></span>
          </label>
        </div>
      </div>
      <div class="settings-row" style="border-bottom:none;">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('Open module') }}</div>
          <div class="settings-row-desc">{{ _('Configure its settings on the') }} {{ _(item.settings_host|capitalize) }} {{ _('page') }}</div>
        </div>
        <div class="settings-row-right">
          <a class="btn btn-secondary" style="text-decoration:none;display:inline-block;" href="{{ url_for(item.settings_host + '_page') }}?open={{ item.id }}#{{ item.settings_tab }}">{{ _('Open module') }} →</a>
        </div>
      </div>
      {% endif %}
      {% endfor %}
      {% else %}
      <div class="settings-hint">{{ _('This folder registered no sidebar/settings item — could be a background-job-only integration, or one that failed before reaching register_thirdparty().') }}</div>
      {% endif %}

      <!-- Uninstall. Deliberately available for every folder, not just
           store-installed ones and not just healthy ones: a module too broken
           to import is one you especially want to be able to get rid of from
           the UI. Staged, never immediate — see the restart banner above. -->
      <div class="settings-row" style="border-bottom:none;">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('Uninstall module') }}</div>
          <div class="settings-row-desc">
            {{ _('Removes the folder and its namespaced settings on the next start. Data in its own tables is kept.') }}
          </div>
        </div>
        <div class="settings-row-right">
          <button class="btn btn-danger ext-uninstall-btn" data-folder="{{ ext.name }}"
                  data-label="{{ ext.module_name }}">{{ _('Uninstall') }}</button>
        </div>
      </div>
    </div>
  </div>
  {% endfor %}

  </div><!-- /#exttab-modules -->

  <div class="settings-tab-panel" id="exttab-themes">
  <!-- ── Installed theme packs (web/themes.py) ──────────────────────────────
       Same card idiom as modules above, same store, different lifecycle:
       themes are inert CSS/asset packs, so install, upgrade and uninstall are
       always live — no restart banner ever applies to them. Invalid folders
       (hand-copied, missing manifest, disallowed file types) are still listed
       with their reasons, for the same "why isn't it showing up" job this
       page does for modules. data-module-id carries the manifest id the store
       matches on for the "Update: v…" badge, exactly like module cards. -->
  {% if theme_packs %}
  <div class="settings-section" style="padding:14px 20px;">
    <span class="integ-subsection-title">{{ _('Theme Packs') }}</span>
    <span class="integ-subsection-badge badge-version">{{ theme_packs | length }}</span>
  </div>
  {% endif %}
  {% for tp in theme_packs %}
  <div class="settings-section integ-card collapsed" id="integCard-theme-{{ tp.folder }}"
       data-module-id="{{ tp.id }}" data-kind="theme">
    <div class="integ-subsection-header integ-collapsible-header" style="padding:14px 20px !important;"
         onclick="toggleIntegCollapse('theme-{{ tp.folder }}')">
      <span class="integ-collapsible-chevron">▸</span>
      <span class="integ-subsection-title">{{ tp.name }}</span>
      <span class="integ-subsection-badge badge-version">v{{ tp.version }}</span>
      <span class="integ-subsection-badge badge-depends">{{ _('Theme') }}</span>
      {% if tp.signature.tier == 'official' %}
      <span class="integ-subsection-badge badge-official" title="{{ _('Signed by') }} {{ tp.signature.signer }}">{{ _('Official') }}</span>
      {% elif tp.signature.tier == 'verified' %}
      <span class="integ-subsection-badge badge-verified" title="{{ _('Signed by') }} {{ tp.signature.signer }}">{{ _('Verified') }}</span>
      {% elif tp.signature.signed %}
      <span class="integ-subsection-badge badge-incompatible" title="{{ tp.signature.reason }}">{{ _('Signature invalid') }}</span>
      {% else %}
      <span class="integ-subsection-badge badge-unsigned" title="{{ _('No MODULE.sig — nobody vouches for this theme') }}">{{ _('Unsigned') }}</span>
      {% endif %}
      {% if tp.author %}
      <span class="integ-subsection-badge badge-author" title="{{ _('Author') }}">{{ tp.author }}</span>
      {% endif %}
      {% if not tp.valid %}
      <span class="integ-subsection-badge badge-import-failed" title="{{ tp.errors | join('; ') }}">{{ _('Invalid') }}</span>
      {% endif %}
      {% if active_theme_folder == tp.folder %}
      <span class="integ-subsection-badge badge-enabled">{{ _('Instance default') }}</span>
      {% endif %}
    </div>
    <div class="integ-collapsible-body">
      {% set desc = tp.description.get(ui_language) or tp.description.get('en') %}
      {% if desc %}
      <div class="settings-hint" style="padding:10px 20px 0;">{{ desc }}</div>
      {% endif %}
      {% if not tp.valid %}
      <div class="settings-hint" style="padding:10px 20px 0;color:var(--error);">
        {{ _('This theme pack is invalid and will not be offered:') }}
        {{ tp.errors | join('; ') }}
      </div>
      {% endif %}
      {% if tp.preview %}
      <div style="padding:12px 20px 0;">
        <img class="theme-pack-preview" loading="lazy" alt="{{ tp.name }} preview"
             src="{{ url_for('theme_asset', folder=tp.folder, asset=tp.preview) }}?v={{ tp.version }}" />
      </div>
      {% endif %}
      <div class="settings-row" style="padding:10px 20px;">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('Instance default') }}</div>
          <div class="settings-row-desc">
            {{ _('Make this the theme every user sees unless they picked their own in Settings → Design.') }}
          </div>
        </div>
        <div class="settings-row-right">
          {% if active_theme_folder == tp.folder %}
          <button class="btn btn-secondary theme-default-btn" data-folder="">{{ _('Revert to default look') }}</button>
          {% elif tp.valid %}
          <button class="btn btn-primary theme-default-btn" data-folder="{{ tp.folder }}">{{ _('Set as default') }}</button>
          {% endif %}
        </div>
      </div>
      <div class="settings-row" style="border-bottom:none;">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('Uninstall theme') }}</div>
          <div class="settings-row-desc">
            {{ _('Deletes the theme folder immediately — themes are plain CSS and assets, no restart needed. Users who selected it fall back to the default look.') }}
          </div>
        </div>
        <div class="settings-row-right">
          <button class="btn btn-danger ext-uninstall-btn" data-folder="{{ tp.folder }}"
                  data-kind="theme" data-label="{{ tp.name }}">{{ _('Uninstall') }}</button>
        </div>
      </div>
    </div>
  </div>
  {% endfor %}
  </div><!-- /#exttab-themes -->
  </div><!-- /#extInstalledView -->

  <!-- ── View 2: the module store ─────────────────────────────────────────
       Hidden until the header button opens it. The catalog is still fetched on
       page load though (see module_store.js) — that is what puts the update count
       on the button and the "Update: v…" badges on the installed cards, and an
       admin should not have to go looking to find out something is out of date.
       Modules are arbitrary Python running in this process, so nothing here
       installs anything without an explicit click, and unverified entries need an
       opt-in on top of that. -->
  <div id="extStoreView" style="display:none;">

  <!-- Card 0: "anyone can build one". The store reads like a catalog somebody else
       fills, which hides the actual situation: web/thirdparties/ and web/themes/ are
       a documented public API, and a third party's module is a first-class citizen
       here (see the "Additional repositories" row below -- a stranger's repository is
       an ordinary store). So the three things a would-be author needs are stated at
       the point where they realise they want one: worked examples with their own
       READMEs, the reference docs, and where to actually submit the result.
       Placed above the settings card because it is an invitation, not configuration,
       and an invitation buried under a trust-key table is not one.
       flex-wrap + the .ext-author-links helper (extensions.css) so the link row
       stacks on phones instead of pushing the card sideways. -->
  <div class="settings-section" id="extStoreAuthorCard">
    <div class="integ-subsection-header" style="padding:14px 20px !important;">
      <span class="integ-subsection-title">{{ _('Build your own module or theme') }}</span>
      <span class="integ-subsection-badge badge-version">{{ _('Open to everyone') }}</span>
    </div>
    <div style="padding:0 20px 16px;">
      <div class="settings-row" style="border-bottom:none;flex-wrap:wrap;gap:12px;">
        <div class="settings-row-left">
          <div class="settings-row-desc">
            {{ _('The store is not ours alone: anyone can write a MediaForge module or theme pack and publish it here. Modules add providers, hosters, notification channels, pages and settings through a documented API; theme packs are plain CSS, no Python at all.') }}
          </div>
          <div class="settings-row-desc">
            {{ _('Start from the ready-made examples — each folder is a working module with its own README explaining what it registers and why.') }}
          </div>
        </div>
        <div class="settings-row-right ext-author-links"
             style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;max-width: 35%;">
          <a class="btn btn-secondary" target="_blank" rel="noopener noreferrer"
             href="https://github.com/PD-Codes/MediaForge/tree/main/.examples/thirdparties">
            {{ _('Module examples') }}
          </a>
          <a class="btn btn-secondary" target="_blank" rel="noopener noreferrer"
             href="https://github.com/PD-Codes/MediaForge/tree/main/.examples/themes">
            {{ _('Theme examples') }}
          </a>
          <a class="btn btn-secondary" target="_blank" rel="noopener noreferrer"
             href="https://github.com/PD-Codes/MediaForge/wiki/Modules">
            {{ _('Developer docs') }}
          </a>
          <!-- The submission side of the same store this page reads from. Primary,
               because it is the step that turns a finished folder into an entry in
               the catalog below; a new submission starts out unreviewed, which is
               exactly the state the "Allow unverified and unreviewed modules"
               toggle further down decides whether to show. -->
          <a class="btn btn-primary" target="_blank" rel="noopener noreferrer"
             href="https://mediaforge.softarchiv.com">
            {{ _('Publish on the developer portal') }}
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- Card 1: where the modules come from and what this install is willing to run.
       Settings, not merchandise — kept apart from the catalog below, because reading a
       list of available modules and deciding which repositories to trust are two
       different jobs and mixing them into one scroll made the modules look like just
       another settings row. -->
  <div class="settings-section" id="extStoreSection">
    <div class="integ-subsection-header" style="padding:14px 20px !important;">
      <span class="integ-subsection-title">{{ _('Module Store') }}</span>
      {% if store_enabled %}
      <span class="integ-subsection-badge badge-version" id="extStoreName">{{ store_url }}</span>
      {% else %}
      <span class="integ-subsection-badge badge-disabled">{{ _('Not configured') }}</span>
      {% endif %}
    </div>
    <div style="padding:0 20px 16px;">
      <!-- The official store: read-only, on purpose. It is a constant in
           thirdparties/store.py, not a setting — a field here would mean "talk
           someone into pasting a URL and their official modules now come from
           you". Shown, because an admin should be able to see where their modules
           come from; not editable, because that is not their decision to make. -->
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('Official store') }}</div>
          <div class="settings-row-desc">
            {{ _('Ships with MediaForge and cannot be changed here — this is the one repository whose modules this build is willing to call official.') }}
          </div>
        </div>
        <div class="settings-row-right">
          {% if store_url %}
          <code style="opacity:.8;">{{ store_url }}</code>
          {% else %}
          <span class="settings-row-desc">{{ _('This build ships no official store.') }}</span>
          {% endif %}
        </div>
      </div>

      <!-- Additional repositories: the part that IS the admin's to decide. An extra
           repo is an ordinary store — same index format, same signature check, no
           special standing. Its modules come out "unverified" in practice, because a
           third-party repo doesn't hold the keys this build was compiled with. That's
           the correct outcome, not a restriction. -->
      <div class="settings-row" id="extStoreExtraRow">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('Additional repositories') }}</div>
          <div class="settings-row-desc">
            {{ _('One URL per line. Modules from a third-party repository are unverified unless they carry a signature this MediaForge trusts.') }}
          </div>
        </div>
        <div class="settings-row-right ext-store-extra-controls" style="display:flex;gap:8px;align-items:flex-start;">
          <textarea id="extStoreExtraUrls" rows="3" class="ext-store-extra-textarea"
                    placeholder="https://someone-else.example/modules">{{ extra_urls|join('\n') }}</textarea>
          <button class="btn btn-primary" id="extStoreExtraSaveBtn">{{ _('Save') }}</button>
        </div>
      </div>

      <!-- One switch, two consequences, and they belong together: it permits unverified
           modules to be installed AND it makes the store list the ones nobody has reviewed
           yet (its index-all.json — see thirdparties/store.py's fetch_index()). Splitting
           them into two toggles would mean an admin could switch on "allow unverified" and
           see no change whatsoever, because the catalog they are reading never mentions
           any. -->
      <div class="settings-row" id="extStoreUnverifiedRow" {% if not store_enabled %}style="display:none;"{% endif %}>
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('Allow unverified and unreviewed modules') }}</div>
          <div class="settings-row-desc">
            {{ _('Unverified entries carry no signature this build trusts, and unreviewed ones are submissions nobody has read yet — they are shown only while this is on. Installing one runs it inside MediaForge with full access to your data.') }}
          </div>
        </div>
        <div class="settings-row-right">
          <label class="toggle">
            <input type="checkbox" id="extStoreUnverified" {% if allow_unverified %}checked{% endif %}>
            <span class="toggle-slider"></span>
          </label>
        </div>
      </div>

      <!-- Trusted signing keys: shown, never editable. They are BUILTIN_KEYS in
           thirdparties/trusted_keys.py, compiled into this build. A trust root a user
           can paste into is a trust root an attacker can talk them into pasting into
           ("add this key and my module shows up as Official"), and the badge would
           stop meaning anything at all. So this row exists to answer "why is that
           module official?" — not to change the answer. -->
      <!-- Where modules live. Not a setting — a fact, and one an admin needs when
           installing a module by hand or looking for one the store put there. -->
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('Module folder') }}</div>
          <div class="settings-row-desc">
            {{ _('Installed modules live here, outside MediaForge\'s program files — next to your database and cache, so they survive an update. A module installed by hand is simply a folder dropped in here; it is picked up on the next start.') }}
          </div>
        </div>
        <div class="settings-row-right">
          <code style="opacity:.8;">{{ modules_dir }}</code>
        </div>
      </div>
      <!-- Same fact for theme packs (web/themes.py). -->
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('Theme folder') }}</div>
          <div class="settings-row-desc">
            {{ _('Installed theme packs live here. A theme installed by hand is a folder with a theme.json dropped in here — it shows up on the next page load, no restart needed.') }}
          </div>
        </div>
        <div class="settings-row-right">
          <code style="opacity:.8;">{{ themes_dir }}</code>
        </div>
      </div>

      <div class="settings-row" id="extStoreKeysRow">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('Trusted signing keys') }}</div>
          <div class="settings-row-desc">
            {{ _('Built into MediaForge and not configurable. A module is "Official" because one of these keys signed it — neither a store nor a setting can decide that.') }}
          </div>
        </div>
        <div class="settings-row-right">
          {% if trusted_keys %}
          {% for key in trusted_keys %}
          <span class="integ-subsection-badge {% if 'official' in key.tiers %}badge-official{% else %}badge-verified{% endif %}"
                title="{{ key.key_id }} · {{ key.tiers|join(', ') }}">
            {{ key.name }}
          </span>
          {% endfor %}
          {% else %}
          <span class="settings-row-desc">{{ _('This build trusts no signing keys — nothing can be official.') }}</span>
          {% endif %}
        </div>
      </div>

    </div>
  </div>

  <!-- Card 2: the catalog itself, in its own card below the settings — this is what an
       admin came here to look at.

       Fetched client-side (module_store.js): a slow or unreachable repository must not
       be able to delay the page whose actual job is showing the modules already
       installed here. -->
  <div class="settings-section" id="extStoreCatalogCard">
    <div class="integ-subsection-header" style="padding:14px 20px !important;">
      <span class="integ-subsection-title">{{ _('Available modules') }}</span>
      <span class="integ-subsection-badge badge-version" id="extStoreCount" style="display:none;"></span>
      <!-- Type filter (module_store.js): the same catalog carries modules and
           theme packs (index "type" field); this narrows the list client-side. -->
      <div class="mf-search ext-store-search">
        <svg class="mf-search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
             stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
        </svg>
        <input type="search" class="mf-search-input" id="extStoreSearch"
               placeholder="{{ _('Search modules and themes…') }}"
               aria-label="{{ _('Search modules and themes…') }}" autocomplete="off">
        <button type="button" class="mf-search-clear" id="extStoreSearchClear"
                aria-label="{{ _('Clear search') }}" hidden>&times;</button>
      </div>
      <div class="ext-type-filter" id="extTypeFilter" role="group" aria-label="{{ _('Filter by type') }}">
        <button type="button" class="ext-type-filter-btn active" data-type="">{{ _('All') }}</button>
        <button type="button" class="ext-type-filter-btn" data-type="module">{{ _('Modules') }}</button>
        <button type="button" class="ext-type-filter-btn" data-type="theme">{{ _('Themes') }}</button>
      </div>
      <button class="btn btn-secondary" id="extStoreRefreshBtn" style="margin-left:auto;{% if not store_enabled %}display:none;{% endif %}">
        {{ _('Refresh store') }}
      </button>
    </div>
    <div style="padding:0 20px 16px;">
      <div id="extStoreCatalog" {% if not store_enabled %}style="display:none;"{% endif %}>
        <div class="settings-hint" id="extStoreStatus">{{ _('Loading store…') }}</div>
        <div id="extStoreList"></div>
      </div>
    </div>
  </div>

  </div><!-- /#extStoreView -->
</div>
<!-- Generic enable-toggle load/save helpers (see web/thirdparties/registry.py's
     register_generic_settings_routes) -- the "Enable module" toggle above
     is the same .thirdparty-toggle every settings card uses, populated and
     saved via loadThirdpartyToggles()/saveThirdpartyToggle() from this file,
     exactly like integrations.html/notifications.html. -->
<script src="{{ url_for('static', filename='extension_cards.js') }}"></script>
<!-- Module store client: the installed/store view switch, catalog rendering,
     install/uninstall/discard actions, restart banner, extra repositories. The
     official store URL and the trusted keys are compiled in and only displayed
     here — see web/thirdparties/store.py and trusted_keys.py. -->
<script src="{{ url_for('static', filename='module_store.js') }}"></script>
<script>
// "Refresh" button -- POST /api/extensions/rescan (see routes/extensions.py /
// web/thirdparties/__init__.py's rescan_new_modules()) picks up any NEW
// web/thirdparties/<name>/ folder live, no app restart needed. Simplest
// correct way to show the result is a full page reload afterwards rather
// than duplicating this template's card-rendering logic in JS -- this
// button is clicked rarely (only right after dropping in a new module
// folder), so the reload's cost doesn't matter.
// extensions.html doesn't load app.js/integrations.js/etc. (the only
// scripts that define a global showToast()), so calling the bare
// showToast(...) here throws a ReferenceError -- which, since it happened
// inside the try (and, worse, inside the catch's own error-toast call
// too), silently aborted this whole handler before it ever reached the
// btn.disabled=false / reload lines. That's why "Scanne…" used to get
// stuck forever even on a fast, successful 200 response. Guard against
// showToast not existing instead of assuming every page defines it.
function extRescanToast(msg) {
  if (window.showToast) { window.showToast(msg); return; }
  console.log("[Modulmanager]", msg);
}

document.getElementById("extRescanBtn").addEventListener("click", async function () {
  const btn = this;
  btn.disabled = true;
  const originalText = btn.textContent;
  btn.textContent = t("Scanne…", "Scanning…");
  try {
    const resp = await fetch("/api/extensions/rescan", { method: "POST" });
    const data = await resp.json();
    const found = (data.new_modules || []).length;
    extRescanToast(found
      ? t(`${found} neue(s) Modul(e) gefunden und geladen: ${data.new_modules.join(", ")}`,
          `${found} new module(s) found and loaded: ${data.new_modules.join(", ")}`)
      : t("Keine neuen Module gefunden.", "No new modules found."));
    if (found) {
      setTimeout(() => window.location.reload(), 900);
    } else {
      btn.disabled = false;
      btn.textContent = originalText;
    }
  } catch (e) {
    extRescanToast(t("Fehler: ", "Error: ") + e.message);
    btn.disabled = false;
    btn.textContent = originalText;
  }
});

// "Install dependency" -- POST /api/extensions/install-deps with the module's
// FOLDER name. The requirements themselves come from the module's own
// MODULE_REQUIREMENTS on the server side; nothing about which package gets
// installed is decided here (see routes/extensions.py). pip can take a while on
// a cold cache, so the button says so rather than looking hung.
async function installModuleDeps(folder, btn) {
  const originalText = btn.textContent;
  btn.disabled = true;
  btn.textContent = t("Installiere…", "Installing…");
  try {
    const resp = await fetch("/api/extensions/install-deps", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ folder: folder }),
    });
    const data = await resp.json();
    if (!resp.ok || !data.ok) {
      throw new Error(data.error || ("HTTP " + resp.status));
    }
    if (data.registered) {
      extRescanToast(t("Abhängigkeit installiert, Modul geladen.",
                       "Dependency installed, module loaded."));
    } else {
      extRescanToast(t("Abhängigkeit installiert — Neustart nötig.",
                       "Dependency installed — restart required."));
    }
    setTimeout(() => window.location.reload(), 900);
  } catch (e) {
    extRescanToast(t("Fehler: ", "Error: ") + e.message);
    btn.disabled = false;
    btn.textContent = originalText;
  }
}
</script>
{% endblock %}