<%
const isRequest = trip && trip.trip_status === 'request';
const maxStops = typeof max_stops !== 'undefined' ? max_stops : 3;

let initialStops = [];
try {
  initialStops = (trip && trip.stops && typeof trip.stops === 'string')
    ? JSON.parse(trip.stops)
    : (Array.isArray(trip && trip.stops) ? trip.stops : []);
} catch (e) {
  initialStops = [];
}
%>

<div id="multistopsContainer" class="space-y-3" style="display: none;">
  <div class="flex items-center justify-between">
    <label class="block text-sm font-medium text-gray-700">
      <i class="fas fa-map-pin mr-1 text-amber-500"></i> Intermediate Stops
      <span class="text-gray-500 font-normal ml-1">
        (max <%= maxStops %>)<%= isRequest ? ' — editable' : ' — read-only' %>
      </span>
    </label>

    <% if (isRequest) { %>
    <button type="button" id="addStopBtn"
      class="text-sm py-1.5 px-3 rounded-md bg-amber-100 text-amber-800 hover:bg-amber-200 focus:outline-none focus:ring-2 focus:ring-amber-500">
      <i class="fas fa-plus mr-1"></i> Add stop
    </button>
    <% } %>
  </div>

  <div id="stopsList" class="space-y-2" style="display: grid; gap: 10px;"></div>
  <input type="hidden" name="stops" id="stopsInput" value="[]">
</div>

<script>
  window.EDIT_TRIP_MULTISTOPS = {
    isRequest: <%= isRequest %>,
    maxStops: Number(<%= maxStops %>),
    initialStops: <%- JSON.stringify(initialStops)
      .replace(/</g, '\\u003c')
      .replace(/>/g, '\\u003e') %>
  };
</script>
