{% extends "dashboard/base.html" %} {% load i18n %} 
{% block title %} {% trans "Services" %} {% endblock %} 
{% block content %}
<div class="d-flex align-items-center justify-content-between mb-3">
  <h1 class="h3 mb-0">{% trans "Services" %}</h1>
  <a href="{% url 'dashboard:service_new' %}" class="btn btn-primary">
    {% trans "New service" %}</a>
</div>

{% if services %}
<div class="table-responsive">
  <table class="table table-sm table-hover">
    <thead class="thead-light">
      <tr>
        <th>{% trans "Title" %}</th>
        <th>{% trans "Featured" %}</th>
        <th>{% trans "Active" %}</th>
        <th class="text-right">{% trans "Actions" %}</th>
      </tr>
    </thead>
    <tbody>
      {% for s in services %}
      <tr>
        <td>
          {% if s.image %}
          <div class="mb-2">
            <img src="{{ s.image.url }}" alt="{{ s.title }}" class="img-fluid rounded" style="max-height: 72px; width: auto;">
          </div>
          {% endif %}
          <div class="fw-bold">{{ s.title }}</div>
          <div class="small text-muted">{{ s.short_description }}</div>
        </td>
        <td>
          {% if s.is_featured %}
          <span>{% trans "Yes" %}</span>
          {% else %}-
          {% endif %}
        </td>
        <td>
          {% if s.is_active %}
          <span>{% trans "Yes" %}</span>
          {% else %}
          <span>{% trans "No" %}</span>
          {% endif %}
        </td>
        <td class="text-right">
          <a
            class="btn btn-sm btn-outline-secondary"
            href="{% url 'dashboard:service_edit' s.pk %}"
          >
            {% trans "Edit" %}
          </a>
           <a href="{% url 'dashboard:service_delete' s.pk %}"
                 class="btn btn-sm btn-outline-danger">
                {% trans "Delete" %}
              </a>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
<div class="alert alert-info">{% trans "No services yet." %}</div>
{% endif %} 
{% endblock %}