source: views/client/unit-detail.ejs@ 7517a3a

<%- include('../partials/header', { title: 'Unit ' + unit.unit_number }) %>

<h1>Unit <%= unit.unit_number %> - <%= unit.building_name %></h1>
<p>Floor <%= unit.floor_number %></p>

<div>
  <div>
    <% if (unit.image) { %>
      <div class="main-image">
        <img src="/uploads/<%= unit.image %>" alt="Unit <%= unit.unit_number %>" onerror="this.src='/images/placeholder.jpg'">
      </div>
    <% } %>
  </div>

  <div class="unit-specifications">
    <h2>Specifications</h2>
    <table class="details-table">
      <tr>
        <th>Unit Number:</th>
        <td><%= unit.unit_number %></td>
      </tr>
      <tr>
        <th>Rooms:</th>
        <td><%= unit.room_number %></td>
      </tr>
      <tr>
        <th>Floor Area:</th>
        <td><%= unit.floor_area %> m²</td>
      </tr>
      <tr>
        <th>Price:</th>
        <td class="price">€<%= unit.price.toLocaleString() %></td>
      </tr>
      <tr>
        <th>Status:</th>
        <td>
          <span class="status status-<%= unit.status.toLowerCase() %>">
            <%= unit.status %>
          </span>
        </td>
      </tr>
      <tr>
        <th>Building:</th>
        <td><%= unit.building_name %></td>
      </tr>
      <tr>
        <th>Floor:</th>
        <td><%= unit.floor_number %></td>
      </tr>
    </table>
  </div>
</div>

<div>
      <% if (unit.floorplan) { %>
        <a href="/uploads/<%= unit.floorplan %>" target="_blank" class="btn btn-small">
          View Floor Plan
        </a>
      <% } %>
    </div>

<div style="margin-top: 16px; display: flex; flex-direction: column;">
  <% if (unit.status === 'Available') { %>
    <a href="/units/<%= unit.unit_id %>/book" class="book-btn">Book Viewing Appointment</a>
  <% } else { %>
    <p>This unit is currently <%= unit.status.toLowerCase() %> and cannot be booked.</p>
  <% } %>
  <a href="/floors/<%= unit.floor_id %>/units" class="btn btn-secondary">← Back to Floor</a>
</div>