{% load common_extras %}
{% comment %}
Step 1 — the channel (SPEC §13.1).

`connections` is apps/broadcasts/composer.py::broadcastable_connections, which
filters on PlatformPolicy.broadcast_allowed. Every shipped platform passes that
filter today; one that stops passing drops out as *data*. There is no platform
name in this template and there must not be one — including for the window
notice the later steps show, which arrives as composer.window_notice.
{% endcomment %}
<form data-wizard-save hx-post="{% url 'broadcasts:save_channel' workspace_id=request.workspace.id broadcast_id=broadcast.id %}"
      hx-target="#broadcast-wizard"
      hx-swap="innerHTML">
    {% csrf_token %}
    <h2 class="wizard-title">Choose a channel</h2>
    <p class="wizard-lede">Only channels whose platform permits broadcasts are listed.</p>

    <fieldset class="option-cards">
        <legend class="sr-only">Channel</legend>
        {% for connection in connections %}
        <label class="option-card">
            <input type="radio" name="connection_id" value="{{ connection.id }}"
                   {% if connection.id == broadcast.channel_connection_id %}checked{% endif %} required>
            <span class="pi-chip pi-chip-md {{ connection.platform|platform_class }} w-9 h-9">{% include "partials/_platform_icon.html" with platform=connection.platform size="md" %}</span>
            <span class="option-card-body">
                <span class="option-card-title">{{ connection.display_name }}</span>
                <span class="option-card-text">{{ connection.get_platform_display }}</span>
            </span>
            <span class="option-card-radio" aria-hidden="true"></span>
        </label>
        {% empty %}
        {% include "components/empty_state.html" with icon="channels" title="No channel accepts broadcasts" body="Connect one whose platform permits broadcasts, then come back." %}
        {% endfor %}
    </fieldset>

    <div class="wizard-actions">
        <button type="submit" class="btn-pill-primary" {% if not connections %}disabled{% endif %}>Continue</button>
    </div>
</form>