<div
  id="{{ panel_id }}"
  class="compose-shell box p-3 m-0"
  data-compose-panel="1"
  data-render-mode="{{ render_mode }}"
  data-csrf-token="{{ csrf_token }}"
  data-capability-send="{{ capability_send|yesno:'true,false' }}"
  data-initial-typing="{{ typing_state_json|default:'{}'|escape }}"
  data-cancel-send-url="{% url 'compose_cancel_send' %}"
  data-command-result-url="{% url 'compose_command_result' %}">
  <div class="compose-shell-head is-flex is-justify-content-space-between is-align-items-flex-start is-flex-wrap-wrap is-gap-2 mb-1">
    <div>
      <p class="compose-shell-eyebrow is-size-7 has-text-weight-semibold mb-1">Manual Text Mode</p>
      <div class="compose-context-row">
        <div class="compose-context-primary">
          {% if recent_contacts %}
            <div class="compose-contact-switch">
              <div class="select is-small is-fullwidth">
                <select id="{{ panel_id }}-contact-select" class="compose-contact-select">
                  {% for option in recent_contacts %}
                    <option
                      value="{{ option.identifier }}"
                      data-service="{{ option.service }}"
                      {% if option.person_id %}data-person="{{ option.person_id }}"{% endif %}
                      data-service-map='{{ option.service_identifiers_json|escape }}'
                      {% if option.is_active %}selected{% endif %}>
                      {{ option.person_name }}
                    </option>
                  {% endfor %}
                </select>
              </div>
            </div>
          {% else %}
            <p class="is-size-6 mb-0">
              {% if person %}
                {{ person.name }}
              {% elif group_name %}
                {{ group_name }}
              {% else %}
                {{ identifier }}
              {% endif %}
            </p>
          {% endif %}
        </div>
        {% if platform_options %}
          <div class="compose-context-secondary">
            <div class="compose-platform-switch">
              <div class="select is-small is-fullwidth">
                <select id="{{ panel_id }}-platform-select" class="compose-platform-select">
                  {% for option in platform_options %}
                    <option
                      value="{{ option.service }}"
                      data-identifier="{{ option.identifier }}"
                      data-person="{{ option.person_id }}"
                      {% if option.is_active %}selected{% endif %}>
                      {{ option.service_label }}
                    </option>
                  {% endfor %}
                </select>
              </div>
            </div>
          </div>
        {% endif %}
      </div>
      <p id="{{ panel_id }}-meta-line" class="is-size-7 compose-meta-line mb-0">
        {{ service|title }} · {{ identifier }}
      </p>
    </div>
  </div>

  {% if signal_ingest_warning %}
    <article class="message is-warning is-light my-3">
      <div class="message-body is-size-7">
        {{ signal_ingest_warning }}
      </div>
    </article>
  {% endif %}

  <div id="{{ panel_id }}-status" class="compose-status">
    {% include "partials/compose-send-status.html" %}
  </div>

  <div
    id="{{ panel_id }}-thread"
    class="compose-thread box is-shadowless p-3 m-0"
    data-poll-url="{% url 'compose_thread' %}"
    data-service="{{ service }}"
    data-identifier="{{ identifier }}"
    data-person="{% if person %}{{ person.id }}{% endif %}"
    data-limit="{{ limit }}"
    data-last-ts="{{ last_ts }}"
    data-ws-url="{{ compose_ws_url }}">
    {% include "partials/compose-message-rows.html" with message_rows=serialized_messages show_empty_state=True empty_message="No stored messages for this contact yet." %}
  </div>
  <p id="{{ panel_id }}-typing" class="compose-typing is-hidden">
    {% if person %}{{ person.name }}{% else %}Contact{% endif %} is typing...
  </p>

  <form
    id="{{ panel_id }}-form"
    class="compose-form"
    hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
    hx-post="{% url 'compose_send' %}"
    hx-target="#{{ panel_id }}-status"
    hx-swap="innerHTML">
    <input id="{{ panel_id }}-input-service" type="hidden" name="service" value="{{ service }}">
    <input id="{{ panel_id }}-input-identifier" type="hidden" name="identifier" value="{{ identifier }}">
    <input id="{{ panel_id }}-input-person" type="hidden" name="person" value="{% if person %}{{ person.id }}{% endif %}">
    <input type="hidden" name="render_mode" value="{{ render_mode }}">
    <input type="hidden" name="limit" value="{{ limit }}">
    <input type="hidden" name="panel_id" value="{{ panel_id }}">
    <input type="hidden" name="reply_to_message_id" value="">
    <input type="hidden" name="failsafe_arm" value="0">
    <input type="hidden" name="failsafe_confirm" value="0">
    <div class="compose-form-main">
      <div class="compose-send-safety">
        <label class="checkbox is-size-7" for="{{ panel_id }}-manual-confirm">
          <input
            id="{{ panel_id }}-manual-confirm"
            type="checkbox"
            class="manual-confirm"
            name="manual_confirm"
            value="1"
            {% if not capability_send %}disabled{% endif %}>
          Confirm Send
        </label>
        {% if not capability_send %}
          <p class="help is-size-7 has-text-grey">Send disabled: {{ capability_send_reason }}</p>
        {% endif %}
      </div>
      {% include "partials/bulma-send-composer.html" with composer_class="compose-composer-capsule" textarea_id=panel_id|add:"-textarea" textarea_class="compose-textarea" textarea_name="text" textarea_rows="1" textarea_placeholder="Type a message. Enter to send, Shift+Enter for newline." button_class="is-link is-light compose-send-btn" button_type="submit" button_disabled=True button_title=capability_send_reason|default_if_none:"" button_label="Send" button_icon_class=manual_icon_class %}
    </div>
    <div id="{{ panel_id }}-reply-banner" class="compose-reply-banner is-hidden">
      <span class="compose-reply-banner-label">Replying to:</span>
      <span id="{{ panel_id }}-reply-text" class="compose-reply-banner-text"></span>
      <button type="button" id="{{ panel_id }}-reply-clear" class="button is-white is-small compose-reply-clear-btn">Clear</button>
    </div>
  </form>
</div>
