{# One number around the orb and its details dialog. The welcome screen loads each on its own
   (/welcome/widget/<plugin>/<widget>), so a slow service does not hold up the others; its
   place around the orb, the "n / m" counter and the status line are set by welcome.js. #}
{% set data = item.data %}
{% set warn = data.attention or data.message_tone in ("fail", "warn") %}
<div class="place" style="--angle: {{ angle | default(0) }}deg">
  <button type="button" class="node{% if warn %} warn{% endif %}" style="--s: {{ item.size }}" data-size="{{ item.size }}" data-number="{{ data.value if data.value is number and data.value is not boolean else '' }}" data-key="{{ item.key }}" data-refresh="{{ (item.refresh | default(item.widget.refresh)) | int }}" data-age="{{ item.age | default(0) }}" data-has-value="{{ (data.value is not none) | lower }}" data-needs="{{ (data.message_tone in ('fail', 'warn')) | lower }}" data-title="{{ item.widget.title }}" data-problem="{{ data.message if data.message_tone in ('fail', 'warn') else '' }}" data-tone="{{ data.message_tone }}"{% if data.message_action %} data-fix-url="{{ data.message_action.url }}" data-fix-label="{{ data.message_action.label }}"{% endif %}
          data-open="detail-{{ item.key }}" data-sfx
          aria-label="{{ data.value if data.value is not none else 'No data' }} {{ data.label or item.widget.label }}. Show details">
    <svg class="node-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="{{ item.widget.icon }}"/></svg>
    <span class="node-value">{{ data.value if data.value is not none else "—" }}</span>
    <span class="node-label">{{ data.label or item.widget.label }}</span>
    {% if warn %}<span class="node-warn" aria-hidden="true">▲</span>{% endif %}
  </button>
</div>
<dialog class="modal" id="detail-{{ item.key }}" aria-labelledby="detail-{{ item.key }}-title" data-detail>
  <div class="modal-head">
    <span class="tile{% if data.attention or data.message_tone in ('fail', 'warn') %} warn{% endif %}" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="{{ item.widget.icon }}"/></svg></span>
    <div class="modal-title">
      <h2 id="detail-{{ item.key }}-title">{{ item.widget.title }}</h2>
      <span class="label">{% if data.updated_at %}<span style="color: var(--live)">●</span> {% endif %}{{ data.source }}{% if data.updated_at %} · {{ data.updated_at | ago }}{% endif %}</span>
    </div>
    <button type="button" class="icon-btn refresh-btn" hx-post="/welcome/widgets/{{ item.plugin.id }}/{{ item.widget.id }}/refresh" hx-swap="none" hx-disabled-elt="this" hx-indicator="this" aria-label="Refresh" title="Load new data now"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M20 11a8 8 0 1 0-2.3 5.7M20 4v7h-7"/></svg></button>
    <span class="label" data-counter>{{ index | default(1) }} / {{ total | default(1) }}</span>
    <button type="button" class="icon-btn" data-step="-1" aria-label="Previous"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="m15 6-6 6 6 6"/></svg></button>
    <button type="button" class="icon-btn" data-step="1" aria-label="Next"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg></button>
    <button type="button" class="icon-btn" data-close aria-label="Close details" style="margin-left: 6px"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
  </div>
  <div class="modal-body">
    <div class="modal-summary">
      <div class="row" style="align-items: baseline; gap: 12px"><span class="num" style="font-size: 72px">{{ data.value if data.value is not none else "—" }}</span><span class="muted" style="font-size: 15px">{{ data.summary }}</span></div>
      {% if data.stats %}
      <div class="modal-stats">
        {% for stat in data.stats %}
        {% if stat.filter %}
        <button type="button" class="modal-stat is-filter" data-filter="{{ stat.filter }}" aria-pressed="false" title="Show only these"><div class="num" style="font-size: 24px">{{ stat.value }}</div><div class="label" style="font-size: 9.5px; margin-top: 4px">{{ stat.label }}</div></button>
        {% else %}
        <div class="modal-stat"><div class="num" style="font-size: 24px">{{ stat.value }}</div><div class="label" style="font-size: 9.5px; margin-top: 4px">{{ stat.label }}</div></div>
        {% endif %}
        {% endfor %}
      </div>
      {% endif %}
      {% set groups = data.rows | map(attribute="group") | select | list %}
      {% set subgroup_count = data.rows | map(attribute="subgroup") | select | unique | list | length %}
      {% if data.group_label and (groups | unique | list | length > 1 or subgroup_count > 1) %}
      {# One button per workspace or repository: narrows the list next to it. #}
      <div class="group-list" role="group" aria-label="Filter by {{ data.group_label }}">
        <span class="label">{{ data.group_label }}</span>
        <button type="button" class="group-item" data-group-value="" aria-pressed="true"><span class="trunc">All {{ data.group_label }}</span><span class="group-count">{{ data.rows | length }}</span></button>
        {% for name in groups | unique | sort %}
        <button type="button" class="group-item" data-group-value="{{ name }}" aria-pressed="false"><span class="trunc">{{ name }}</span><span class="group-count">{{ groups | select("equalto", name) | list | length }}</span></button>
        {# Its subgroups (e.g. Jira projects), indented, when there are more than one. #}
        {% set subgroups = data.rows | selectattr("group", "equalto", name) | map(attribute="subgroup") | select | list %}
        {% if subgroups | unique | list | length > 1 %}
        {% for sub in subgroups | unique | sort %}
        <button type="button" class="group-item group-sub" data-group-value="{{ name }}" data-subgroup-value="{{ sub }}" aria-pressed="false"><span class="trunc">{{ sub }}</span><span class="group-count">{{ subgroups | select("equalto", sub) | list | length }}</span></button>
        {% endfor %}
        {% endif %}
        {% endfor %}
      </div>
      {% endif %}
      {% if data.details_url %}<div class="details-extra" hx-get="{{ data.details_url }}" hx-trigger="load"></div>{% endif %}
      {% if data.message %}
      {% set tag = {"fail": "✕ ERROR", "warn": "▲ STALE"}.get(data.message_tone, "○ NOTE") %}
      <div class="alert {{ {'fail': 'alert-error', 'warn': 'alert-warn'}.get(data.message_tone, 'alert-info') }}" role="status">
        <span class="alert-tag">{{ tag }}</span>
        <span>{{ data.message }}{% if data.message_action %} <a href="{{ data.message_action.url }}">{{ data.message_action.label }}</a>{% endif %}</span>
      </div>
      {% endif %}
    </div>
    <div style="min-width: 0">
      {% if data.input %}
      <form class="widget-input" hx-post="{{ data.input.url }}" hx-swap="none" hx-on::after-request="if (event.detail.successful) this.reset()">
        <label class="visually-hidden" for="input-{{ item.key }}">{{ data.input.label }}</label>
        <input class="input" id="input-{{ item.key }}" name="text" placeholder="{{ data.input.placeholder }}" autocomplete="off" required>
        <button type="submit" class="btn btn-primary" aria-label="{{ data.input.label }}">Add</button>
      </form>
      {% endif %}
      {% if data.list_title %}<div class="label list-head" data-list-title="{{ data.list_title }}">{{ data.list_title }}</div>{% endif %}
      {% if data.rows | length > 6 %}
      <input class="input list-search" type="search" data-list-search placeholder="Search {{ data.rows | length }} items…  ( / )" aria-label="Search the list" autocomplete="off" spellcheck="false">
      <p class="muted list-empty" data-list-empty hidden>Nothing matches.</p>
      {% endif %}
      {% for row in data.rows %}
      <div class="modal-row" data-tags="{{ row.tags | join(' ') }}" data-group="{{ row.group }}" data-subgroup="{{ row.subgroup }}">
        <span style="min-width: 0"><span class="trunc" style="display: block; font-weight: 500">{{ row.title }}</span>{% if row.subtitle %}<span class="muted trunc" style="display: block; font-size: 12.5px">{{ row.subtitle }}</span>{% endif %}</span>
        {% if row.badge %}<span class="badge badge-{{ row.tone }}">{{ row.badge }}</span>{% else %}<span></span>{% endif %}
        <span class="row-actions">
          {% for action in row.actions %}<button type="button" class="row-btn" hx-post="{{ action.url }}" hx-swap="none">{{ action.label }}</button>{% endfor %}
          {% if row.url %}<a class="row-btn" href="{{ row.url }}"{% if row.new_tab or not row.url.startswith("/") %} target="_blank" rel="noopener"{% endif %}{% if row.new_tab and row.url.startswith("/") %} data-refresh-after{% endif %}>{{ row.url_label }}</a>{% endif %}
        </span>
      </div>
      {% else %}
      {% if data.value is not none %}<p class="muted" style="margin: 0">Nothing here right now.</p>{% endif %}
      {% endfor %}
    </div>
  </div>
  <div class="modal-foot">
    {% if data.action %}<a class="btn btn-primary" href="{{ data.action.url }}"{% if not data.action.url.startswith("/") %} target="_blank" rel="noopener"{% endif %}>{{ data.action.label }}</a>{% endif %}
    {% for action in data.actions %}<button type="button" class="btn" hx-post="{{ action.url }}" hx-swap="none" hx-disabled-elt="this"{% if action.values %} hx-vals='{{ action.values | tojson }}'{% endif %}>{{ action.label }}</button>{% endfor %}
    {% for link in data.links %}<a class="btn" href="{{ link.url }}"{% if not link.url.startswith("/") %} target="_blank" rel="noopener"{% endif %}>{{ link.label }}</a>{% endfor %}
    {% if data.message_action and data.value is none %}<a class="btn btn-primary" href="{{ data.message_action.url }}">{{ data.message_action.label }}</a>{% endif %}
    <span class="label modal-keys" style="margin-left: auto">Esc closes · ← → switch</span>
  </div>
</dialog>