{% extends "_base.html" %}
{% block title %}Connect Mealie · Cauldron{% endblock %}
{% block content %}

<div class="page-head">
  <div class="crumb">// bind</div>
  <h1>bind your <span class="accent">mealie</span></h1>
  <div class="lede">cauldron acts on mealie under your own identity. one-time, ~30 seconds.</div>
</div>

<section class="panel">
  <div class="panel-head">
    <h2>token mint</h2>
  </div>
  <ol>
    <li>open <a href="{{ mealie_url }}/group/api-tokens" target="_blank" rel="noopener">mealie → api tokens</a></li>
    <li>click <strong style="color:var(--hex)">new api token</strong>, name it <code>cauldron</code>, integration <code>generic</code></li>
    <li>copy the long token string</li>
    <li>paste below and bind</li>
  </ol>

  {% if error %}<p style="color: var(--crit); font-size: .9em; margin: .8em 0;">{{ error }}</p>{% endif %}

  <form method="post" action="/connect-mealie">
    <p><input type="text" name="mealie_token" placeholder="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..." required autocomplete="off" autocapitalize="off" spellcheck="false"></p>
    <div class="btn-row">
      <button class="btn btn-primary" type="submit">Bind</button>
      <a class="btn btn-purple" href="/me">Cancel</a>
    </div>
  </form>
</section>

<p class="muted">stored encrypted at rest with a fernet key that lives only in cauldron's env. revoke anytime in mealie's ui — cauldron will detect and re-prompt.</p>

{% endblock %}