<% 
if (
  typeof trip !== 'undefined' &&
  trip.extra_options &&
  typeof translatedExtraOptions !== 'undefined' &&
  translatedExtraOptions.length > 0
) { 

  const selectedExtraIds = trip.extra_options.split(',');
%>

<div class="bg-blue-50 rounded-lg border border-blue-100 p-3">
  <h3 class="text-sm font-medium text-blue-800 mb-3 flex items-center">
    <i class="fas fa-user-circle mr-2"></i> Extra Services
  </h3>

  <ul style="list-style:none; padding:0; margin:0;">
    <% translatedExtraOptions.forEach(option => { 
        if (!selectedExtraIds.includes(String(option.extra_option_id))) return;
    %>

      <li style="border-bottom:1px solid #ddd; padding-bottom:10px; margin-bottom:10px;">
        <div>
          <h6 class="text-sm font-semibold text-gray-800">
            <%= option.title %> (<%= option.type %>)
          </h6>

          <% if (option.short_desc) { %>
            <p class="text-xs text-gray-600 mb-1">
              <%= option.short_desc %>
            </p>
          <% } %>

          <p class="text-xs text-gray-700 font-medium">
            <%= Number(option.fare).toFixed(2) %>
          </p>
        </div>
      </li>

    <% }) %>
  </ul>
</div>

<% } %>