@forelse ($purposes as $purpose)
    <tr data-id="{{ $purpose->id }}">
        <td class="has-text-centered">{{ $loop->index + 1 }}</td>
        <td>{{ $purpose->name }}</td>
        <td>{{ $purpose->description ?? '-' }}</td>
        @role(['super_admin','user_admin'])
            <td class="has-text-centered">
                <button type="button" class="button h-button h-modal-trigger edit-button-purpose" title="Edit"
                    data-id="{{ $purpose->id }}" data-name="{{ $purpose->name }}"
                    data-description = "{{ $purpose->description }}">
                    <span class="icon">
                        @include('components.icons.pencil-alt')
                    </span>
                </button>
            </td>
        @endrole
    </tr>

@empty
    <tr>
        <td colspan="4" class="has-text-centered">
            @include('components.empty.empty-state')
        </td>
    </tr>
@endforelse

<script>
    $(document).on('click', '.edit-button-purpose', function() {
        const id = $(this).data('id');
        const name = $(this).data('name');
        const description = $(this).data('description');

        $('#modal_edit_purpose').addClass('is-active')
        $('#purpose_id').val(id)
        $('#purpose_name').val(name)
        $('#purpose_description').val(description)

    });
</script>