{% comment %}
FSM Updated Row Partial Template

Generic template for rendering an updated table row after an FSM transition.
Used as the default response template for FSMTransitionView.

Required context:
  - object: The FSM-enabled model instance
  - user: The current user (usually request.user)

Optional context:
  - transition_success: Whether a transition just succeeded
  - success_message: Success message to display (handled by toast)
  - show_actions: Whether to show action buttons (defaults to true)
  - row_class: Additional CSS classes for the row
{% endcomment %}
{% load fsm_tags %}

<tr id="{{ object|default_target_id }}"
    class="{% if transition_success %}animate-flash-success{% endif %} {{ row_class|default:'' }} border-b border-gray-200/50 dark:border-gray-700/50 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">

    <!-- Status Cell -->
    <td class="px-4 py-3">
        <span class="status-badge inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-full
            {% with status=object|get_state_value %}
            {% if status == 'PENDING' %}
            bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300
            {% elif status == 'APPROVED' %}
            bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300
            {% elif status == 'REJECTED' %}
            bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300
            {% elif status == 'ESCALATED' %}
            bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300
            {% elif status == 'IN_PROGRESS' or status == 'PROCESSING' %}
            bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300
            {% elif status == 'COMPLETED' or status == 'RESOLVED' %}
            bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300
            {% else %}
            bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-300
            {% endif %}
            {% endwith %}">
            {% with status=object|get_state_value %}
            <i class="fas fa-{% if status == 'PENDING' %}clock{% elif status == 'APPROVED' %}check{% elif status == 'REJECTED' %}times{% elif status == 'ESCALATED' %}exclamation{% elif status == 'IN_PROGRESS' or status == 'PROCESSING' %}spinner{% elif status == 'COMPLETED' or status == 'RESOLVED' %}check-circle{% else %}circle{% endif %}"></i>
            {% endwith %}
            {{ object|get_state_display }}
        </span>
    </td>

    <!-- Object Info Cell -->
    <td class="px-4 py-3">
        <div class="text-sm font-medium text-gray-900 dark:text-gray-100">
            {{ object }}
        </div>
        {% if object.created_at %}
        <div class="text-xs text-gray-500 dark:text-gray-400">
            {{ object.created_at|date:"M d, Y H:i" }}
        </div>
        {% endif %}
    </td>

    <!-- Actions Cell -->
    {% if show_actions|default:True %}
    <td class="px-4 py-3 text-right">
        {% include 'htmx/state_actions.html' with object=object user=user button_size='sm' inline=True %}
    </td>
    {% endif %}
</tr>

{% comment %}
CSS for flash animation - add to your CSS file or include inline:

@keyframes flash-success {
    0%, 100% { background-color: transparent; }
    50% { background-color: rgba(34, 197, 94, 0.2); }
}

.animate-flash-success {
    animation: flash-success 1s ease-in-out;
}
{% endcomment %}