{% extends "admin/change_form.html" %}
{% load i18n admin_urls %}

{% block after_field_sets %}
{{ block.super }}

{% if fsm_object_transitions %}
<fieldset class="module aligned fsm-transitions">
    <h2>{% translate "State Transitions" %}</h2>
    {% for fsm_obj in fsm_object_transitions %}
    <div class="fsm-field-transitions" data-field="{{ fsm_obj.fsm_field }}">
        {% if fsm_obj.block_label %}
        <h3>{{ fsm_obj.block_label }}</h3>
        {% endif %}

        {% if fsm_obj.available_transitions %}
        <div class="fsm-transition-buttons">
            {% for transition in fsm_obj.available_transitions %}
            {% if transition.custom.form %}
            <a href="{% url fsm_transition_url_name object_id transition.name %}"
               class="fsm-transition-btn fsm-transition-link"
               title="{{ transition.custom.description|default:'' }}">
                {{ transition.custom.label|default:transition.name }}
            </a>
            {% else %}
            <button type="submit"
                    name="_fsm_transition_to"
                    value="{{ transition.name }}"
                    class="fsm-transition-btn default"
                    title="{{ transition.custom.description|default:'' }}">
                {{ transition.custom.label|default:transition.name }}
            </button>
            {% endif %}
            {% endfor %}
        </div>
        {% else %}
        <p class="fsm-no-transitions">{% translate "No transitions available." %}</p>
        {% endif %}
    </div>
    {% endfor %}
</fieldset>

<style>
.fsm-transitions {
    margin-top: 20px;
}
.fsm-transitions h2 {
    background: #79aec8;
    color: #fff;
    padding: 8px 12px;
}
.fsm-field-transitions {
    padding: 10px 12px;
}
.fsm-field-transitions h3 {
    margin: 0 0 10px 0;
    font-size: 13px;
    color: #666;
}
.fsm-transition-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.fsm-transition-btn {
    padding: 8px 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #f8f8f8;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s ease;
    text-decoration: none;
    color: #333;
    display: inline-block;
}
.fsm-transition-btn:hover {
    background: #417690;
    color: white;
    border-color: #417690;
}
.fsm-transition-link {
    /* Link-specific styles if needed */
}
.fsm-no-transitions {
    color: #999;
    font-style: italic;
    margin: 0;
}
</style>
{% endif %}
{% endblock %}