<div class="admin-header">
  <h1>Inquiry #<%= inquiry.id %></h1>
  <a href="/admin/inquiries" class="btn btn-outline btn-sm">&larr; Back</a>
</div>

<div class="grid grid-2" style="align-items:start">
  <div style="background:var(--color-bg);border-radius:var(--radius-lg);padding:1.5rem;box-shadow:var(--shadow-sm)">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem">
      <span class="status-badge status-<%= inquiry.status %>"><%= inquiry.status %></span>
      <span style="color:var(--color-text-muted);font-size:0.875rem"><%= formatDate(inquiry.created_at) %></span>
    </div>

    <h2 style="font-family:var(--font-heading);color:var(--color-primary-dark);margin-bottom:1rem"><%= inquiry.subject || 'General Enquiry' %></h2>

    <table class="admin-table" style="box-shadow:none">
      <tbody>
        <tr><th style="width:120px;border:none;background:transparent;padding-left:0">Name</th><td style="border:none;padding-left:0"><%= inquiry.name %></td></tr>
        <tr><th style="border:none;background:transparent;padding-left:0">Email</th><td style="border:none;padding-left:0"><%= inquiry.email ? inquiry.email : '-' %></td></tr>
        <tr><th style="border:none;background:transparent;padding-left:0">Phone</th><td style="border:none;padding-left:0"><%= inquiry.phone ? inquiry.phone : '-' %></td></tr>
        <tr><th style="border:none;background:transparent;padding-left:0">Service</th><td style="border:none;padding-left:0"><%= inquiry.service || '-' %></td></tr>
        <% if (property) { %>
          <tr>
            <th style="border:none;background:transparent;padding-left:0">Property</th>
            <td style="border:none;padding-left:0"><a href="/properties/<%= property.slug %>" target="_blank"><%= property.title %></a></td>
          </tr>
        <% } %>
      </tbody>
    </table>

    <h3 style="font-family:var(--font-heading);margin:1.5rem 0 0.75rem;color:var(--color-primary-dark)">Message</h3>
    <p style="line-height:1.8;white-space:pre-line"><%= inquiry.message %></p>
  </div>

  <div style="background:var(--color-bg);border-radius:var(--radius-lg);padding:1.5rem;box-shadow:var(--shadow-sm);height:fit-content">
    <h3 style="font-family:var(--font-heading);color:var(--color-primary-dark);margin-bottom:1rem">Update Status</h3>
    <form action="/admin/inquiries/<%= inquiry.id %>/status" method="POST">
      <div class="form-group">
        <label class="form-label" for="status">Status</label>
        <select name="status" id="status" class="form-select">
          <option value="new" <%= inquiry.status === 'new' ? 'selected' : '' %>>New</option>
          <option value="read" <%= inquiry.status === 'read' ? 'selected' : '' %>>Read</option>
          <option value="responded" <%= inquiry.status === 'responded' ? 'selected' : '' %>>Responded</option>
          <option value="archived" <%= inquiry.status === 'archived' ? 'selected' : '' %>>Archived</option>
        </select>
      </div>
      <button type="submit" class="btn btn-secondary" style="width:100%">Update Status</button>
    </form>

    <% if (inquiry.email) { %>
      <a href="mailto:<%= inquiry.email %>?subject=Re: <%= encodeURIComponent(inquiry.subject || 'Your enquiry') %>" class="btn btn-outline" style="width:100%;margin-top:1rem">Reply by Email</a>
    <% } %>
  </div>
</div>
