<%- include("../partials/head") %>
<%- include("../partials/header") %>
<main class="container section">
  <div class="section-header">
    <h1>پلن‌ها</h1>
    <p>انتخاب پلن مناسب و ثبت سفارش با پرداخت داخلی کیف پول.</p>
  </div>
  <div class="grid-three">
    <% plans.forEach((plan) => { %>
      <article class="panel">
        <h2><%= plan.title %></h2>
        <p><%= plan.description %></p>
        <div class="price"><%= helpers.formatCurrency(plan.price) %> تومان</div>
        <ul class="simple-list">
          <% (plan.features || []).forEach((feature) => { %>
            <li><%= feature %></li>
          <% }) %>
        </ul>
        <% if (currentUser) { %>
          <form class="inline-form" data-api-form data-endpoint="/api/orders">
            <input type="hidden" name="planId" value="<%= plan.id %>" />
            <button class="button" type="submit">ثبت سفارش</button>
          </form>
        <% } %>
      </article>
    <% }) %>
  </div>
</main>
<%- include("../partials/footer") %>
