{% extends "portal_base.html" %}
{% block title %}Import contacts · Portal{% endblock %}
{% block topbar_title %}Import contacts{% endblock %}
{% block portal_content %}
<div class="steps">
  <div class="step active"><span>1</span> Upload</div>
  <div class="step"><span>2</span> Map columns</div>
  <div class="step"><span>3</span> Consent</div>
  <div class="step"><span>4</span> Import</div>
</div>

<div class="split">
  <div>
    <div class="panel">
      <div class="panel-h"><h2>Upload</h2></div>
      <div class="panel-b">
        <div class="dropzone">
          <p style="margin:0 0 8px"><strong>Drop CSV or Excel here</strong></p>
          <p class="muted" style="margin:0">Import processing wires up next. Accepted: .csv, .xlsx</p>
          <p style="margin:16px 0 0"><button class="btn btn-ghost btn-sm" type="button" disabled>Choose file</button></p>
        </div>
      </div>
    </div>
    <div class="panel">
      <div class="panel-h"><h2>Column mapping</h2></div>
      <div class="panel-b" style="padding:0">
        <table class="table">
          <thead><tr><th>Your column</th><th>Maps to</th></tr></thead>
          <tbody>
            <tr><td>Email</td><td>email</td></tr>
            <tr><td>First</td><td>first_name</td></tr>
            <tr><td>Last</td><td>last_name</td></tr>
            <tr><td>Phone</td><td>phone</td></tr>
            <tr><td>Street</td><td>postal_address.line1</td></tr>
            <tr><td>City</td><td>postal_address.city</td></tr>
            <tr><td>State</td><td>postal_address.state</td></tr>
            <tr><td>ZIP</td><td>postal_address.zip</td></tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <div>
    <div class="panel">
      <div class="panel-h"><h2>Consent defaults</h2></div>
      <div class="panel-b form-grid">
        <label class="check-row"><input type="checkbox" checked disabled> Email marketing</label>
        <label class="check-row"><input type="checkbox" disabled> SMS</label>
        <label class="check-row"><input type="checkbox" disabled> Postcard</label>
        <div class="field"><label>Source</label><input value="Import" disabled></div>
        <div class="field"><label>Duplicates</label><select disabled><option>Update existing by email</option></select></div>
      </div>
    </div>
    <div class="panel">
      <div class="panel-h"><h2>Preview</h2></div>
      <div class="panel-b">
        <p class="muted">Sample rows appear after upload.</p>
        <button class="btn btn-primary" type="button" disabled>Import contacts</button>
        <p class="hint-block"><a href="{% url 'contacts:list' %}">← Back to mailing list</a></p>
      </div>
    </div>
  </div>
</div>
{% endblock %}