{% extends 'base.html' %}
{% load static %}

{% block content %}
<div class="max-w-6xl mx-auto p-6">
    <h2 class="text-2xl font-bold mb-6">Service List</h2>

    <table class="min-w-full bg-white shadow rounded">
        <thead>
            <tr class="bg-gray-200 text-left text-sm font-semibold text-gray-700">
                <th class="py-2 px-4">Image</th>
                <th class="py-2 px-4">Title</th>
                <th class="py-2 px-4">Category</th>
                <th class="py-2 px-4">Subcategory</th>
                <th class="py-2 px-4">Availability Day</th>
				 <th class="py-2 px-4">Availability Hours</th>
                <th class="py-2 px-4">Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for service in services %}
            <tr class="border-t text-sm">
                <td class="py-2 px-4">
                    <img src="{{ service.image.url }}" class="h-12 w-12 object-cover rounded" alt="{{ service.title }}">
                </td>
                <td class="py-2 px-4">{{ service.title }}</td>
                <td class="py-2 px-4">{{ service.category.name }}</td>
                <td class="py-2 px-4">{{ service.subcategory.name }}</td>
                <td class="py-2 px-4">{{ service.available_days }}</td>
				  <td class="py-2 px-4">{{ service.available_hours }}</td>
                <td class="py-2 px-4">
                    <a href="{% url 'edit_service' service.id %}" class="text-blue-600 hover:underline">Edit</a> |
                    <a href="{% url 'delete_service' service.id %}" class="text-red-600 hover:underline">Delete</a>
                </td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="6" class="py-4 px-4 text-center text-gray-500">No services found.</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}