{% extends "base.html" %}
{% block title %}Services — Jason Studio{% endblock %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
    <h2 class="mb-0">Service Catalog</h2>
    <div class="d-flex gap-2 flex-wrap">
        <a href="{% url 'service_add' %}" class="btn btn-primary btn-sm">Add Service</a>
        <a href="{% url 'photographer_dashboard' %}" class="btn btn-outline-secondary btn-sm">Dashboard</a>
    </div>
</div>

{% if services %}
<div class="table-responsive">
    <table class="table table-hover">
        <thead>
            <tr>
                <th>Name</th>
                <th>Unit Type</th>
                <th class="text-end">Default Rate</th>
                <th>Status</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            {% for service in services %}
            <tr class="{% if not service.is_active %}table-secondary{% endif %}">
                <td>{{ service.name }}</td>
                <td>{{ service.get_unit_type_display }}</td>
                <td class="text-end">${{ service.default_rate|floatformat:2 }}</td>
                <td>
                    {% if service.is_active %}
                    <span class="badge bg-success">Active</span>
                    {% else %}
                    <span class="badge bg-secondary">Inactive</span>
                    {% endif %}
                </td>
                <td>
                    <a href="{% url 'service_edit' service.pk %}" class="btn btn-sm btn-outline-dark">Edit</a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% else %}
<div class="alert alert-info">No services yet. Click "Add Service" to create your first one.</div>
{% endif %}
{% endblock %}