{% extends "base.html" %}
{% comment %}
Step one of the import wizard: choose a file.

Nothing is created here. The upload is size-capped, parsed and validated against
the flow-template schema, and what is stored is the *validated* document on a
FlowImport row — see apps/flows/views_portability.py. Every error below is a
message from that validation, rendered escaped like all imported text.
{% endcomment %}

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

{% block page_header %}
<div class="page-header max-w-2xl">
    <div class="page-header-text">
        <h1 class="page-title">Import a flow</h1>
        <p class="page-lede">
            Upload a flow template. You will see exactly what it needs, and what it will call out to,
            before anything is created.
        </p>
    </div>
</div>
{% include "flows/_import_steps.html" with current=1 %}
{% endblock %}

{% block content %}
<div class="max-w-2xl">
    {% if errors %}
    <div class="rounded-xl border p-4 mb-4" role="alert"
         style="border-color: var(--error-500); background: var(--error-50);">
        <p class="text-sm font-medium" style="color: var(--text-primary);">That file was not imported</p>
        <ul class="mt-2 space-y-1">
            {% for error in errors %}
            <li class="text-sm" style="color: var(--text-secondary);">{{ error }}</li>
            {% endfor %}
        </ul>
    </div>
    {% endif %}

    <form method="post" enctype="multipart/form-data"
          action="{% url 'flows:import_start' workspace_id=request.workspace.id %}"
          class="card p-6">
        {% csrf_token %}
        <label for="flow-template-file" class="block text-sm font-medium mb-2" style="color: var(--text-primary);">
            Flow template file
        </label>
        <input id="flow-template-file" type="file" name="file" accept=".json,application/json" required
               class="form-input-styled w-full">
        <p class="text-xs mt-2" style="color: var(--text-tertiary);">
            JSON, up to {{ max_bytes|filesizeformat }}. A template exported from any DemandTrail Messaging installation.
        </p>
        <p class="text-xs mt-1" style="color: var(--text-tertiary);">
            Or <a href="{% url 'flows:template_gallery' workspace_id=request.workspace.id %}"
                  class="btn-link">start from one of the built-in templates</a>.
        </p>

        <div class="mt-4 rounded-lg p-3" style="background: var(--surface-2);">
            <p class="text-xs" style="color: var(--text-secondary);">
                Imported flows arrive as <strong>unpublished drafts</strong> with their triggers switched off.
                Nothing runs until you publish it yourself.
            </p>
        </div>

        <div class="wizard-actions">
            <a href="{{ list_url }}" class="btn-link mr-auto">Cancel</a>
            <button type="submit" class="btn-pill-primary">Continue</button>
        </div>
    </form>
</div>
{% endblock %}