<%- include('partials/header', { title: 'Start Training' }) %>

<div class="container">
  <div class="card start-card">
    <h2>Let's Get Started</h2>
    <p class="subtitle">Enter your information to begin the PCA Certification Training</p>

    <% if (typeof error !== 'undefined' && error) { %>
      <div class="alert alert-error">
        <%= error %>
      </div>
    <% } %>

    <form method="POST" action="/start" class="form">
      <div class="form-group">
        <label for="name">Full Name *</label>
        <input type="text" id="name" name="name" required placeholder="John Doe" class="form-input">
      </div>

      <div class="form-group">
        <label for="email">Email Address (Optional)</label>
        <input type="email" id="email" name="email" placeholder="john@example.com" class="form-input">
      </div>

      <div class="form-group">
        <label for="agencyCode">Agency Code *</label>
        <select id="agencyCode" name="agencyCode" required class="form-input">
          <option value="">Select Your Agency</option>
          <% agencies.forEach(agency => { %>
            <option value="<%= agency.code %>"><%= agency.name %> (<%= agency.code %>)</option>
          <% }); %>
        </select>
      </div>

      <button type="submit" class="btn btn-primary btn-large">Begin Training</button>
    </form>

    <p class="form-note">
      <strong>Note:</strong> If you don't see your agency in the list, please contact your agency administrator for the correct agency code.
    </p>
  </div>
</div>

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