{% extends 'base.html' %}
{% block content %}
<section class="section">
  <div class="container two-col planner-layout">
    <div class="card">
      <h1>Smart trip planner</h1>
      <p>Create a Salla activity plan from budget, trip length, and interests.</p>
      <form id="plannerForm" class="form-stack">
        <label>Budget (EUR)
          <input type="number" name="budget_eur" value="180" min="20" max="2000">
        </label>
        <label>Days in Salla
          <input type="number" name="days" value="2" min="1" max="14">
        </label>
        <label>Interests (comma separated)
          <input type="text" name="interests" value="cycling,nature,history">
        </label>
        <label class="inline-check">
          <input type="checkbox" name="need_bike" checked>
          I need a bike from a local partner
        </label>
        <button class="btn primary" type="submit">Generate plan</button>
      </form>
    </div>
    <div class="card" id="plannerResult">
      <h3>Planner output</h3>
      <p>Your itinerary will appear here.</p>
    </div>
  </div>
</section>
{% endblock %}