<%- include('../shared/_head', { title: title, portalCss: '/platform/merchant/css/portal.css', bodyClass: 'merchant-portal auth-page' }) %>

<div class="auth-shell auth-shell--wide">
  <div class="auth-card">
    <div class="auth-brand">
      <span class="brand-name">BeezifiPay</span>
      <div class="portal-badge portal-badge--merchant">Merchant</div>
    </div>

    <h1 class="auth-title">Add a location</h1>
    <p class="auth-subtitle"><%= org.name %></p>

    <%- include('../shared/_errors', { errors }) %>

    <form method="POST" action="/merchant/organization/location/new" class="auth-form">
      <input type="hidden" name="_csrf" value="<%= csrfToken %>">

      <div class="form-grid-2">
        <div class="field">
          <label for="name">Location name <span class="required">*</span></label>
          <input type="text" id="name" name="name"
                 value="<%= typeof values.name !== 'undefined' ? values.name : '' %>"
                 placeholder="Main Street Café" required>
        </div>

        <div class="field">
          <label for="locationCode">
            Location code <span class="required">*</span>
            <span class="field-hint">Unique short code (e.g. MAIN01)</span>
          </label>
          <input type="text" id="locationCode" name="locationCode"
                 value="<%= typeof values.locationCode !== 'undefined' ? values.locationCode : '' %>"
                 placeholder="MAIN01" pattern="[A-Za-z0-9]+" maxlength="40" required>
        </div>
      </div>

      <div class="field">
        <label for="addressLine1">Street address</label>
        <input type="text" id="addressLine1" name="addressLine1" autocomplete="street-address"
               value="<%= typeof values.addressLine1 !== 'undefined' ? values.addressLine1 : '' %>"
               placeholder="123 Main St">
      </div>

      <div class="form-grid-3">
        <div class="field">
          <label for="addressCity">City</label>
          <input type="text" id="addressCity" name="addressCity" autocomplete="address-level2"
                 value="<%= typeof values.addressCity !== 'undefined' ? values.addressCity : '' %>"
                 placeholder="Springfield">
        </div>

        <div class="field">
          <label for="addressState">State</label>
          <input type="text" id="addressState" name="addressState" autocomplete="address-level1"
                 value="<%= typeof values.addressState !== 'undefined' ? values.addressState : '' %>"
                 placeholder="IL" maxlength="50">
        </div>

        <div class="field">
          <label for="addressZip">ZIP code</label>
          <input type="text" id="addressZip" name="addressZip" autocomplete="postal-code"
                 value="<%= typeof values.addressZip !== 'undefined' ? values.addressZip : '' %>"
                 placeholder="62701" maxlength="20">
        </div>
      </div>

      <div class="form-grid-2">
        <div class="field">
          <label for="phone">Phone</label>
          <input type="tel" id="phone" name="phone" autocomplete="tel"
                 value="<%= typeof values.phone !== 'undefined' ? values.phone : '' %>"
                 placeholder="+1 555-000-0000">
        </div>

        <div class="field">
          <label for="addressCountry">Country</label>
          <select id="addressCountry" name="addressCountry">
            <option value="US" <%= (!values.addressCountry || values.addressCountry === 'US') ? 'selected' : '' %>>United States</option>
            <option value="CA" <%= values.addressCountry === 'CA' ? 'selected' : '' %>>Canada</option>
            <option value="GB" <%= values.addressCountry === 'GB' ? 'selected' : '' %>>United Kingdom</option>
          </select>
        </div>
      </div>

      <div class="form-actions">
        <a href="/merchant/organization" class="btn btn-ghost">Cancel</a>
        <button type="submit" class="btn btn-primary">Add location</button>
      </div>
    </form>
  </div>
</div>

<%- include('../shared/_foot') %>
