{% load i18n %}

<div id="company-status-{{ company.pk }}" class="flex items-center space-x-2">
    {% if company.status == 'active' %}
    <span class="px-2 py-1 text-sm font-medium rounded-full bg-green-100 text-green-800">
        {% translate "Active" %}
    </span>
    <button
        class="text-red-600 hover:text-red-800 text-sm"
        hx-post="{% url 'companies:toggle-status' pk=company.pk %}"
        hx-target="#company-status-{{ company.pk }}"
        hx-confirm="{% translate 'Are you sure you want to suspend this company?' %}">
        {% translate "Suspend" %}
    </button>
    {% else %}
    <span class="px-2 py-1 text-sm font-medium rounded-full bg-red-100 text-red-800">
        {% translate "Suspended" %}
    </span>
    <button
        class="text-green-600 hover:text-green-800 text-sm"
        hx-post="{% url 'companies:toggle-status' pk=company.pk %}"
        hx-target="#company-status-{{ company.pk }}"
        hx-confirm="{% translate 'Are you sure you want to activate this company?' %}">
        {% translate "Activate" %}
    </button>
    {% endif %}
</div>