`views/admin/profile.ejs`

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

<section class="long-form" style="max-width:720px">
  <p class="kicker">Profile</p>
  <h1 class="display-sm">Edit your listing.</h1>
  <p class="lede">Changes go live immediately on your public profile at <a href="/business/<%= biz.slug %>" target="_blank" rel="noopener noreferrer">/business/<%= biz.slug %></a>.</p>

  <% if (ok) { %><p class="callout" style="background:#dcfce7;border-left:3px solid #16a34a;color:#166534;padding:12px 16px;margin:16px 0;border-radius:4px">Profile saved.</p><% } %>
  <% if (typeof photoOk !== 'undefined' && photoOk) { %><p class="callout" style="background:#dcfce7;border-left:3px solid #16a34a;color:#166534;padding:12px 16px;margin:16px 0;border-radius:4px">Photo updated.</p><% } %>
  <% if (typeof photoErr !== 'undefined' && photoErr) {
    var msg = 'Upload failed.';
    if (photoErr === 'too_big') msg = 'File too large — max 5 MB.';
    else if (photoErr === 'only_jpg_png_webp') msg = 'Only JPG, PNG, or WebP allowed.';
    else if (photoErr === 'no_file') msg = 'No file selected.';
    else if (photoErr === 'image_decode_failed') msg = 'Couldn\'t read that image — try saving as JPG or PNG and re-uploading.';
  %><p class="callout" style="background:#fee2e2;border-left:3px solid #dc2626;padding:12px 16px;margin:16px 0;border-radius:4px"><%= msg %></p><% } %>
  <% if (error) { %><p class="callout" style="background:#fee2e2;border-left:3px solid #dc2626;padding:12px 16px;margin:16px 0;border-radius:4px"><%= error %></p><% } %>

  <h3 style="margin-top:24px">Cover photo</h3>
  <p class="muted" style="font-size:13px;margin:0 0 12px">Replaces the gradient banner above your name on the public profile and on directory cards. JPG, PNG, or WebP up to 5 MB — auto-resized to 1600px and converted to WebP for fast loading.</p>
  <% if (biz.photo_path) { %>
    <div style="display:flex;gap:14px;align-items:flex-start;margin:0 0 14px;flex-wrap:wrap">
      <img src="<%= biz.photo_path %>" alt="<%= biz.business_name %> cover photo" style="width:200px;height:120px;object-fit:cover;border:1px solid var(--border);border-radius:4px">
      <form method="post" action="/admin/profile/photo/delete" style="margin:0">
        <input type="hidden" name="_csrf" value="<%= csrfToken %>">
        <button type="submit" class="btn btn-ghost btn-sm" style="font-size:12px">Remove photo</button>
      </form>
    </div>
  <% } %>
  <form method="post" action="/admin/profile/photo" enctype="multipart/form-data" style="display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 24px">
    <input type="hidden" name="_csrf" value="<%= csrfToken %>">
    <input type="file" name="photo" accept="image/jpeg,image/png,image/webp" required>
    <button type="submit" class="btn btn-primary btn-sm">Upload</button>
  </form>

  <form method="post" action="/admin/profile" style="margin-top:24px">
    <input type="hidden" name="_csrf" value="<%= csrfToken %>">

    <label>Business name<input type="text" name="business_name" required maxlength="200" value="<%= biz.business_name %>"></label>
    <label>Headline (1 line)<input type="text" name="headline" maxlength="250" value="<%= biz.headline || '' %>" placeholder="e.g. Wood-fired Italian, family-run since 1998"></label>
    <label>Description<textarea name="description" rows="5" maxlength="4000"><%= biz.description || '' %></textarea></label>

    <h3 style="margin-top:24px">Address</h3>
    <label>Street<input type="text" name="street" maxlength="200" value="<%= biz.street || '' %>"></label>
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px">
      <label>Neighborhood<input type="text" name="neighborhood" maxlength="80" value="<%= biz.neighborhood || '' %>"></label>
      <label>City<input type="text" name="city" maxlength="80" value="<%= biz.city || '' %>"></label>
    </div>
    <label>ZIP<input type="text" name="zip" maxlength="10" value="<%= biz.zip || '' %>"></label>

    <h3 style="margin-top:24px">Contact</h3>
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px">
      <label>Phone<input type="tel" name="phone" maxlength="32" value="<%= biz.phone || '' %>"></label>
      <label>Email (where leads land)<input type="email" name="email" maxlength="200" value="<%= biz.email || '' %>"></label>
    </div>
    <label>Website<input type="text" name="website" maxlength="300" value="<%= biz.website || '' %>" placeholder="https://yoursite.com"></label>
    <label>Instagram handle<input type="text" name="instagram_handle" maxlength="60" value="<%= biz.instagram_handle || '' %>" placeholder="yourhandle (no @)"></label>

    <button type="submit" class="btn btn-primary btn-lg" style="margin-top:24px">Save profile</button>
  </form>
</section>

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