{# templates/_language_row.html — one optional detection-language row.
   Context: `lang` = {code, name, installed, ui_state, reason?}, `token`.
   Self-swaps via outerHTML so polling / download replace this element. #}
<div class="lang-row"
     {% if lang.ui_state in ["running", "cancelling"] %}
       hx-get="/settings/languages/{{ lang.code }}/status?t={{ token }}"
       hx-trigger="every 2s"
       hx-swap="outerHTML"
     {% endif %}>
  <span class="name">
    {{ _(lang.label_key) if lang.label_key else lang.name }}
    {% if lang.mac_app %}
      <small>{{ lang.installed_size_label if lang.installed else lang.download_size_label }}</small>
    {% endif %}
  </span>

  {% if lang.ui_state == "installed" %}
    <span class="lang-badge ok">✓ {{ _('settings.lang.installed') }}</span>
    {% if lang.mac_app %}
      <button class="btn ghost"
              hx-post="/settings/languages/{{ lang.code }}/remove?t={{ token }}"
              hx-target="closest .lang-row"
              hx-swap="outerHTML"
              title="{{ _('settings.lang.remove') }}">
        {{ _('settings.lang.remove') }}
      </button>
    {% endif %}

  {% elif lang.ui_state == "done_restart" %}
    <span class="lang-badge ok">✓ {{ _('settings.lang.restart_hint') }}</span>

  {% elif lang.ui_state == "running" %}
    <div class="lang-progress" role="status" aria-live="polite">
      <span>
        {% if lang.install_phase == "checking" %}
          {{ _('settings.lang.checking_local') }}
        {% elif lang.install_phase == "importing" %}
          {{ _('settings.lang.importing') }} {{ lang.progress_percent }}%
        {% else %}
          {{ _('settings.lang.downloading') }} {{ lang.progress_percent }}%
        {% endif %}
      </span>
      <div class="lang-progress-track" aria-hidden="true">
        <div class="lang-progress-bar" style="width:{{ lang.progress_percent }}%"></div>
      </div>
      <button type="button"
              class="lang-cancel"
              hx-post="/settings/languages/{{ lang.code }}/cancel?t={{ token }}"
              hx-target="closest .lang-row"
              hx-swap="outerHTML"
              aria-label="{{ _('settings.lang.cancel') }}"
              title="{{ _('settings.lang.cancel') }}">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>

  {% elif lang.ui_state == "cancelling" %}
    <div class="lang-progress" role="status" aria-live="polite">
      <span>{{ _('settings.lang.cancelling') }}</span>
      <div class="lang-progress-track" aria-hidden="true">
        <div class="lang-progress-bar" style="width:{{ lang.progress_percent }}%"></div>
      </div>
      <button type="button"
              class="lang-cancel"
              aria-label="{{ _('settings.lang.cancelling') }}"
              disabled>
        <span aria-hidden="true">&times;</span>
      </button>
    </div>

  {% elif lang.ui_state == "failed" %}
    <span class="lang-badge err">
      {{ _(lang.reason_key) if lang.reason_key else _('settings.lang.failed') }}
    </span>
    <button class="btn"
            hx-post="/settings/languages/{{ lang.code }}/download?t={{ token }}"
            hx-target="closest .lang-row"
            hx-swap="outerHTML">
      {{ _('settings.lang.retry') if lang.mac_app else _('settings.lang.download') }}
    </button>

  {% else %}{# available #}
    <button class="btn"
            hx-post="/settings/languages/{{ lang.code }}/download?t={{ token }}"
            hx-target="closest .lang-row"
            hx-swap="outerHTML">
      {{ _('settings.lang.download') }}
    </button>
  {% endif %}
</div>