<div class="ai-workspace-widget">
  <div class="columns is-mobile is-gapless">
    <div class="column is-12-mobile is-12-tablet">
      <div style="margin-bottom: 0.75rem; padding: 0.5rem 0.25rem; border-bottom: 1px solid rgba(0, 0, 0, 0.12);">
        <p class="is-size-7 has-text-weight-semibold">AI Workspace</p>
        <h3 class="title is-6" style="margin-bottom: 0.5rem;">Choose A Contact</h3>
        <p class="is-size-7">
          Pick a person to open their message timeline in a fresh pane.
        </p>
      </div>

      <form id="ai-window-form" style="margin-bottom: 0.75rem; padding: 0.5rem 0.25rem; border-bottom: 1px solid rgba(0, 0, 0, 0.12);">
        <label class="label is-small" for="id_limit">Window</label>
        <div class="select is-fullwidth is-small">
          {{ window_form.limit }}
        </div>
        <p class="help">{{ window_form.limit.help_text }}</p>
      </form>

      <div>
        {% if contact_rows %}
          <div class="buttons are-small" style="display: grid; gap: 0.5rem;">
            {% for row in contact_rows %}
              {% if row.person %}
                <button
                  class="button is-fullwidth"
                  style="border-radius: 8px; border: 0; background: transparent; box-shadow: none; padding: 0;"
                  hx-get="{% url 'ai_workspace_person' type='widget' person_id=row.person.id %}"
                  hx-include="#ai-window-form"
                  hx-target="#widgets-here"
                  hx-swap="beforeend">
                  <span class="tags has-addons gia-tag-ribbon">
                    <span class="tag is-dark gia-badge" style="min-width: 2.5rem; justify-content: center;">
                      <i class="fa-solid fa-comment-dots" aria-hidden="true"></i>
                    </span>
                    <span class="tag is-white gia-badge gia-tag-ribbon-main">
                      <span style="display: inline-flex; align-items: baseline; gap: 0.35rem; min-width: 0;">
                        <strong>{{ row.person.name }}</strong>
                      </span>
                      {% if row.last_ts_label %}
                        <small style="padding-left: 0.5rem;">{{ row.last_ts_label }}</small>
                      {% endif %}
                    </span>
                    <span class="tag is-dark gia-badge" style="min-width: 3.25rem; justify-content: center;">{{ row.message_count }}</span>
                  </span>
                </button>
              {% else %}
                <button
                  class="button is-fullwidth"
                  style="border-radius: 8px; border: 0; background: transparent; box-shadow: none; padding: 0;"
                  disabled>
                  <span class="tags has-addons gia-tag-ribbon">
                    <span class="tag is-info is-light gia-badge" style="min-width: 2.5rem; justify-content: center;">
                      <i class="fa-solid fa-users" aria-hidden="true"></i>
                    </span>
                    <span class="tag is-white gia-badge gia-tag-ribbon-main">
                      <span style="display: inline-flex; align-items: baseline; gap: 0.35rem; min-width: 0;">
                        <strong>{{ row.chat_name }}</strong>
                        <small class="has-text-grey">{{ row.service }}</small>
                      </span>
                    </span>
                  </span>
                </button>
              {% endif %}
            {% endfor %}
          </div>
        {% else %}
          <p class="has-text-grey">No contacts available yet.</p>
        {% endif %}
      </div>
    </div>
  </div>
</div>
