{% extends "base.html" %}
{% block title %}Services – DoIP Server{% endblock %}

{% block content %}
<div class="flex items-center gap-3 mb-6">
  <a href="/ecus" class="text-gray-500 hover:text-gray-300">← ECUs</a>
  <h1 class="text-xl font-bold text-amber-400">
    UDS Services – ECU 0x{{ '%04X' | format(ecu_address) }}
  </h1>
</div>

<!-- Add Service -->
<section class="mb-6">
  <button onclick="newService({{ ecu_address }})"
          class="text-xs px-3 py-1 bg-green-700 hover:bg-green-600 rounded">
    + Add Service
  </button>
</section>

<!-- Service table -->
<div id="service-table"
     hx-get="/api/ecus/{{ ecu_address }}/services"
     hx-trigger="load"
     hx-swap="outerHTML"
     class="overflow-x-auto">
  Loading…
</div>

<script>
  // Exposed for app.js row-action handlers (edit/delete/refresh)
  window.__ecuAddress = {{ ecu_address }};
</script>
{% endblock %}