{% extends "base.html" %}
{% load scoped_tags %}

{% block title %}Services{% endblock %}
{% block page_title %}Services{% endblock %}
{% block page_subtitle %}Versioned, isolated service objects (Layer 3){% endblock %}
{% block layer_indicator %}L3 Objects · L4 Tenancy{% endblock %}

{% block content %}
<div class="flex justify-between items-center mb-6">
  <div>
    <span class="text-sm text-slate-500">{{ services|length }} service{{ services|length|pluralize }} visible to you</span>
  </div>
  <a href="{% url 'services_create' %}" class="px-4 py-2 bg-brand-600 text-white text-sm font-medium rounded-lg hover:bg-brand-700 transition-colors">
    + New Service
  </a>
</div>

{% if services %}
<div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
  <table class="min-w-full divide-y divide-slate-200">
    <thead class="bg-slate-50">
      <tr>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Name</th>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Language</th>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Port</th>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Owner</th>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Access</th>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Created</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-slate-200">
      {% for svc in services %}
      <tr class="hover:bg-slate-50">
        <td class="px-4 py-3">
          <a href="{% url 'services_detail' svc.id %}" class="text-sm font-medium text-brand-600 hover:text-brand-800">
            {{ svc.data.name|default:"Unnamed" }}
          </a>
          {% if svc.data.description %}
          <p class="text-xs text-slate-400 mt-0.5">{{ svc.data.description|truncatewords:12 }}</p>
          {% endif %}
        </td>
        <td class="px-4 py-3 text-sm text-slate-600">{{ svc.data.language|default:"—" }}</td>
        <td class="px-4 py-3 text-sm text-slate-600 font-mono">{{ svc.data.port|default:"—" }}</td>
        <td class="px-4 py-3 text-xs font-mono text-slate-400">{{ svc.owner_id|truncate_id }}</td>
        <td class="px-4 py-3">
          {% if svc.is_owner %}
          <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-700 ring-1 ring-green-600/20">Owner</span>
          {% else %}
          <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-700 ring-1 ring-blue-600/20">Shared</span>
          {% endif %}
        </td>
        <td class="px-4 py-3 text-xs text-slate-400">{{ svc.created_at|format_dt }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
{% include "components/_empty_state.html" with title="No services visible" message="You don't own any services and none have been shared with you." action_url="/services/create/" action_label="Create Service" %}
{% endif %}
{% endblock %}