<div class="row mt-4">
  <div class="col-4 col-lg-3 col-xl-2 pe-0">
    <ul class="list-group flex-column" id="scripts-tabs">
      <%# each key is in the format "proto/port" e.g. "tcp/22" %>
      <% extras.keys.each do |key| %>
        <a class="list-group-item" data-bs-toggle="pill" data-behavior="services-extras-link" href="#<%= key.gsub('/', '-') %>-tab">
          <%= key %>
        </a>
      <% end %>
    </ul>
  </div>

  <div class="col-8 col-lg-9 col-xl-10">
    <div class="tab-content">
      <% extras.each do |port_and_proto, data| %>
        <div id="<%= port_and_proto.gsub('/', '-') %>-tab" class="tab-pane ms-2 ps-4" data-behavior="services-extras-tab-pane">
          <div class="table-wrapper">
            <table class="table table-sm">
              <thead>
                <tr>
                  <th>ID</th>
                  <th>Output</th>
                </tr>
              </thead>
              <tbody>
                <% data.each do |datum| %>
                  <tr>
                    <td class="services-extras-datum-id"><%= datum[:id] %></td>
                    <td class="services-extras-datum-output"><%= datum[:output] %></td>
                  </tr>
                <% end %>
              </tbody>
            </table>
          </div>
        </div>
      <% end %>
    </div>
  </div>
</div>
