{{template "base" .}}

{{define "content"}}
{{$d := .}}
<style>
.guide-step { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:20px 24px; margin-bottom:16px; display:flex; gap:16px; }
.step-num { font-size:1.2rem; font-weight:800; color:var(--accent); min-width:28px; }
.step-body h3 { margin:0 0 6px; font-size:0.95rem; font-weight:700; }
.step-body p  { margin:0; font-size:0.85rem; color:var(--muted); line-height:1.5; }
.format-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:12px; margin-top:12px; }
.format-card { background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:14px 16px; }
.format-card .name { font-weight:700; font-size:0.9rem; margin-bottom:4px; }
.format-card .desc { font-size:0.8rem; color:var(--muted); }
.tip { background:rgba(99,102,241,0.08); border:1px solid rgba(99,102,241,0.25); border-radius:10px; padding:14px 18px; font-size:0.85rem; color:var(--text); margin-top:20px; }
.tip strong { color:var(--accent); }
code { font-family:monospace; font-size:0.82rem; background:var(--bg); border:1px solid var(--border); border-radius:5px; padding:1px 6px; }
</style>

<div style="display:flex; align-items:center; gap:14px; margin-bottom:28px;">
  <div>
    <h1 style="margin:0 0 4px;">{{$d.T.Get "auto_import.title"}}</h1>
    <p style="margin:0; font-size:0.85rem; color:var(--muted);">{{$d.T.Get "auto_import.subtitle"}}</p>
  </div>
  <a href="/import" class="btn btn-primary" style="margin-left:auto;">{{$d.T.Get "auto_import.btn_upload"}}</a>
</div>

<div class="guide-step">
  <div class="step-num">1</div>
  <div class="step-body">
    <h3>{{$d.T.Get "auto_import.steps.step1_title"}}</h3>
    <p>{{$d.T.Get "auto_import.steps.step1_body"}}</p>
    <div class="format-grid" style="margin-top:14px;">
      <div class="format-card">
        <div class="name">{{$d.T.Get "auto_import.steps.step1_cgd_name"}}</div>
        <div class="desc">{{$d.T.Get "auto_import.steps.step1_cgd_desc"}}</div>
      </div>
      <div class="format-card">
        <div class="name">{{$d.T.Get "auto_import.steps.step1_tr_name"}}</div>
        <div class="desc">{{$d.T.Get "auto_import.steps.step1_tr_desc"}}</div>
      </div>
      <div class="format-card">
        <div class="name">{{$d.T.Get "auto_import.steps.step1_generic_name"}}</div>
        <div class="desc">{{$d.T.Get "auto_import.steps.step1_generic_desc"}}</div>
      </div>
    </div>
  </div>
</div>

<div class="guide-step">
  <div class="step-num">2</div>
  <div class="step-body">
    <h3>{{$d.T.Get "auto_import.steps.step2_title"}}</h3>
    <p>{{$d.T.Get "auto_import.steps.step2_body"}}</p>
  </div>
</div>

<div class="guide-step">
  <div class="step-num">3</div>
  <div class="step-body">
    <h3>{{$d.T.Get "auto_import.steps.step3_title"}}</h3>
    <p>{{$d.T.Get "auto_import.steps.step3_body"}}</p>
  </div>
</div>

<div class="tip">
  <strong>{{$d.T.Get "auto_import.tip.title"}}</strong> {{$d.T.Get "auto_import.tip.body"}}
</div>

<div style="margin-top:28px; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:20px 24px;">
  <h3 style="margin:0 0 8px; font-size:0.95rem;">{{$d.T.Get "auto_import.api.title"}}</h3>
  <p style="font-size:0.85rem; color:var(--muted); margin:0 0 14px;">
    {{$d.T.Get "auto_import.api.body"}}
  </p>
  <pre style="background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:14px 16px; font-size:0.8rem; overflow-x:auto; margin:0;">curl -X POST https://&lt;your-host&gt;/import/preview \
  -H "X-Auth-User-Id: &lt;user-id&gt;" \
  -H "X-Auth-Email: &lt;email&gt;" \
  -F "account_id=&lt;account-id&gt;" \
  -F "format=cgd" \
  -F "file=@movements.csv"</pre>
  <p style="font-size:0.8rem; color:var(--muted); margin:12px 0 0;">{{$d.T.Get "auto_import.api.footer"}}</p>
</div>
{{end}}