{#
  CLI install widget: server-rendered method × cooldown matrix.
  Mirrors the mcp-install widget's structure — same cooldown control
  row, same settings sub-view, same prehydrate-driven panel visibility.

  Each code block runs through the `highlight` filter (defined in
  docs._ext.widgets._base.make_highlight_filter) which wraps Sphinx's
  PygmentsBridge — so the output is byte-identical to a native
  ``.. code-block::`` block, meaning sphinx-copybutton + its prompt-strip
  regex work automatically. The output is then run through
  ``cooldown_days_slot`` (defined in
  docs._ext.widgets._base.make_cooldown_days_slot_filter) which swaps
  ``<COOLDOWN_DURATION>`` / ``<COOLDOWN_DATE>`` for
  ``<span class="rp-cooldown-days" data-cooldown-*-slot>`` spans.
  widget.js updates both kinds' textContent on every cooldown-days
  input change.
#}
<div class="rp-cli-install rp-cli-install--{{ variant }}">
  <div class="rp-cli-install__tabs rp-cli-install__tabs--methods"
       role="tablist"
       aria-label="Install method">
    {% for method in methods %}
    <button type="button"
            class="rp-cli-install__tab"
            role="tab"
            data-tab-kind="method"
            data-tab-value="{{ method.id }}"
            aria-selected="{{ 'true' if method.id == default_method else 'false' }}"
            tabindex="{{ '0' if method.id == default_method else '-1' }}">
      {{ method.label }}
    </button>
    {% endfor %}

    <div class="rp-cli-install__cooldown-control">
      <input type="checkbox"
             id="rp-cli-install__cooldown-toggle"
             class="rp-cli-install__cooldown-toggle"
             data-action="cooldown-toggle"
             aria-label="Apply a dependency cooldown">
      <button type="button"
              class="rp-cli-install__cooldown-label-text"
              data-action="cooldown-open"
              aria-label="Toggle cooldown settings">Configure cooldowns</button>
      <button type="button"
              class="rp-cli-install__cooldown-help"
              data-action="cooldown-help"
              aria-label="What are cooldowns?"
              title="What are cooldowns?">?</button>
    </div>
  </div>

  <div class="rp-cli-install__body rp-cli-install__body--install">
    {% for panel in panels %}
    <div class="rp-cli-install__panel"
         role="tabpanel"
         data-method="{{ panel.method.id }}"
         data-cooldown="{{ panel.cooldown.id }}"
         tabindex="0"
         {% if not panel.is_default %}hidden{% endif %}>

      {% if panel.method.doc_url %}
      <p class="rp-cli-install__preamble">
        With <a href="{{ panel.method.doc_url }}" target="_blank" rel="noopener">{{ panel.method.label }}</a> installed:
      </p>
      {% endif %}

      {{ (panel.install_body | highlight("console")) | cooldown_days_slot }}

      <p class="rp-cli-install__preamble">Then run it from the terminal:</p>

      {% for cmd in panel.usage_commands %}
      {{ (cmd | highlight("console")) | cooldown_days_slot }}
      {% endfor %}

      {% if panel.note %}
      <p class="rp-cli-install__cooldown-note">
        {{ panel.note }}
      </p>
      {% endif %}
    </div>
    {% endfor %}
  </div>

  <div class="rp-cli-install__body rp-cli-install__body--settings"
       role="dialog"
       aria-label="Cooldown settings">
    <div class="rp-cli-install__settings-header">
      <button type="button"
              class="rp-cli-install__back"
              data-action="cooldown-back"
              aria-label="Back to installer">
        <span class="rp-cli-install__back-icon" aria-hidden="true">&larr;</span>
        <span class="rp-cli-install__back-text">Back</span>
      </button>
      <h3 class="rp-cli-install__settings-title">Dependency cooldowns</h3>
    </div>
    <p class="rp-cli-install__settings-help">
      Use the <em>Configure cooldowns</em> checkbox above to enable or
      disable. These settings choose how cooldown behaves once enabled.
    </p>
    <fieldset class="rp-cli-install__settings-modes">
      <legend class="rp-cli-install__sr-only">Cooldown type</legend>
      <label class="rp-cli-install__settings-mode">
        <input type="radio" name="cooldown-mode" value="days"
               data-action="cooldown-mode"
               {{ 'checked' if default_cooldown_type == 'days' else '' }}>
        <span>
          Apply a cooldown of
          <input type="number" min="1" max="365"
                 value="{{ default_cooldown_days }}"
                 class="rp-cli-install__cooldown-days-input"
                 data-action="cooldown-days"
                 aria-label="Cooldown in days">
          days
        </span>
      </label>
      <label class="rp-cli-install__settings-mode">
        <input type="radio" name="cooldown-mode" value="bypass"
               data-action="cooldown-mode"
               {{ 'checked' if default_cooldown_type == 'bypass' else '' }}>
        <span>Bypass any global cooldown <small>(uv only)</small></span>
      </label>
    </fieldset>
    <details class="rp-cli-install__cooldown-explainer">
      <summary>What are cooldowns?</summary>
      <p>
        Cooldowns delay picking up newly uploaded packages so the
        community has time to spot supply-chain attacks before you
        install. Most package managers don't apply one by default
        &mdash; you opt in via a global setting in your tool's config.
      </p>
      <p>
        Learn more at
        <a href="https://cooldowns.dev/" target="_blank" rel="noopener">cooldowns.dev</a>
        &middot;
        <a href="https://securitylabs.datadoghq.com/articles/dependency-cooldowns/"
           target="_blank" rel="noopener">Datadog Security Labs writeup</a>.
      </p>
    </details>
  </div>
</div>