{% extends "base.html" %}
{% comment %}
Step two: answer what the template needs, then confirm.

Everything from the uploaded file — flow names, tag names, request URLs — is
somebody else's text and is rendered through Django's autoescaping. There is no
`|safe` and no `mark_safe` on this page, deliberately: a message body in a
template carries {{ placeholders }} that apps/flows/rendering.py substitutes at
send time and no template engine ever evaluates (SECURITY-BASELINE §3), and a
review page that rendered one as markup would be the hole that undoes it.

The external-request URLs are printed as text rather than linked. The importer
did not choose them, and a clickable link on a review page is one misread away
from visiting a stranger's address.
{% endcomment %}

{% block title %}Import a flow · DemandTrail Messaging{% endblock %}

{% block page_header %}
<div class="page-header max-w-4xl">
  <div class="page-header-text">
    <h1 class="page-title">Review this import</h1>
    <p class="page-lede">
        {% comment %}
          A shipped template is named the way its tile named it, not by its
          slug — see _source_label in apps/flows/views_portability.py.
        {% endcomment %}
        {{ source_label }} Check what will be added.
    </p>
  </div>
</div>
{% include "flows/_import_steps.html" with current=2 %}
{% endblock %}

{% block content %}
<div class="max-w-4xl">

    {% comment %} What will be created {% endcomment %}
    <section class="rounded-xl border p-4 mb-4" style="border-color: var(--border); background: var(--surface-1);">
        <h2 class="text-sm font-semibold mb-2" style="color: var(--text-primary);">Flows in this file</h2>
        <ul class="space-y-1">
            {% for flow in plan.document.flows %}
            <li class="text-sm" style="color: var(--text-secondary);">
                <span style="color: var(--text-primary);">{{ flow.name }}</span>
                {% comment %}
                  "Steps", the word the template gallery tile used to get
                  somebody here. "Nodes" is the graph's word for the same thing.
                {% endcomment %}
                · {{ flow.graph.nodes|length }} step{{ flow.graph.nodes|length|pluralize }},
                {{ flow.triggers|length }} trigger{{ flow.triggers|length|pluralize }}
                {% if flow.key == plan.document.entry %}
                <span class="status-pill status-pill-info ml-1">Main flow</span>
                {% endif %}
            </li>
            {% endfor %}
        </ul>
        {% comment %}
          "Unpublished drafts, triggers switched off" was accurate and left the
          reader nowhere: it names the state the flows land in without naming
          the three things that get them out of it. Somebody importing their
          first template asked, reasonably, how they were supposed to test it.
        {% endcomment %}
        <p class="text-xs mt-3" style="color: var(--text-tertiary);">
            Flows arrive as drafts with triggers off. Review each one before setting it live.
        </p>
    </section>

    {% comment %} Outbound calls the importer did not choose {% endcomment %}
    {% if plan.outbound_requests %}
    <section class="rounded-xl border p-4 mb-4"
             style="border-color: var(--warning-500); background: rgba(var(--warning-500-rgb), 0.08);">
        <h2 class="text-sm font-semibold mb-1" style="color: var(--text-primary);">External requests</h2>
        <p class="text-xs mb-2" style="color: var(--text-secondary);">
            Check these addresses before publishing.
        </p>
        <ul class="space-y-1">
            {% for call in plan.outbound_requests %}
            <li class="text-sm font-mono break-all" style="color: var(--text-secondary);">
                {{ call.method }} {{ call.url }}
                {% comment %}
                  The flow it is in, not the step's internal id: nothing has
                  been created yet, so there is no step for the reader to go
                  and look at, and `node ext_req_2` is a name only the file
                  knows.
                {% endcomment %}
                <span class="font-sans text-xs" style="color: var(--text-tertiary);">
                    (in {{ call.flow_name }})
                </span>
            </li>
            {% endfor %}
        </ul>
    </section>
    {% endif %}

    {% if plan.notes %}
    <section class="rounded-xl border p-4 mb-4" style="border-color: var(--border); background: var(--surface-2);">
        <h2 class="text-sm font-semibold mb-1" style="color: var(--text-primary);">Worth knowing</h2>
        <ul class="space-y-1">
            {% for note in plan.notes %}
            <li class="text-sm" style="color: var(--text-secondary);">{{ note }}</li>
            {% endfor %}
        </ul>
    </section>
    {% endif %}

    {% comment %} The mapping form {% endcomment %}
    <form method="post" action="{{ review_url }}">
        {% csrf_token %}
        {% for group in groups %}
        <section class="rounded-xl border p-4 mb-4" style="border-color: var(--border); background: var(--surface-1);">
            <h2 class="text-sm font-semibold" style="color: var(--text-primary);">{{ group.label }}</h2>
            {% if group.help %}
            <p class="text-xs mt-0.5 mb-3" style="color: var(--text-tertiary);">{{ group.help }}</p>
            {% endif %}
            <div class="space-y-3">
                {% for question in group.questions %}
                {% include "flows/_import_requirement.html" with resolution=question.resolution options=question.options kind=group.kind field_types=group.field_types needed_by=question.needed_by connect_url=question.connect_url %}
                {% endfor %}
            </div>
        </section>
        {% endfor %}

        {% if plan.triggers %}
        <section class="rounded-xl border p-4 mb-4" style="border-color: var(--border); background: var(--surface-1);">
            <h2 class="text-sm font-semibold" style="color: var(--text-primary);">Triggers</h2>
            <p class="text-xs mt-0.5 mb-3" style="color: var(--text-tertiary);">
                Keep a trigger off for now, or skip it entirely.
            </p>
            <div class="space-y-3">
                {% for choice in plan.triggers %}
                <div class="rounded-lg border p-3 flex flex-wrap items-center justify-between gap-2"
                     style="border-color: var(--border);">
                    <div class="min-w-0">
                        <p class="text-sm font-medium" style="color: var(--text-primary);">{{ choice.label }}</p>
                        <p class="text-xs" style="color: var(--text-tertiary);">
                            {{ choice.flow_name }}{% if choice.platform %} · {{ choice.platform }}{% endif %}
                        </p>
                    </div>
                    <select name="trigger|{{ choice.key }}|action" class="form-input-styled" style="width: 9rem;"
                            aria-label="Keep or skip the {{ choice.label }} trigger on {{ choice.flow_name }}">
                        <option value="keep" {% if choice.keep %}selected{% endif %}>Keep</option>
                        <option value="skip" {% if not choice.keep %}selected{% endif %}>Skip</option>
                    </select>
                </div>
                {% endfor %}
            </div>
        </section>
        {% endif %}

        {% comment %}
          Import is a submit button on this form, carrying `then=import`, and it
          is never disabled.

          Both of those are the fix for the same bug. It used to POST straight
          to the confirm endpoint, so it acted on the answers the *server* last
          stored rather than the ones on screen — and it was disabled whenever
          that stored plan was incomplete. Change a dropdown and the button
          stayed dead from the previous render: no error, no toast, nothing.
          With `.btn-brand` carrying no disabled styling either, it looked
          perfectly clickable.

          So: the form saves and imports in one request, and an incomplete plan
          comes back to this page with the missing questions flagged rather than
          being refused by a control that will not depress.
        {% endcomment %}
        <div class="flex flex-wrap items-center gap-2">
            <button type="submit" name="then" value="import" class="btn-pill-primary">
                Import {{ plan.document.flows|length }} flow{{ plan.document.flows|length|pluralize }}
            </button>
            <button type="submit" class="btn-pill-secondary">Save for later</button>
            <a href="{{ list_url }}" class="btn-link">Back to flows</a>
            <button type="button" class="btn-danger-link ml-auto"
                    hx-post="{{ discard_url }}" hx-swap="none"
                    hx-on::after-request="if (JSON.parse(event.detail.xhr.getResponseHeader('HX-Trigger') || '{}').flowImportDiscarded) window.location = '{{ list_url|escapejs }}';">Discard this import</button>
        </div>
        {% comment %}
          Names them, and links to them. A bare count is only useful to somebody
          who already knows which question is blank, and the reader who needs
          this line is exactly the reader who does not.
        {% endcomment %}
        {% if not plan.can_apply %}
        <p class="import-todo">
            Still needed:
            {% for item in unanswered %}<a href="#{{ item.anchor }}">{{ item.label }}: {{ item.name }}</a>{% if not forloop.last %}, {% endif %}{% endfor %}.
            Save to check again.
        </p>
        {% endif %}
    </form>
</div>
{% endblock %}