`views/public/wizard-1-category.ejs`

33 lines
<%- include('../partials/head', { title, meta_desc }) %>
<%- include('../partials/header') %>

<main class="wizard">
  <section class="section">
    <div class="wrap narrow">
      <p class="muted small"><a href="/">← Home</a></p>
      <%- include('../partials/wizard-progress', { step }) %>
      <h1>What kind of call?</h1>
      <p class="muted">Pick the closest fit. We'll preset the right fields for the next steps.</p>

      <form method="POST" action="/new/business" class="wizard-form" autocomplete="off">
        <div class="category-pick">
          <% categories.forEach(function(c) { var selected = state.category === c.id; %>
            <label class="category-pick-card <%= selected ? 'selected' : '' %>">
              <input type="radio" name="category" value="<%= c.id %>" <%= selected ? 'checked' : '' %> required>
              <span class="category-pick-icon"><%= c.icon %></span>
              <span class="category-pick-label"><%= c.label %></span>
            </label>
          <% }); %>
        </div>

        <div class="form-actions">
          <button type="submit" class="btn primary">Next: who to call →</button>
          <a class="btn ghost" href="/">Cancel</a>
        </div>
      </form>
    </div>
  </section>
</main>

<%- include('../partials/footer') %>